Merge pull request #82 from bakulf/stuff

Many little things

LICENSE.txt

@@ -0,0 +1,373 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+    means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+    means
+
+    (a) that the initial Contributor has attached the notice described
+        in Exhibit B to the Covered Software; or
+
+    (b) that the Covered Software was made available under the terms of
+        version 1.1 or earlier of the License, but not also under the
+        terms of a Secondary License.
+
+1.6. "Executable Form"
+    means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+    means a work that combines Covered Software with other material, in 
+    a separate file or files, that is not Covered Software.
+
+1.8. "License"
+    means this document.
+
+1.9. "Licensable"
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+1.10. "Modifications"
+    means any of the following:
+
+    (a) any file in Source Code Form that results from an addition to,
+        deletion from, or modification of the contents of Covered
+        Software; or
+
+    (b) any new file in Source Code Form that contains any Covered
+        Software.
+
+1.11. "Patent Claims" of a Contributor
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+1.12. "Secondary License"
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+1.13. "Source Code Form"
+    means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, "You" includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, "control" means (a) the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or (b) ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+    or
+
+(b) for infringements caused by: (i) Your and any other third party's
+    modifications of Covered Software, or (ii) the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+*                                                                      *
+*  6. Disclaimer of Warranty                                           *
+*  -------------------------                                           *
+*                                                                      *
+*  Covered Software is provided under this License on an "as is"       *
+*  basis, without warranty of any kind, either expressed, implied, or  *
+*  statutory, including, without limitation, warranties that the       *
+*  Covered Software is free of defects, merchantable, fit for a        *
+*  particular purpose or non-infringing. The entire risk as to the     *
+*  quality and performance of the Covered Software is with You.        *
+*  Should any Covered Software prove defective in any respect, You     *
+*  (not any Contributor) assume the cost of any necessary servicing,   *
+*  repair, or correction. This disclaimer of warranty constitutes an   *
+*  essential part of this License. No use of any Covered Software is   *
+*  authorized under this License except under this disclaimer.         *
+*                                                                      *
+************************************************************************
+
+************************************************************************
+*                                                                      *
+*  7. Limitation of Liability                                          *
+*  --------------------------                                          *
+*                                                                      *
+*  Under no circumstances and under no legal theory, whether tort      *
+*  (including negligence), contract, or otherwise, shall any           *
+*  Contributor, or anyone who distributes Covered Software as          *
+*  permitted above, be liable to You for any direct, indirect,         *
+*  special, incidental, or consequential damages of any character      *
+*  including, without limitation, damages for lost profits, loss of    *
+*  goodwill, work stoppage, computer failure or malfunction, or any    *
+*  and all other commercial damages or losses, even if such party      *
+*  shall have been informed of the possibility of such damages. This   *
+*  limitation of liability shall not apply to liability for death or   *
+*  personal injury resulting from such party's negligence to the       *
+*  extent applicable law prohibits such limitation. Some               *
+*  jurisdictions do not allow the exclusion or limitation of           *
+*  incidental or consequential damages, so this exclusion and          *
+*  limitation may not apply to You.                                    *
+*                                                                      *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+  This Source Code Form is "Incompatible With Secondary Licenses", as
+  defined by the Mozilla Public License, v. 2.0.

index.js

@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 const { attachTo } = require("sdk/content/mod");
@@ -60,7 +64,7 @@ let ContainerService = {
     });
 
     // It can happen that this jsm is loaded after the opening a container tab.
