Cleanup

packages/addon/public/channel_selector.html

@@ -16,11 +16,16 @@
 
       #list {
         background-color: white;
-        border: 1px solid lightgrey;
-        border-radius: 3px;
-        padding: 10px;
+        margin: 10px;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
         font-family: sans-serif;
         display: none;
+        position: fixed;
+        bottom: 4px;
+        right: 4px;
+
         & > div {
           font-size: 18px;
           height: 24px;
@@ -41,10 +46,12 @@
       }
       #tokens {
         display: none;
+        cursor: pointer;
       }
 
       body[data-expanded="true"] #list {
         display: block;
+      }
 
       body[data-expanded="false"] #tokens {
         display: block;

packages/addon/public/intent_resolver.html

@@ -14,6 +14,10 @@
         scrollbar-width: thin;
         scrollbar-color: #ace;
         border-radius: 8px;
+        width: fit-content;
+        position: fixed;
+        bottom: 4px;
+        right: 0;
 
         & > div {
           font-size: 18px;

packages/addon/src/channel_selector.ts

@@ -1,7 +1,7 @@
 import { IframeChannelsPayload, Channel } from "@kite9/fdc3-common";
 
 
-const fillChannels = (data: Channel[], selected: string | null, messageClickedChannel: (s: string) => void) => {
+const fillChannels = (data: Channel[], selected: string | null, messageClickedChannel: (s: string | null) => void) => {
   const list = document.getElementById('list')!!;
   list.innerHTML = '';
 
@@ -27,7 +27,9 @@ const fillChannels = (data: Channel[], selected: string | null, messageClickedCh
     }
 
     list.appendChild(node);
-    node.addEventListener('click', () => messageClickedChannel(id));
+    node.addEventListener('click', () => {
+      messageClickedChannel(id)
+    });
 
     if (id === selected) {
       node.setAttribute("aria-selected", "true");
@@ -51,6 +53,7 @@ window.addEventListener("load", () => {
         break;
       }
       case "iframeChannels": {
+        logo.removeEventListener("click", expand);
         const {userChannels, selected} = data.payload as IframeChannelsPayload;
         fillChannels(userChannels, selected, (channelStr) => {
           myPort.postMessage({
@@ -63,6 +66,7 @@ window.addEventListener("load", () => {
         });
         const selectedChannel = userChannels.find((c) => c.id === selected);
         logo.style.fill = selectedChannel?.displayMetadata?.color ?? "white";
+        logo.addEventListener("click", expand);
         break;
       }
     }
@@ -90,10 +94,10 @@ window.addEventListener("load", () => {
       type: "iframeRestyle",
       payload: {
         updatedCSS: {
-          width: `266px`,
-          height: `113px`,
-          right: "2px",
-          bottom: "2px",
+          width: `100%`,
+          height: `100%`,
+          top: 0,
+          left: 0,
           zIndex: "1000",
           "z-index": "1000",
           position: "fixed"
@@ -103,7 +107,6 @@ window.addEventListener("load", () => {
   }
 
   const collapse = () => {
-    document.body.setAttribute("data-expanded", "false");
     myPort.postMessage({
       type: "iframeRestyle",
       payload: {
@@ -118,8 +121,14 @@ window.addEventListener("load", () => {
         }
       }
     });
-  }
 
-  logo.addEventListener("click", expand);
+    // If you immediately change to the logo, before the iframe has a chance to finish restyling,
+    // you see a flicker of a giant, colored logo.
+    // Here, we wait a negligible amount of time, and hope that the restyling has finished. This avoids the flicker.
+    // It's not a *good* idea, it's just the best available, since we don't know when the restyle finishes.
+    setTimeout(() => {
+      document.body.setAttribute("data-expanded", "false");
+    }, 15);
+  }
 
 });