Container tab listing

2017-01-10 13:19:18 +00:00
parent 8598c76e25
commit bb0713d0d4
4 changed files with 289 additions and 116 deletions
@@ -45,7 +45,7 @@ table {
  margin: 4px;
 }

-table.unstriped tbody tr {
+.container-panel > table.unstriped tbody tr {
  border-bottom: 1px solid #f1f1f1;
  background-color: #fefefe;
  cursor: pointer;
@@ -62,6 +62,11 @@ table.unstriped tbody tr {
  block-size: 32px;
 }

+.userContext-icon:hover {
+  background-image: url('/img/container-add.svg');
+  fill: 'gray';
+}
+
 .edit-identities {
  background: #DCDBDC;
 }
@@ -134,3 +139,7 @@ table.unstriped tbody tr {
 [data-identity-icon="circle"] {
  --identity-icon: url("/img/usercontext.svg#circle");
 }
+
+.container-info-has-tabs {
+  cursor: pointer;
+}
@@ -2,33 +2,64 @@
 const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
 const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";

-function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
-  // Let"s show/hide the tabs
-  return browser.runtime.sendMessage({
-    method: hasHiddenTabs ? "showTabs" : "hideTabs",
-    userContextId: userContextId
-  })
-  // We need to retrieve the new identity configuration in order to choose the
-  // correct icon.
-  .then(() => {
-    return browser.runtime.sendMessage({
-      method: "getIdentity",
-      userContextId: userContextId
-    });
-  })
-  // Let"s update the icon.
-  .then((identity) => {
-    let hideorshowIcon = document.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
-    if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
-      hideorshowIcon.style.display = "none";
-    } else {
-      hideorshowIcon.style.display = "";
+function showContainerTabsPanel(identity) {
+  // Populating the panel: name and icon
+  document.getElementById("container-info-name").innerText = identity.name;
+
+  let icon = document.getElementById("container-info-icon");
+  icon.setAttribute("data-identity-icon", identity.image);
+  icon.setAttribute("data-identity-color", identity.color);
+
+  // Show or not the has-tabs section.
+  for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) {
+    trHasTabs.hidden = !identity.hasHiddenTabs && !identity.hasOpenTabs;
+    trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
+  }
+
+  const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
+  hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
+
+  const hideShowLabel = document.getElementById("container-info-hideorshow-label");
+  hideShowLabel.innerText = identity.hasHiddenTabs ? "Show these container tabs" : "Hide these container tabs";
+
+  // Let"s remove all the previous tabs.
+  for (const trTab of document.getElementsByClassName("container-info-tab")) {
+    trTab.remove();
+  }
+
+  // Let"s retrieve the list of tabs.
+  browser.runtime.sendMessage({
+    method: "getTabs",
+    userContextId: identity.userContextId,
+  }).then(tabs => {
+    // For each one, let's create a new line.
+    let fragment = document.createDocumentFragment();
+    for (const tab of tabs) {
+      let tr = document.createElement("tr");
+      fragment.appendChild(tr);
+      tr.classList.add("container-info-tab");
+      tr.innerHTML = `
+        <td><img class="icon" src="${tab.favicon}" /></td>
+        <td>${tab.title}</td>`;
+      // On click, we activate this tab.
+      tr.addEventListener("click", () => {
+        browser.runtime.sendMessage({
+          method: "showTab",
+          tabId: tab.id,
+        }).then(() => {
+          window.close();
+        });
+      });
    }

-    hideorshowIcon.src = hasHiddenTabs ? CONTAINER_HIDE_SRC : CONTAINER_UNHIDE_SRC;
+    document.getElementById("container-info-table").appendChild(fragment);
+  })

-    // The new identity is returned.
-    return identity;
+  // Finally we are ready to show the panel.
+  .then(() => {
+    // FIXME: the animation...
+    document.getElementById("container-panel").classList.add("hide");
+    document.getElementById("container-info-panel").classList.remove("hide");
  });
 }

@@ -63,59 +94,34 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
  let fragment = document.createDocumentFragment();

  identities.forEach(identity => {
-    let hideOrShowIconSrc = CONTAINER_HIDE_SRC;
-
-    if (identity.hasHiddenTabs) {
-      hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
-    }
-
    let tr = document.createElement("tr");
    fragment.appendChild(tr);
    tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
    tr.innerHTML = `
      <td>
-        <div class="userContext-icon"
+        <div class="userContext-icon open-newtab"
          data-identity-icon="${identity.image}"
          data-identity-color="${identity.color}">
        </div>
      </td>
-      <td>${identity.name}</td>
-      <td class="newtab">
-        <img
-          title="Open a new ${identity.name} container tab"
-          src="/img/container-add.svg"
-          class="icon newtab-icon" />
-      </td>
-      <td class="hideorshow" >
-        <img
-          title="Hide or show ${identity.name} container tabs"
-          data-identity-cookie-store-id="${identity.userContextId}"
-          id="uci-${identity.userContextId}-hideorshow-icon"
-          class="icon hideorshow-icon"
-          src="${hideOrShowIconSrc}"
-        />
-      </td>
-      <td>&gt;</td>`;
-
-    // No tabs, no icon.
-    if (!identity.hasHiddenTabs && !identity.hasOpenTabs) {
-      let hideorshowIcon = fragment.querySelector(`#uci-${identity.userContextId}-hideorshow-icon`);
-      hideorshowIcon.style.display = "none";
-    }
+      <td class="open-newtab">${identity.name}</td>
+      <td class="info">&gt;</td>`;

    tr.addEventListener("click", e => {
-      if (e.target.matches(".hideorshow-icon")) {
-        showOrHideContainerTabs(identity.userContextId,
-                                identity.hasHiddenTabs).then(i => { identity = i; });
-      } else if (e.target.matches(".newtab-icon")) {
-        showOrHideContainerTabs(identity.userContextId, true).then(() => {
-          browser.runtime.sendMessage({
+      if (e.target.matches(".open-newtab")) {
+        browser.runtime.sendMessage({
+          method: "showTabs",
+          userContextId: identity.userContextId
+        }).then(() => {
+          return browser.runtime.sendMessage({
            method: "openTab",
-            userContextId: identity.userContextId
-          }).then(() => {
-            window.close();
+            userContextId: identity.userContextId,
          });
+        }).then(() => {
+          window.close();
        });
+      } else if (e.target.matches(".info")) {
+        showContainerTabsPanel(identity);
      }
    });
  });
@@ -139,3 +145,33 @@ document.querySelector("#sort-containers-link").addEventListener("click", () =>
    window.close();
  });
 });
+
+document.querySelector("#close-container-info-panel").addEventListener("click", () => {
+  // TODO: animation
+  document.getElementById("container-info-panel").classList.add("hide");
+  document.getElementById("container-panel").classList.remove("hide");
+});
+
+document.querySelector("#container-info-hideorshow").addEventListener("click", e => {
+  let userContextId = e.target.parentElement.getAttribute("data-user-context-id");
+  browser.runtime.sendMessage({
+    method: "getIdentity",
+    userContextId,
+  }).then(identity => {
+    return browser.runtime.sendMessage({
+      method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
+      userContextId: identity.userContextId
+    });
+  }).then(() => {
+    window.close();
+  });
+});
+
+document.querySelector("#container-info-movetabs").addEventListener("click", e => {
+  return browser.runtime.sendMessage({
+    method: "moveTabsToWindow",
+    userContextId: e.target.parentElement.getAttribute("data-user-context-id"),
+  }).then(() => {
+    window.close();
+  });
+});
@@ -40,6 +40,29 @@
      </div>
    </div>
  </div>
+  <div class="hide panel container-info-panel" id="container-info-panel">
+    <div class="row popup-bumper">
+      <div class="small-1 columns" id="close-container-info-panel">&lt;</div>
+      <div class="small-11 columns">
+        <table id="container-info-table">
+        <tr>
+          <td>
+            <div class="userContext-icon" id="container-info-icon"
+                 data-identity-icon="" data-identity-color=""></div></td>
+          <td id="container-info-name"></td>
+        </tr>
+        <tr class="container-info-has-tabs" id="container-info-hideorshow">
+          <td>
+            <img class="icon" id="container-info-hideorshow-icon" src="" />
+          </td>
+          <td id="container-info-hideorshow-label"></td>
+        </tr>
+        <tr class="container-info-has-tabs" id="container-info-movetabs">
+          <td colspan="2">Open all tabs in new window</td>
+        </tr>
+      </div>
+    </div>
+  </div>
  <script src="js/popup.js"></script>
 </body>
 </html>