From bfdbd8199fba99a9b42c03ac6053fd30abec76da Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Tue, 25 Sep 2018 00:21:46 +0530 Subject: [PATCH 01/15] fixes-168, added ability to close a tab individually --- src/css/popup.css | 20 ++++++++++++++++++++ src/img/container-close-tab.svg | 10 ++++++++++ src/js/popup.js | 27 +++++++++++++++++++++++---- 3 files changed, 53 insertions(+), 4 deletions(-) create mode 100644 src/img/container-close-tab.svg diff --git a/src/css/popup.css b/src/css/popup.css index af78306..12b7957 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -670,6 +670,26 @@ span ~ .panel-header-text { opacity: 0.3; } +.container-close-tab { + width:50%; + opacity: 0; +} + +.container-info-tab-row:hover .container-close-tab { + opacity: 0.5; +} +.container-info-tab-row .container-close-tab:hover { + opacity: 1; +} + +.container-info-tab-row:not(.clickable) .container-close-tab{ + opacity: 0; +} + +.container-info-tab-row:not(.clickable):hover .container-close-tab { + opacity: 0.5; +} + .container-info-has-tabs, .container-info-tab-row { align-items: center; diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg new file mode 100644 index 0000000..a89606f --- /dev/null +++ b/src/img/container-close-tab.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/src/js/popup.js b/src/js/popup.js index a9e3d26..1031e5c 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -769,6 +769,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { }, buildInfoTable(tabs) { + const identity = Logic.currentIdentity(); // For each one, let's create a new line. const fragment = document.createDocumentFragment(); for (let tab of tabs) { // eslint-disable-line prefer-const @@ -777,9 +778,29 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.classList.add("container-info-tab-row"); tr.innerHTML = escaped` - ${tab.title}`; + ${tab.title} + `; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); + document.getElementById("container-info-table").appendChild(fragment); + + const closeTab = document.querySelector("#close-tab"); + closeTab.setAttribute("id", tab.id); + + if(identity.hasHiddenTabs) { + closeTab.addEventListener("mouseover",function() { + tr.classList.add("clickable"); + }); + closeTab.addEventListener("mouseout",function() { + tr.classList.remove("clickable"); + }); + } + + Logic.addEnterHandler(closeTab, async function(e) { + await browser.tabs.remove(Number(e.target.id)); + window.close(); + }); + // On click, we activate this tab. But only if this tab is active. if (!tab.hiddenState) { tr.classList.add("clickable"); @@ -788,9 +809,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { window.close(); }); } - } - - document.getElementById("container-info-table").appendChild(fragment); + } }, }); From 1ea04587d9d252d616b8d9e6b66f0454bb4b152f Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Tue, 25 Sep 2018 17:47:17 +0530 Subject: [PATCH 02/15] resolves lint errors --- src/css/popup.css | 4 ++-- src/js/popup.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 12b7957..f3a02a5 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -671,18 +671,18 @@ span ~ .panel-header-text { } .container-close-tab { - width:50%; opacity: 0; } .container-info-tab-row:hover .container-close-tab { opacity: 0.5; } + .container-info-tab-row .container-close-tab:hover { opacity: 1; } -.container-info-tab-row:not(.clickable) .container-close-tab{ +.container-info-tab-row:not(.clickable) .container-close-tab { opacity: 0; } diff --git a/src/js/popup.js b/src/js/popup.js index 1031e5c..d35bf55 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -779,7 +779,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.innerHTML = escaped` ${tab.title} - `; + `; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); document.getElementById("container-info-table").appendChild(fragment); From c15eee22c68cf4ab32c1e82295a8832b5432c2b1 Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Sun, 21 Oct 2018 23:24:18 +0530 Subject: [PATCH 03/15] implemented remove individual tabs just for visible state --- src/css/popup.css | 7 ++----- src/js/popup.js | 12 +----------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index f3a02a5..052b9d4 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -682,12 +682,9 @@ span ~ .panel-header-text { opacity: 1; } -.container-info-tab-row:not(.clickable) .container-close-tab { - opacity: 0; -} - +.container-info-tab-row:not(.clickable) .container-close-tab, .container-info-tab-row:not(.clickable):hover .container-close-tab { - opacity: 0.5; + opacity: 0; } .container-info-has-tabs, diff --git a/src/js/popup.js b/src/js/popup.js index d35bf55..2decbf2 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -769,7 +769,6 @@ Logic.registerPanel(P_CONTAINER_INFO, { }, buildInfoTable(tabs) { - const identity = Logic.currentIdentity(); // For each one, let's create a new line. const fragment = document.createDocumentFragment(); for (let tab of tabs) { // eslint-disable-line prefer-const @@ -779,7 +778,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.innerHTML = escaped` ${tab.title} - `; + `; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); document.getElementById("container-info-table").appendChild(fragment); @@ -787,15 +786,6 @@ Logic.registerPanel(P_CONTAINER_INFO, { const closeTab = document.querySelector("#close-tab"); closeTab.setAttribute("id", tab.id); - if(identity.hasHiddenTabs) { - closeTab.addEventListener("mouseover",function() { - tr.classList.add("clickable"); - }); - closeTab.addEventListener("mouseout",function() { - tr.classList.remove("clickable"); - }); - } - Logic.addEnterHandler(closeTab, async function(e) { await browser.tabs.remove(Number(e.target.id)); window.close(); From 56fc7407da082627aa0b6b94adff9c8407833046 Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Sun, 21 Oct 2018 21:13:57 +0100 Subject: [PATCH 04/15] Add in missing favicon. Fixes #1285 --- src/img/blank-favicon.svg | 8 ++++++++ src/js/utils.js | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/img/blank-favicon.svg diff --git a/src/img/blank-favicon.svg b/src/img/blank-favicon.svg new file mode 100644 index 0000000..c2393b6 --- /dev/null +++ b/src/img/blank-favicon.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/js/utils.js b/src/js/utils.js index 5d5046b..804e9d9 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -1,4 +1,4 @@ -const DEFAULT_FAVICON = "moz-icon://goat?size=16"; +const DEFAULT_FAVICON = "/img/blank-favicon.svg"; // TODO use export here instead of globals window.Utils = { From 5813621fb955860a02c435e2aeaee6d59c463060 Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Sun, 21 Oct 2018 21:25:55 +0100 Subject: [PATCH 05/15] Remove badge background error. Fixes #1293 --- src/js/popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/popup.js b/src/js/popup.js index 870b9a4..18eec68 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -162,7 +162,7 @@ const Logic = { async clearBrowserActionBadge() { const extensionInfo = await getExtensionInfo(); const storage = await browser.storage.local.get({browserActionBadgesClicked: []}); - browser.browserAction.setBadgeBackgroundColor({color: ""}); + browser.browserAction.setBadgeBackgroundColor({color: null}); browser.browserAction.setBadgeText({text: ""}); storage.browserActionBadgesClicked.push(extensionInfo.version); // use set and spread to create a unique array From f7f4c320a6f4868eb123414644ebacf86f69488c Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Sun, 21 Oct 2018 22:22:48 +0100 Subject: [PATCH 06/15] Fix missing assignment check mark. Fixes #1271 --- src/css/popup.css | 2 +- src/img/check.svg | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/img/check.svg diff --git a/src/css/popup.css b/src/css/popup.css index 6eb6496..6f9e64a 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -538,7 +538,7 @@ span ~ .panel-header-text { } #current-tab > label > input:checked { - background-image: url("chrome://global/skin/in-content/check.svg#check-native"); + background-image: url("/img/check.svg"); background-position: -1px -1px; background-size: var(--icon-size); } diff --git a/src/img/check.svg b/src/img/check.svg new file mode 100644 index 0000000..bcbcfc0 --- /dev/null +++ b/src/img/check.svg @@ -0,0 +1,6 @@ + + + + From 0a437ff303fe50caeb6c97267333674cdbb434d5 Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Sun, 21 Oct 2018 22:32:21 +0100 Subject: [PATCH 07/15] Bump release to 6.0.1. Fixes #1296 --- package.json | 2 +- src/manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7b52d8b..8c2d546 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "testpilot-containers", "title": "Multi-Account Containers", "description": "Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.", - "version": "6.0.0", + "version": "6.0.1", "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston", "bugs": { "url": "https://github.com/mozilla/multi-account-containers/issues" diff --git a/src/manifest.json b/src/manifest.json index f3fa049..d624d32 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Firefox Multi-Account Containers", - "version": "6.0.0", + "version": "6.0.1", "description": "Multi-Account Containers helps you keep all the parts of your online life contained in different tabs. Custom labels and color-coded tabs help keep different activities — like online shopping, travel planning, or checking work email — separate.", "icons": { From b6dd32f6836b5d0b61cc9286c7f4dc329f2f04e0 Mon Sep 17 00:00:00 2001 From: aabbi Date: Mon, 22 Oct 2018 20:05:03 -0400 Subject: [PATCH 08/15] moved unhiding container to background logic --- src/js/background/backgroundLogic.js | 33 +++++++++++++++++++++------- src/js/background/messageHandler.js | 16 ++------------ 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/js/background/backgroundLogic.js b/src/js/background/backgroundLogic.js index 04906d8..124631d 100644 --- a/src/js/background/backgroundLogic.js +++ b/src/js/background/backgroundLogic.js @@ -6,6 +6,7 @@ const backgroundLogic = { "about:home", "about:blank" ]), + unhideQueue: [], async getExtensionInfo() { const manifestPath = browser.extension.getURL("manifest.json"); @@ -112,6 +113,17 @@ const backgroundLogic = { return list.concat(containerState.hiddenTabs); }, + async unhideContainer(cookieStoreId) { + if (!this.unhideQueue.includes(cookieStoreId)) { + this.unhideQueue.push(cookieStoreId); + await this.showTabs({ + cookieStoreId + }); + this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1); + } + }, + + async moveTabsToWindow(options) { const requiredArguments = ["cookieStoreId", "windowId"]; this.checkArgs(requiredArguments, options, "moveTabsToWindow"); @@ -123,6 +135,7 @@ const backgroundLogic = { }); const containerState = await identityState.storageArea.get(cookieStoreId); + // Nothing to do if (list.length === 0 && containerState.hiddenTabs.length === 0) { @@ -152,12 +165,15 @@ const backgroundLogic = { const showHiddenPromises = []; // Let's show the hidden tabs. - for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const - showHiddenPromises.push(browser.tabs.create({ - url: object.url || DEFAULT_TAB, - windowId: newWindowObj.id, - cookieStoreId - })); + if (!this.unhideQueue.includes(cookieStoreId)) { + this.unhideQueue.push(cookieStoreId); + for (let object of containerState.hiddenTabs) { // eslint-disable-line prefer-const + showHiddenPromises.push(browser.tabs.create({ + url: object.url || DEFAULT_TAB, + windowId: newWindowObj.id, + cookieStoreId + })); + } } if (hiddenDefaultTabToClose) { @@ -176,7 +192,9 @@ const backgroundLogic = { browser.tabs.remove(tab.id); } } - return await identityState.storageArea.set(cookieStoreId, containerState); + const rv = await identityState.storageArea.set(cookieStoreId, containerState); + this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1); + return rv; }, async _closeTabs(userContextId, windowId = false) { @@ -307,4 +325,3 @@ const backgroundLogic = { return `firefox-container-${userContextId}`; } }; - diff --git a/src/js/background/messageHandler.js b/src/js/background/messageHandler.js index 6e5fced..9fbe88e 100644 --- a/src/js/background/messageHandler.js +++ b/src/js/background/messageHandler.js @@ -3,7 +3,6 @@ const messageHandler = { // We use this to catch redirected tabs that have just opened // If this were in platform we would change how the tab opens based on "new tab" link navigations such as ctrl+click LAST_CREATED_TAB_TIMER: 2000, - unhideQueue: [], init() { // Handles messages from webextension code @@ -39,7 +38,7 @@ const messageHandler = { backgroundLogic.sortTabs(); break; case "showTabs": - this.unhideContainer(m.cookieStoreId); + backgroundLogic.unhideContainer(m.cookieStoreId); break; case "hideTabs": backgroundLogic.hideTabs({ @@ -156,7 +155,7 @@ const messageHandler = { this.incrementCountOfContainerTabsOpened(); } - this.unhideContainer(tab.cookieStoreId); + backgroundLogic.unhideContainer(tab.cookieStoreId); } setTimeout(() => { this.lastCreatedTab = null; @@ -182,17 +181,6 @@ const messageHandler = { } }, - async unhideContainer(cookieStoreId) { - if (!this.unhideQueue.includes(cookieStoreId)) { - this.unhideQueue.push(cookieStoreId); - // Unhide all hidden tabs - await backgroundLogic.showTabs({ - cookieStoreId - }); - this.unhideQueue.splice(this.unhideQueue.indexOf(cookieStoreId), 1); - } - }, - async onFocusChangedCallback(windowId) { assignManager.removeContextMenu(); // browserAction loses background color in new windows ... From abc4e0cdcf8cf70a8799a24c737d11d9467330ee Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Tue, 23 Oct 2018 15:13:41 +0530 Subject: [PATCH 09/15] review changes --- src/css/popup.css | 5 ----- src/img/container-close-tab.svg | 13 +++---------- src/js/popup.js | 17 +++++++++-------- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 052b9d4..8c15192 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -682,11 +682,6 @@ span ~ .panel-header-text { opacity: 1; } -.container-info-tab-row:not(.clickable) .container-close-tab, -.container-info-tab-row:not(.clickable):hover .container-close-tab { - opacity: 0; -} - .container-info-has-tabs, .container-info-tab-row { align-items: center; diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg index a89606f..ad72e2a 100644 --- a/src/img/container-close-tab.svg +++ b/src/img/container-close-tab.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + + \ No newline at end of file diff --git a/src/js/popup.js b/src/js/popup.js index 2decbf2..9ea0565 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -778,18 +778,15 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.innerHTML = escaped` ${tab.title} - `; + `; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); document.getElementById("container-info-table").appendChild(fragment); - const closeTab = document.querySelector("#close-tab"); - closeTab.setAttribute("id", tab.id); - - Logic.addEnterHandler(closeTab, async function(e) { - await browser.tabs.remove(Number(e.target.id)); - window.close(); - }); + const closeTab = document.getElementById(tab.id); + if(tab.hiddenState) { + closeTab.remove(); + } // On click, we activate this tab. But only if this tab is active. if (!tab.hiddenState) { @@ -798,6 +795,10 @@ Logic.registerPanel(P_CONTAINER_INFO, { await browser.tabs.update(tab.id, {active: true}); window.close(); }); + Logic.addEnterHandler(closeTab, async function(e) { + await browser.tabs.remove(Number(e.target.id)); + window.close(); + }); } } }, From 8af4c36fd014d2a5612e13ada0339d6f903ea442 Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Mon, 29 Oct 2018 16:32:10 +0530 Subject: [PATCH 10/15] removing inline css --- src/css/popup.css | 1 + src/js/popup.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/css/popup.css b/src/css/popup.css index 8c15192..1542bce 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -671,6 +671,7 @@ span ~ .panel-header-text { } .container-close-tab { + inline-size: 50%; opacity: 0; } diff --git a/src/js/popup.js b/src/js/popup.js index 9ea0565..ec3ffd0 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -778,7 +778,7 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.innerHTML = escaped` ${tab.title} - `; + `; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); document.getElementById("container-info-table").appendChild(fragment); From 66a9116524620e97d0879fafe8c78b8f0807738a Mon Sep 17 00:00:00 2001 From: mingchia-andy-liu Date: Sun, 29 Apr 2018 14:40:42 +0800 Subject: [PATCH 11/15] Fix delete warning message #1051 - Include the number of tabs that will be closed when container is deleted - Insert the warning message to the `span` tag that was originally there --- src/js/background/backgroundLogic.js | 4 +++- src/js/popup.js | 19 +++++++++++++++++-- src/popup.html | 2 +- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/js/background/backgroundLogic.js b/src/js/background/backgroundLogic.js index 124631d..89f9159 100644 --- a/src/js/background/backgroundLogic.js +++ b/src/js/background/backgroundLogic.js @@ -227,7 +227,9 @@ const backgroundLogic = { }); identitiesOutput[cookieStoreId] = { hasHiddenTabs: !!containerState.hiddenTabs.length, - hasOpenTabs: !!openTabs.length + hasOpenTabs: !!openTabs.length, + numberOfHiddenTabs: containerState.hiddenTabs.length, + numberOfOpenTabs: openTabs.length }; return; }); diff --git a/src/js/popup.js b/src/js/popup.js index 18eec68..e0db6fe 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -177,7 +177,9 @@ const Logic = { name: "Default", cookieStoreId, icon: "default-tab", - color: "default-tab" + color: "default-tab", + numberOfHiddenTabs: 0, + numberOfOpenTabs: 0 }; // Handle old style rejection with null and also Promise.reject new style try { @@ -248,6 +250,8 @@ const Logic = { if (stateObject) { identity.hasOpenTabs = stateObject.hasOpenTabs; identity.hasHiddenTabs = stateObject.hasHiddenTabs; + identity.numberOfHiddenTabs = stateObject.numberOfHiddenTabs; + identity.numberOfOpenTabs = stateObject.numberOfOpenTabs; } return identity; }); @@ -1074,9 +1078,20 @@ Logic.registerPanel(P_CONTAINER_DELETE, { prepare() { const identity = Logic.currentIdentity(); - // Populating the panel: name and icon + // Populating the panel: name, icon, and warning message document.getElementById("delete-container-name").textContent = identity.name; + const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs; + if (totalNumberOfTabs > 0) { + let warningMessage = `If you remove this container now, ${totalNumberOfTabs} `; + warningMessage += totalNumberOfTabs > 1 + ? "container tabs will be closed." + : "container tab will be closed."; + document.getElementById("delete-container-tab-warning").textContent = warningMessage; + } else { + document.getElementById("delete-container-tab-warning").textContent = ""; + } + const icon = document.getElementById("delete-container-icon"); icon.setAttribute("data-identity-icon", identity.icon); icon.setAttribute("data-identity-color", identity.color); diff --git a/src/popup.html b/src/popup.html index a28dd32..4cd8219 100644 --- a/src/popup.html +++ b/src/popup.html @@ -204,7 +204,7 @@

Remove This Container

-

If you remove this container now, container tabs will be closed. Are you sure you want to remove this Container?

+

Are you sure you want to remove this Container?

Cancel From 4ed453d58e729db1fd9b749e8d892a6ed7ccdd3f Mon Sep 17 00:00:00 2001 From: groovecoder Date: Fri, 28 Dec 2018 14:29:09 -0600 Subject: [PATCH 12/15] save ajv at 6.6.2 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 8c2d546..b57cc35 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": {}, "devDependencies": { + "ajv": "^6.6.2", "addons-linter": "^1.3.2", "chai": "^4.1.2", "eslint": "^3.17.1", From 5b58168999af68871ad267827a5e3fef7f1e7997 Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Tue, 1 Jan 2019 03:12:10 +0900 Subject: [PATCH 13/15] Refactored the logic to form warning message --- src/js/popup.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/js/popup.js b/src/js/popup.js index e0db6fe..9005ff3 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -1082,15 +1082,12 @@ Logic.registerPanel(P_CONTAINER_DELETE, { document.getElementById("delete-container-name").textContent = identity.name; const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs; + let warningMessage = ""; if (totalNumberOfTabs > 0) { - let warningMessage = `If you remove this container now, ${totalNumberOfTabs} `; - warningMessage += totalNumberOfTabs > 1 - ? "container tabs will be closed." - : "container tab will be closed."; - document.getElementById("delete-container-tab-warning").textContent = warningMessage; - } else { - document.getElementById("delete-container-tab-warning").textContent = ""; + const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab"; + warningMessage = `If you remove this container now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`; } + document.getElementById("delete-container-tab-warning").textContent = warningMessage; const icon = document.getElementById("delete-container-icon"); icon.setAttribute("data-identity-icon", identity.icon); From db0dba66b2ba974af2ee14a673ba423161bb1f1f Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Fri, 11 Jan 2019 04:06:08 +0900 Subject: [PATCH 14/15] dynamically added close image icon in the title column --- src/css/popup.css | 12 +++++++--- src/img/container-close-tab.svg | 2 +- src/js/popup.js | 40 ++++++++++++++++++++++----------- 3 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 1542bce..485e2a6 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -653,7 +653,11 @@ span ~ .panel-header-text { /* Container info list */ .container-info-tab-title { - flex: 1; + display: flex; +} + +.container-info-tab-row:hover .container-info-tab-title .truncate-text { + inline-size: 184px; } #container-info-hideorshow { @@ -671,16 +675,18 @@ span ~ .panel-header-text { } .container-close-tab { - inline-size: 50%; - opacity: 0; + transform: scale(0.7); + visibility: collapse; } .container-info-tab-row:hover .container-close-tab { opacity: 0.5; + visibility: visible; } .container-info-tab-row .container-close-tab:hover { opacity: 1; + visibility: visible; } .container-info-has-tabs, diff --git a/src/img/container-close-tab.svg b/src/img/container-close-tab.svg index ad72e2a..a36fa01 100644 --- a/src/img/container-close-tab.svg +++ b/src/img/container-close-tab.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/js/popup.js b/src/js/popup.js index ec3ffd0..1604407 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -777,28 +777,42 @@ Logic.registerPanel(P_CONTAINER_INFO, { tr.classList.add("container-info-tab-row"); tr.innerHTML = escaped` - ${tab.title} - `; +
${tab.title}
`; tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl)); - document.getElementById("container-info-table").appendChild(fragment); - - const closeTab = document.getElementById(tab.id); - if(tab.hiddenState) { - closeTab.remove(); - } - + // On click, we activate this tab. But only if this tab is active. if (!tab.hiddenState) { + const closeImage = document.createElement("img"); + closeImage.src="/img/container-close-tab.svg"; + closeImage.className = "container-close-tab"; + closeImage.title="Close tab"; + closeImage.id = tab.id; + tr.querySelector(".container-info-tab-title").appendChild(closeImage); + + // On hover, we add truncate-text class to add close-tab-image after tab title truncates + tr.addEventListener("mouseover", () => { + tr.querySelector(".container-info-tab-title").classList.remove("truncate-text"); + tr.querySelector(".container-tab-title").classList.add("truncate-text"); + }); + tr.addEventListener("mouseout", () => { + tr.querySelector(".container-info-tab-title").classList.add("truncate-text"); + tr.querySelector(".container-tab-title").classList.remove("truncate-text"); + }); + tr.classList.add("clickable"); Logic.addEnterHandler(tr, async function () { await browser.tabs.update(tab.id, {active: true}); window.close(); }); - Logic.addEnterHandler(closeTab, async function(e) { - await browser.tabs.remove(Number(e.target.id)); - window.close(); - }); + + const closeTab = document.getElementById(tab.id); + if (closeTab) { + Logic.addEnterHandler(closeTab, async function(e) { + await browser.tabs.remove(Number(e.target.id)); + window.close(); + }); + } } } }, From 6d7086d541500894876362b2deae0d59f49b3b7b Mon Sep 17 00:00:00 2001 From: shivangikakkar Date: Fri, 11 Jan 2019 09:25:00 +0900 Subject: [PATCH 15/15] added functions and cosmetic changes --- src/css/popup.css | 9 +++------ src/js/popup.js | 22 +++++++++++----------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 485e2a6..beede2c 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -45,6 +45,7 @@ body { --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ + --column-panel-inline-size: 268px; } @media (min-resolution: 1dppx) { @@ -266,7 +267,7 @@ table { .column-panel-content { display: flex; flex-direction: column; - inline-size: 268px; + inline-size: var(--column-panel-inline-size); } .column-panel-content .panel-footer { @@ -657,7 +658,7 @@ span ~ .panel-header-text { } .container-info-tab-row:hover .container-info-tab-title .truncate-text { - inline-size: 184px; + inline-size: calc(var(--column-panel-inline-size) - 58px); } #container-info-hideorshow { @@ -715,10 +716,6 @@ span ~ .panel-header-text { margin-inline-end: 0; } -.container-info-tab-row td { - max-inline-size: 200px; -} - .container-info-list { display: flex; flex-direction: column; diff --git a/src/js/popup.js b/src/js/popup.js index 1604407..f9690de 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -784,21 +784,21 @@ Logic.registerPanel(P_CONTAINER_INFO, { // On click, we activate this tab. But only if this tab is active. if (!tab.hiddenState) { const closeImage = document.createElement("img"); - closeImage.src="/img/container-close-tab.svg"; + closeImage.src = "/img/container-close-tab.svg"; closeImage.className = "container-close-tab"; - closeImage.title="Close tab"; + closeImage.title = "Close tab"; closeImage.id = tab.id; - tr.querySelector(".container-info-tab-title").appendChild(closeImage); + const tabTitle = tr.querySelector(".container-info-tab-title"); + tabTitle.appendChild(closeImage); // On hover, we add truncate-text class to add close-tab-image after tab title truncates - tr.addEventListener("mouseover", () => { - tr.querySelector(".container-info-tab-title").classList.remove("truncate-text"); - tr.querySelector(".container-tab-title").classList.add("truncate-text"); - }); - tr.addEventListener("mouseout", () => { - tr.querySelector(".container-info-tab-title").classList.add("truncate-text"); - tr.querySelector(".container-tab-title").classList.remove("truncate-text"); - }); + const tabTitleHoverEvent = () => { + tabTitle.classList.toggle("truncate-text"); + tr.querySelector(".container-tab-title").classList.toggle("truncate-text"); + }; + + tr.addEventListener("mouseover", tabTitleHoverEvent); + tr.addEventListener("mouseout", tabTitleHoverEvent); tr.classList.add("clickable"); Logic.addEnterHandler(tr, async function () {