-    for (const tab of tabs) {
+    for (let tab of tabs) {
       const userContextId = this._getUserContextIdFromTab(tab);
       if (userContextId) {
         ++this._identitiesState[userContextId].openTabs;
@@ -156,7 +160,7 @@ let ContainerService = {
 
   _getTabList(userContextId) {
     let list = [];
-    for (const tab of tabs) {
+    for (let tab of tabs) {
       if (userContextId === this._getUserContextIdFromTab(tab)) {
         let object = { title: tab.title, url: tab.url, id: tab.id };
         list.push(object);
@@ -175,7 +179,7 @@ let ContainerService = {
         return;
       }
 
-      for (const tab of tabs) {
+      for (let tab of tabs) {
         if (args.userContextId !== this._getUserContextIdFromTab(tab)) {
           continue;
         }
@@ -225,7 +229,7 @@ let ContainerService = {
 
     // Let's collect UCIs/tabs for this window.
     let map = new Map;
-    for (const tab of tabs) {
+    for (let tab of tabs) {
       if (pinnedTabs && !tabsUtils.isPinned(tab)) {
         // We don't have, or we already handled all the pinned tabs.
         break;
@@ -249,7 +253,7 @@ let ContainerService = {
 
     // Let's move tabs.
     sortMap.forEach(tabs => {
-      for (const tab of tabs) {
+      for (let tab of tabs) {
         xulWindow.gBrowser.moveTabTo(tab, pos++);
       }
     });
@@ -286,7 +290,7 @@ let ContainerService = {
         return;
       }
 
-      for (const tab of tabs) {
+      for (let tab of tabs) {
         if (tab.id === args.tabId) {
           tab.window.activate();
           tab.activate();
@@ -320,7 +324,7 @@ let ContainerService = {
           const newBrowserWindow = viewFor(window);
 
           // Let's move the tab to the new window.
-          for (const tab of list) {
+          for (let tab of list) {
             const newTab = newBrowserWindow.gBrowser.addTab("about:blank");
             newBrowserWindow.gBrowser.swapBrowsersAndCloseOther(newTab, tab);
             // swapBrowsersAndCloseOther is an internal method of gBrowser
@@ -333,7 +337,7 @@ let ContainerService = {
           // Let's close all the normal tab in the new window. In theory it
           // should be only the first tab, but maybe there are addons doing
           // crazy stuff.
-          for (const tab of window.tabs) {
+          for (let tab of window.tabs) {
             const userContextId = this._getUserContextIdFromTab(tab);
             if (args.userContextId !== userContextId) {
               newBrowserWindow.gBrowser.removeTab(viewFor(tab));
@@ -391,7 +395,7 @@ let ContainerService = {
   },
 
   createIdentity(args) {
-    for (const arg of [ "name", "color", "icon"]) {
+    for (let arg of [ "name", "color", "icon"]) {
       if (!(arg in args)) {
         Promise.reject("createIdentity must be called with " + arg + " argument.");
         return;
@@ -400,6 +404,12 @@ let ContainerService = {
 
     // FIXME: icon and color conversion based on FF version.
     const identity = ContextualIdentityService.create(args.name, args.icon, args.color);
+
+    this._identitiesState[identity.userContextId] = {
+      hiddenTabUrls: [],
+      openTabs: 0
+    };
+
     return Promise.resolve(this._convert(identity));
   },
 
@@ -410,7 +420,7 @@ let ContainerService = {
     }
 
     let identity = ContextualIdentityService.getIdentityFromId(args.userContextId);
-    for (const arg of [ "name", "color", "icon"]) {
+    for (let arg of [ "name", "color", "icon"]) {
       if ((arg in args)) {
         identity[arg] = args[arg];
       }

webextension/css/popup.css

@@ -79,7 +79,6 @@ table {
 table.unstriped tbody tr {
   border-bottom: 1px solid #f1f1f1;
   background-color: #fefefe;
-  cursor: pointer;
 }
 
 .userContext-icon {

webextension/js/popup.js

@@ -1,109 +1,184 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 /* global browser, window, document, localStorage */
+
 const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
 const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
 
-function showPanel(panelSelector) {
+// Let's set it to false before releasing!!!
+const DEBUG = true;
+
+// List of panels
+const P_ONBOARDING_1     = "onboarding1";
+const P_ONBOARDING_2     = "onboarding2";
+const P_CONTAINERS_LIST  = "containersList";
+const P_CONTAINERS_EDIT  = "containersEdit";
+const P_CONTAINER_INFO   = "containerInfo";
+const P_CONTAINER_EDIT   = "containerEdit";
+const P_CONTAINER_DELETE = "containerDelete";
+
+function log(...args) {
+  if (DEBUG) {
+    console.log.call(console, ...args);
+  }
+}
+
+// This object controls all the panels, identities and many other things.
+let Logic = {
+  _identities: [],
+  _currentIdentity: null,
+  _currentPanel: null,
+  _previousPanel: null,
+  _panels: {},
+
+  init() {
+    // Retrieve the list of identities.
+    this.refreshIdentities()
+
+    // Routing to the correct panel.
+    .then(() => {
+      if (localStorage.getItem("onboarded2")) {
+        this.showPanel(P_CONTAINERS_LIST);
+      } else if (localStorage.getItem("onboarded1")) {
+        this.showPanel(P_ONBOARDING_2);
+      } else {
+        this.showPanel(P_ONBOARDING_1);
+      }
+    });
+  },
+
+  refreshIdentities() {
+    return browser.runtime.sendMessage({
+      method: "queryIdentities"
+    })
+    .then(identities => {
+      this._identities = identities;
+    });
+  },
+
+  showPanel(panel, currentIdentity = null) {
+    // Invalid panel... ?!?
+    if (!(panel in this._panels)) {
+      throw new Error("Something really bad happened. Unknown panel: " + panel);
+    }
+
+    this._previousPanel = this._currentPanel;
+    this._currentPanel = panel;
+
+    this._currentIdentity = currentIdentity;
+
+    // Initialize the panel before showing it.
+    this._panels[panel].prepare().then(() => {
       for (let panelElement of document.querySelectorAll(".panel")) {
         panelElement.classList.add("hide");
       }
-  document.querySelector(panelSelector).classList.remove("hide");
+      document.querySelector(this._panels[panel].panelSelector).classList.remove("hide");
+    });
+  },
+
+  showPreviousPanel() {
+    if (!this._previousPanel) {
+      throw new Error("Current panel not set!");
     }
 
-function showContainerTabsPanel(identity) {
+    this.showPanel(this._previousPanel, this._currentIdentity);
-  // Populating the panel: name and icon
+  },
-  document.getElementById("container-info-name").innerText = identity.name;
 
-  let icon = document.getElementById("container-info-icon");
+  registerPanel(panelName, panelObject) {
-  icon.setAttribute("data-identity-icon", identity.image);
+    this._panels[panelName] = panelObject;
-  icon.setAttribute("data-identity-color", identity.color);
+    panelObject.initialize();
+  },
 
-  // Show or not the has-tabs section.
+  identities() {
-  for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) {
+    return this._identities;
-    trHasTabs.hidden = !identity.hasHiddenTabs && !identity.hasOpenTabs;
+  },
-    trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
+
+  currentIdentity() {
+    if (!this._currentIdentity) {
+      throw new Error("CurrentIdentity must be set before calling Logic.currentIdentity.");
     }
+    return this._currentIdentity;
+  },
+};
 
-  let hideOrShowRow = document.querySelector("#container-info-hideorshow");
+// P_ONBOARDING_1: First page for Onboarding.
-  hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId);
+// ----------------------------------------------------------------------------
 
-  const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
+Logic.registerPanel(P_ONBOARDING_1, {
-  hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
+  panelSelector: ".onboarding-panel-1",
 
-  const hideShowLabel = document.getElementById("container-info-hideorshow-label");
+  // This method is called when the object is registered.
-  hideShowLabel.innerText = identity.hasHiddenTabs ? "Show these container tabs" : "Hide these container tabs";
+  initialize() {
+    // Let's move to the next panel.
+    document.querySelector("#onboarding-next-button").addEventListener("click", () => {
+      localStorage.setItem("onboarded1", true);
+      Logic.showPanel(P_ONBOARDING_2);
+    });
+  },
 
-  // Let"s remove all the previous tabs.
+  // This method is called when the panel is shown.
-  for (const trTab of document.getElementsByClassName("container-info-tab")) {
+  prepare() {
-    trTab.remove();
+    return Promise.resolve(null);
-  }
+  },
+});
 
-  // Let"s retrieve the list of tabs.
+// P_ONBOARDING_2: Second page for Onboarding.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_ONBOARDING_2, {
+  panelSelector: ".onboarding-panel-2",
+
+  // This method is called when the object is registered.
+  initialize() {
+    // Let's move to the containers list panel.
+    document.querySelector("#onboarding-done-button").addEventListener("click", () => {
+      localStorage.setItem("onboarded2", true);
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
+// P_CONTAINERS_LIST: The list of containers. The main page.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINERS_LIST, {
+  panelSelector: "#container-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    document.querySelector("#container-add-link").addEventListener("click", () => {
+      Logic.showPanel(P_CONTAINER_EDIT, {});
+    });
+
+    document.querySelector("#edit-containers-link").addEventListener("click", () => {
+      Logic.showPanel(P_CONTAINERS_EDIT);
+    });
+
+    document.querySelector("#sort-containers-link").addEventListener("click", () => {
       browser.runtime.sendMessage({
-    method: "getTabs",
+        method: "sortTabs"
-    userContextId: identity.userContextId,
-  }).then(tabs => {
-    console.log('browser.runtime.sendMessage getTabs, tabs: ', 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.classList.add("clickable");
-      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();
       });
     });
-    }
+  },
 
-    document.getElementById("container-info-table").appendChild(fragment);
+  // This method is called when the panel is shown.
-  })
+  prepare() {
-
-  // 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");
-  });
-}
-
-if (localStorage.getItem("onboarded2")) {
-  showPanel("#container-panel");
-} else if (localStorage.getItem("onboarded1")) {
-  showPanel(".onboarding-panel-2");
-} else {
-  showPanel(".onboarding-panel-1");
-}
-
-document.querySelector("#onboarding-next-button").addEventListener("click", () => {
-  localStorage.setItem("onboarded1", true);
-  showPanel(".onboarding-panel-2");
-});
-
-document.querySelector("#onboarding-done-button").addEventListener("click", () => {
-  localStorage.setItem("onboarded2", true);
-  showPanel("#container-panel");
-});
-
-browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
-  console.log('queryIdentities');
     let fragment = document.createDocumentFragment();
 
-  identities.forEach(identity => {
+    Logic.identities().forEach(identity => {
-    console.log('identities.forEach');
+      log('identities.forEach');
       let tr = document.createElement("tr");
       fragment.appendChild(tr);
-    tr.classList.add("container-panel-row");
+      tr.classList.add("container-panel-row", "clickable");
-    tr.classList.add("clickable");
-    tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
       tr.innerHTML = `
         <td>
           <div class="userContext-icon open-newtab"
@@ -128,23 +203,133 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
             window.close();
           });
         } else if (e.target.matches(".info")) {
-        showContainerTabsPanel(identity);
+          Logic.showPanel(P_CONTAINER_INFO, identity);
         }
       });
     });
 
-  document.querySelector(".identities-list").appendChild(fragment);
+    let list = document.querySelector(".identities-list");
+
+    list.innerHTML = "";
+    list.appendChild(fragment);
+
+    return Promise.resolve();
+  },
 });
 
-function showEditContainersPanel() {
+// P_CONTAINER_INFO: More info about a container.
-  browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
+// ----------------------------------------------------------------------------
-    let fragment = document.createDocumentFragment();
 
-    identities.forEach(identity => {
+Logic.registerPanel(P_CONTAINER_INFO, {
+  panelSelector: "#container-info-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    document.querySelector("#close-container-info-panel").addEventListener("click", () => {
+      Logic.showPreviousPanel();
+    });
+
+    document.querySelector("#container-info-hideorshow").addEventListener("click", e => {
+      let identity = Logic.currentIdentity();
+      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: Logic.currentIdentity().userContextId,
+      }).then(() => {
+        window.close();
+      });
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    let identity = Logic.currentIdentity();
+
+    // 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;
+    }
+
+    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 (let trTab of document.getElementsByClassName("container-info-tab")) {
+      trTab.remove();
+    }
+
+    // Let's retrieve the list of tabs.
+    return browser.runtime.sendMessage({
+      method: "getTabs",
+      userContextId: identity.userContextId,
+    }).then(tabs => {
+      log('browser.runtime.sendMessage getTabs, tabs: ', tabs);
+      // For each one, let's create a new line.
+      let fragment = document.createDocumentFragment();
+      for (let tab of tabs) {
+        let tr = document.createElement("tr");
+        fragment.appendChild(tr);
+        tr.classList.add("container-info-tab", "clickable");
+        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();
+          });
+        });
+      }
+
+      document.getElementById("container-info-table").appendChild(fragment);
+    });
+  },
+});
+
+// P_CONTAINERS_EDIT: Makes the list editable.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINERS_EDIT, {
+  panelSelector: "#edit-containers-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    document.querySelector("#edit-containers-add-link").addEventListener("click", () => {
+      Logic.showPanel(P_CONTAINER_EDIT, {});
+    });
+
+    document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    let fragment = document.createDocumentFragment();
+    Logic.identities().forEach(identity => {
       let tr = document.createElement("tr");
       fragment.appendChild(tr);
-      tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
-      tr.classList.add("clickable");
       tr.innerHTML = `
         <td>
           <div class="userContext-icon"
@@ -156,42 +341,108 @@ function showEditContainersPanel() {
         <td class="edit-container">
           <img
             title="Edit ${identity.name} container"
-            data-identity-cookie-store-id="${identity.userContextId}"
-            id="edit-${identity.userContextId}-container-icon"
             src="/img/container-edit.svg"
-            class="icon edit-container-icon" />
+            class="icon edit-container-icon clickable" />
         </td>
         <td class="remove-container" >
           <img
             title="Remove ${identity.name} container"
-            data-identity-cookie-store-id="${identity.userContextId}"
+            class="icon delete-container-icon clickable"
-            id="delete-${identity.userContextId}-container-icon"
-            class="icon delete-container-icon"
             src="/img/container-delete.svg"
           />
         </td>`;
 
       tr.addEventListener("click", e => {
         if (e.target.matches(".edit-container-icon")) {
-          showEditContainerPanel(identity);
+          Logic.showPanel(P_CONTAINER_EDIT, identity);
         } else if (e.target.matches(".delete-container-icon")) {
-          showDeleteContainerPanel(identity);
+          Logic.showPanel(P_CONTAINER_DELETE, identity);
         }
       });
     });
 
-    document.querySelector("#edit-identities-list").innerHTML = "";
+    let list = document.querySelector("#edit-identities-list");
-    document.querySelector("#edit-identities-list").appendChild(fragment);
+
+    list.innerHTML = "";
+    list.appendChild(fragment);
+
+    return Promise.resolve(null);
+  },
 });
-  showPanel("#edit-containers-panel");
-}
 
-function showEditContainerPanel(identity) {
+// P_CONTAINER_EDIT: Editor for a container.
-  document.querySelector("#edit-container-panel-name-input").value = identity.name; 
+// ----------------------------------------------------------------------------
-  showPanel("#edit-container-panel");
+
-}
+Logic.registerPanel(P_CONTAINER_EDIT, {
+  panelSelector: "#edit-container-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => {
+      Logic.showPreviousPanel();
+    });
+
+    document.querySelector("#edit-container-cancel-link").addEventListener("click", () => {
+      Logic.showPreviousPanel();
+    });
+
+    document.querySelector("#edit-container-ok-link").addEventListener("click", () => {
+      // FIXME: if the name is empty?
+
+      let identity = Logic.currentIdentity();
+      browser.runtime.sendMessage({
+        method: identity.userContextId ? "updateIdentity" : "createIdentity",
+        userContextId: identity.userContextId || 0,
+        name: document.getElementById("edit-container-panel-name-input").value,
+        icon: identity.image || "fingerprint",
+        color: identity.color || "green",
+      }).then(() => {
+        return Logic.refreshIdentities();
+      }).then(() => {
+        Logic.showPreviousPanel();
+      });
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    let identity = Logic.currentIdentity();
+    document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
+
+    // FIXME: color and icon must be set. But we need the UI first.
+
+    return Promise.resolve(null);
+  },
+});
+
+// P_CONTAINER_DELETE: Delete a container.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINER_DELETE, {
+  panelSelector: "#delete-container-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    document.querySelector("#delete-container-cancel-link").addEventListener("click", () => {
+      Logic.showPreviousPanel();
+    });
+
+    document.querySelector("#delete-container-ok-link").addEventListener("click", () => {
+      browser.runtime.sendMessage({
+        method: "removeIdentity",
+        userContextId: Logic.currentIdentity().userContextId,
+      }).then(() => {
+        return Logic.refreshIdentities();
+      }).then(() => {
+        Logic.showPreviousPanel();
+      });
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    let identity = Logic.currentIdentity();
 
-function showDeleteContainerPanel(identity) {
     // Populating the panel: name and icon
     document.getElementById("delete-container-name").innerText = identity.name;
 
@@ -199,71 +450,8 @@ function showDeleteContainerPanel(identity) {
     icon.setAttribute("data-identity-icon", identity.image);
     icon.setAttribute("data-identity-color", identity.color);
 
-  showPanel("#delete-container-panel");
+    return Promise.resolve(null);
-}
+  },
-
-document.querySelector("#add-container-link").addEventListener("click", () => {
-  showPanel("#edit-container-panel");
 });
 
-document.querySelector("#edit-containers-link").addEventListener("click", () => {
+Logic.init();
-  showEditContainersPanel();
-});
-
-document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
-  showPanel("#container-panel");
-});
-
-document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => {
-  showEditContainersPanel();
-});
-
-document.querySelector("#edit-container-cancel-link").addEventListener("click", () => {
-  showEditContainersPanel();
-});
-
-document.querySelector("#delete-container-panel-back-arrow").addEventListener("click", () => {
-  showEditContainersPanel();
-});
-
-document.querySelector("#delete-container-cancel-link").addEventListener("click", () => {
-  showEditContainersPanel();
-});
-
-document.querySelector("#sort-containers-link").addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    method: "sortTabs"
-  }).then(() => {
-    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();
-  });
-});

webextension/popup.html

@@ -41,7 +41,7 @@
         <a id="edit-containers-link">Edit Containers</a>
       </div>
       <div class="small-2 columns add-container">
-        <a id="add-container-link">
+        <a class="add-container-link" id="container-add-link">
           <img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
         </a>
       </div>
@@ -57,10 +57,10 @@
           <span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span>
           <h3 id="container-info-name" class="panel-header-text"></h3>
         </div>
-        <div class="row container-info-panel-hide clickable" id="container-info-hideorshow" data-user-context-id="">
+        <div class="row container-info-panel-hide container-info-has-tabs clickable" id="container-info-hideorshow" data-user-context-id="">
           <img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
         </div>
-        <div class="row container-info-panel-movetabs clickable" id="container-info-movetabs">
+        <div class="row container-info-panel-movetabs container-info-has-tabs clickable" id="container-info-movetabs">
           Move tabs to a new window
         </div>
         <table class="unstriped" id="container-info-table">
@@ -84,7 +84,7 @@
         <a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
       </div>
       <div class="small-2 columns add-container">
-        <a id="add-container-link">
+        <a class="add-container-link" id="edit-containers-add-link">
           <img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
         </a>
       </div>
@@ -126,7 +126,7 @@
             <a class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
           </div>
           <div class="small-6 columns footer-columns">
-            <a class="button expanded footer-button">OK</a>
+            <a class="button expanded footer-button" id="edit-container-ok-link">OK</a>
           </div>
         </div>
       </div>
@@ -135,8 +135,7 @@
 
   <div class="hide panel delete-container-panel" id="delete-container-panel">
     <div class="row">
-      <div class="small-2 columns panel-back-arrow clickable" id="close-delete-container-panel">&laquo;</div>
+      <div class="small-12 columns">
-      <div class="small-10 columns">
         <div class="row container-info-panel-header">
           <span class="userContext-icon" id="delete-container-icon" data-identity-icon="" data-identity-color=""></span>
           <h3 id="delete-container-name" class="panel-header-text"></h3>
@@ -150,7 +149,7 @@
             <a class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
           </div>
           <div class="small-6 columns footer-columns">
-            <a class="button expanded footer-button">OK</a>
+            <a class="button expanded footer-button" id="delete-container-ok-link">OK</a>
           </div>
         </div>
       </div>