From 150c4a35b11201bafed25cc68dbd0184ea01c9ba Mon Sep 17 00:00:00 2001 From: Kendall Werts Date: Thu, 20 Feb 2020 17:08:59 -0600 Subject: [PATCH] Now can reopen in default container. Added an 'OK' button to new container panel. Fixed some css --- src/css/popup.css | 23 ++-- src/js/background/backgroundLogic.js | 1 + src/js/popup.js | 155 ++++++++++++++++++++------- src/popup.html | 19 ++-- 4 files changed, 144 insertions(+), 54 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index d53943b..1f92bcc 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -91,6 +91,7 @@ table { } .scrollable { + flex: 1; inline-size: 100%; max-block-size: 400px; overflow: auto; @@ -656,6 +657,14 @@ span ~ .panel-header-text { filter: url('/img/filters.svg#fill'); } +.mac-icon { + background-image: url('/img/multiaccountcontainer-16.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 16px 16px; + block-size: 100%; +} + .container-panel-row:hover .clickable .usercontext-icon, .container-panel-row:focus .clickable .usercontext-icon, .container-panel-row .clickable:focus .usercontext-icon { @@ -1116,6 +1125,7 @@ hr { .edit-form { color: #737373; + flex: 1; padding-block-end: 0; padding-block-start: 0; padding-inline-end: 16px; @@ -1148,14 +1158,14 @@ hr { background-color: #fff; border-block-start: solid 1px #e3e3e3; cursor: default; + display: flex; height: 65px; inline-size: 100%; - inset-block-end: 0; + justify-content: space-between; padding-block-end: 27px; padding-block-start: 9px; padding-inline-end: 18px; padding-inline-start: 17px; - position: fixed; } .delete-btn { @@ -1169,10 +1179,6 @@ hr { text-align: center; } -.menu-panel { - justify-content: flex-start; -} - .btn-return.arrow-left { background-color: rgba(255, 255, 255, 1); background-image: url("/img/arrow-icon-left.svg"); @@ -1263,3 +1269,8 @@ tr > td > .trash-button { tr:hover > td > .trash-button { display: block; } + +.new-container-icon { + font-size: 24px; + margin-block-start: -2px; +} diff --git a/src/js/background/backgroundLogic.js b/src/js/background/backgroundLogic.js index 7aba5f6..3d351bd 100644 --- a/src/js/background/backgroundLogic.js +++ b/src/js/background/backgroundLogic.js @@ -329,6 +329,7 @@ const backgroundLogic = { }, cookieStoreId(userContextId) { + if(userContextId === 0) return "firefox-default"; return `firefox-container-${userContextId}`; } }; diff --git a/src/js/popup.js b/src/js/popup.js index 50cb326..67e20fc 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -173,14 +173,16 @@ const Logic = { _disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) { elementToDisable.setAttribute("title", message); + elementToDisable.removeAttribute("tabindex"); elementToDisable.classList.remove("hover-highlight"); elementToDisable.classList.add("disabled-menu-item"); }, - _enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) { - elementToDisable.removeAttribute("title"); - elementToDisable.classList.add("hover-highlight"); - elementToDisable.classList.remove("disabled-menu-item"); + _enableMenuItems(elementToEnable = document.querySelector("#move-to-new-window")) { + elementToEnable.removeAttribute("title"); + elementToEnable.setAttribute("tabindex", "0"); + elementToEnable.classList.add("hover-highlight"); + elementToEnable.classList.remove("disabled-menu-item"); }, async refreshIdentities() { @@ -222,7 +224,6 @@ const Logic = { } if (!backwards || !this._currentPanel) { this._previousPanelPath.push(this._currentPanel); - console.log(this._previousPanelPath); } this._currentPanel = panel; @@ -337,6 +338,16 @@ const Logic = { const panelItem = this._panels[this._currentPanel]; return document.querySelector(this.getPanelSelector(panelItem)); }, + + listenToPickerBackButton() { + const closeContEl = document.querySelector("#close-container-picker-panel"); + if (!this._listenerSet) { + Utils.addEnterHandler(closeContEl, () => { + Logic.showPreviousPanel(); + }); + this._listenerSet = true; + } + } }; // P_ONBOARDING_1: First page for Onboarding. @@ -743,7 +754,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { async initialize() { const closeContEl = document.querySelector("#close-container-info-panel"); Utils.addEnterHandler(closeContEl, () => { - Logic.showPanel(P_CONTAINERS_LIST); + Logic.showPreviousPanel(); }); // Check if the user has incompatible add-ons installed @@ -897,14 +908,11 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, { // This method is called when the object is registered. initialize() { - const closeContEl = document.querySelector("#close-container-picker-panel"); - Utils.addEnterHandler(closeContEl, () => { - Logic.showPanel(P_CONTAINERS_LIST); - }); }, // This method is called when the panel is shown. prepare() { + Logic.listenToPickerBackButton(); document.getElementById("picker-title").textContent = "Open a New Tab in"; const fragment = document.createDocumentFragment(); const pickedFunction = function (identity) { @@ -918,13 +926,16 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, { } }; + document.getElementById("new-container-div").innerHTML = ""; + Logic.identities().forEach(identity => { const tr = document.createElement("tr"); - tr.classList.add("menu-item"); + tr.classList.add("menu-item", "hover-highlight"); + tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); td.innerHTML = Utils.escaped` -
+
@@ -958,23 +969,45 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, { // This method is called when the object is registered. initialize() { - const closeContEl = document.querySelector("#close-container-picker-panel"); - Utils.addEnterHandler(closeContEl, () => { - Logic.showPanel(P_CONTAINERS_LIST); - }); }, // This method is called when the panel is shown. prepare() { + Logic.listenToPickerBackButton(); + const closeContEl = document.querySelector("#close-container-picker-panel"); + if (!this._listenerSet) { + Utils.addEnterHandler(closeContEl, () => { + Logic.showPreviousPanel(); + }); + this._listenerSet = true; + } document.getElementById("picker-title").textContent = "Manage Containers"; const fragment = document.createDocumentFragment(); const pickedFunction = function (identity) { Logic.showPanel(P_CONTAINER_EDIT, identity); }; + document.getElementById("new-container-div").innerHTML = Utils.escaped` + + + + +
+
+ `; + + Utils.addEnterHandler(document.querySelector("#new-container"), () => { + Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() }); + }); + Logic.identities().forEach(identity => { const tr = document.createElement("tr"); - tr.classList.add("menu-item"); + tr.classList.add("menu-item", "hover-highlight"); + tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); td.innerHTML = Utils.escaped` @@ -1012,18 +1045,16 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, { // This method is called when the object is registered. initialize() { - const closeContEl = document.querySelector("#close-container-picker-panel"); - Utils.addEnterHandler(closeContEl, () => { - Logic.showPanel(P_CONTAINERS_LIST); - }); }, // This method is called when the panel is shown. - prepare() { + async prepare() { + Logic.listenToPickerBackButton(); document.getElementById("picker-title").textContent = "Reopen This Site in"; const fragment = document.createDocumentFragment(); - const pickedFunction = async function (identity) { - const currentTab = await Utils.currentTab(); + const currentTab = await Utils.currentTab(); + console.log(currentTab); + const pickedFunction = function (identity) { const newUserContextId = Utils.userContextId(identity.cookieStoreId); Utils.reloadInContainer( currentTab.url, @@ -1035,12 +1066,44 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, { window.close(); }; - Logic.identities().forEach(identity => { + document.getElementById("new-container-div").innerHTML = ""; + + if (currentTab.cookieStoreId !== "firefox-default") { const tr = document.createElement("tr"); - tr.classList.add("menu-item"); + tr.classList.add("menu-item", "hover-highlight"); const td = document.createElement("td"); td.innerHTML = Utils.escaped` +
+
+
+
+ Default Container`; + + fragment.appendChild(tr); + + tr.appendChild(td); + + Utils.addEnterHandler(tr, () => { + Utils.reloadInContainer( + currentTab.url, + false, + 0, + currentTab.index + 1, + currentTab.active + ); + window.close(); + }); + } + + Logic.identities().forEach(identity => { + if (currentTab.cookieStoreId !== identity.cookieStoreId) { + const tr = document.createElement("tr"); + tr.classList.add("menu-item", "hover-highlight"); + tr.setAttribute("tabindex", "0"); + const td = document.createElement("td"); + + td.innerHTML = Utils.escaped`
${identity.name}`; - fragment.appendChild(tr); + fragment.appendChild(tr); - tr.appendChild(td); + tr.appendChild(td); - Utils.addEnterHandler(tr, () => { - pickedFunction(identity); - }); + Utils.addEnterHandler(tr, () => { + pickedFunction(identity); + }); + } }); const list = document.querySelector("#picker-identities-list"); @@ -1075,19 +1139,20 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, { // This method is called when the object is registered. initialize() { - const closeContEl = document.querySelector("#close-container-picker-panel"); - Utils.addEnterHandler(closeContEl, () => { - Logic.showPanel(P_CONTAINERS_LIST); - }); }, // This method is called when the panel is shown. prepare() { + Logic.listenToPickerBackButton(); document.getElementById("picker-title").textContent = "Reopen This Site in"; const fragment = document.createDocumentFragment(); + + document.getElementById("new-container-div").innerHTML = ""; + Logic.identities().forEach(identity => { const tr = document.createElement("tr"); - tr.classList.add("menu-item"); + tr.classList.add("menu-item", "hover-highlight"); + tr.setAttribute("tabindex", "0"); const td = document.createElement("td"); td.innerHTML = Utils.escaped` @@ -1127,8 +1192,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, { // This method is called when the object is registered. initialize() { const closeContEl = document.querySelector("#close-container-assignment-panel"); - closeContEl.setAttribute("tabindex", "0"); - closeContEl.classList.add("firstTabindex"); Utils.addEnterHandler(closeContEl, () => { Logic.showPreviousPanel(); }); @@ -1270,13 +1333,23 @@ Logic.registerPanel(P_CONTAINER_EDIT, { // Populating the panel: name and icon document.getElementById("container-edit-title").textContent = identity.name; + const userContextId = Logic.currentUserContextId(); - // const assignments = await Logic.getAssignmentObjectByContainer(userContextId); - // this.showAssignedContainers(assignments); - // document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId; + document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId; + document.querySelector("#edit-container-panel .delete-container").hidden = !userContextId; + + Utils.addEnterHandler(document.querySelector("#create-container-cancel-link"), () => { + Logic.showPreviousPanel(); + }); + + Utils.addEnterHandler(document.querySelector("#create-container-ok-link"), () => { + this._submitForm(); + }); + Utils.addEnterHandler(document.querySelector("#manage-assigned-sites-list"), () => { Logic.showPanel(P_CONTAINER_ASSIGNMENTS, identity); }); + document.querySelector("#edit-container-panel-name-input").value = identity.name || ""; document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID; const containerName = document.querySelector("#edit-container-panel-name-input"); diff --git a/src/popup.html b/src/popup.html index db573ad..11d7ef4 100644 --- a/src/popup.html +++ b/src/popup.html @@ -251,6 +251,7 @@
+
@@ -292,17 +293,21 @@ Icon -
Options
-
- - -
-
Manage Site List... -
+
Options
+
+ + +
+
Manage Site List... +
+
+ Cancel + OK +