cherry picked

src/css/popup.css

@@ -1204,3 +1204,19 @@ input {
 #manage-assigned-sites-list {
   color: #5A9DE6;
 }
+
+#info-icon {
+  position: absolute;
+  right: 13px;
+  top: 13px;
+  font-size: 10px;
+  height: 14px;
+  width: 14px;
+  border: solid 1px #000;
+  border-radius: 7px;
+  cursor: pointer;
+  text-align: center;
+  color: #000;
+  text-decoration: none;
+  font-weight: bold;
+}

src/js/popup.js

@@ -534,6 +534,9 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     Utils.addEnterHandler(document.querySelector("#always-open-in"), () => {
       Logic.showPanel(P_CONTAINER_PICKER, null, ALWAYS_OPEN_IN_PICKER);
     });
+    Utils.addEnterHandler(document.querySelector("#info-icon"), () => {
+      browser.runtime.openOptionsPage();
+    });
     Utils.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
       try {
         await browser.runtime.sendMessage({

src/popup.html

@@ -115,6 +115,7 @@
     <a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
   </div>
 
+<<<<<<< HEAD
   <div class="panel container-panel hide" id="container-panel">
     <div id="current-tab">
       <h3>Current Tab</h3>
@@ -126,6 +127,57 @@
           <span id="current-container"></span>
         </span>
       </label>
+=======
+  <div class="panel menu-panel container-panel hide" id="container-panel">
+    <h3 class="title">
+      Multi-Account Containers
+    </h3>
+    <a href="#" id="info-icon">i</a>
+    <hr>
+    <table class="menu">
+      <tr class="menu-item" id="open-new-tab-in">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
+          <span class="menu-text">Open New Tab in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item" id="reopen-site-in">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
+          <span class="menu-text">Reopen This Site in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+    </table>
+    <hr>
+    <table class="menu">
+      <tr class="menu-item" id="sort-containers-link">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
+          <span class="menu-text">Sort Tabs by Container</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item" id="always-open-in">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/open-in-new-16.svg" />
+          <span class="menu-text">Always Open This Site in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+    </table>
+    <hr>
+    <div class="sub-header">
+    Containers
+>>>>>>> 30e5895... added info icon as ling to options page
     </div>
     <div class="container-panel-controls">
       <a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>