Skip to content

Feature / bug fix: popup: open tab counters, lists, tab moving now work with tabs in non-current tabs #2880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FNCheng137 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feature / bug fix: popup: open tab counters, lists, tab moving now work with tabs in non-current tabs #2880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/css/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,8 @@ body {
[data-theme="dark"] img.clear-storage-icon,
[data-theme="dark"] img.delete-assignment,
[data-theme="dark"] #edit-sites-assigned .menu-icon,
[data-theme="dark"] #container-info-table .menu-icon,
[data-theme="dark"] #container-info-table-curr-windows .menu-icon,
[data-theme="dark"] #container-info-table-other-windows .menu-icon,
[data-theme="dark"] #always-open .menu-icon,
[data-theme="dark"] #always-open-in .menu-icon {
filter: invert(0);
Expand Down Expand Up @@ -2084,7 +2085,8 @@ h3.title {

/* Maintain 1:1 square ratio for favicons of websites added to a specific container */
#edit-sites-assigned .menu-icon,
#container-info-table .menu-icon {
#container-info-table-curr-windows .menu-icon,
#container-info-table-other-windows .menu-icon {
inline-size: 16px;
}
/* stylelint-enable no-descending-specificity */
Expand Down Expand Up @@ -2135,6 +2137,11 @@ hr {
display: block;
}

#container-info-table-other-windows hr {
margin-block: 4px;
margin-inline: 4px;
}

.sub-header-wrapper {
margin-block-start: 12px;
padding-inline: 16px;
Expand Down
8 changes: 6 additions & 2 deletions src/js/background/backgroundLogic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ const backgroundLogic = {
},

async getTabs(options) {
const requiredArguments = ["cookieStoreId", "windowId"];
const requiredArguments = ["cookieStoreId"];
this.checkArgs(requiredArguments, options, "getTabs");
const { cookieStoreId, windowId } = options;

Expand Down Expand Up @@ -299,7 +299,7 @@ const backgroundLogic = {
},

async moveTabsToWindow(options) {
const requiredArguments = ["cookieStoreId", "windowId"];
const requiredArguments = ["cookieStoreId"];
this.checkArgs(requiredArguments, options, "moveTabsToWindow");
const { cookieStoreId, windowId } = options;

Expand Down Expand Up @@ -397,13 +397,17 @@ const backgroundLogic = {
const containerState = await identityState.storageArea.get(cookieStoreId);
const openTabs = await browser.tabs.query({
cookieStoreId,
});
const openTabsCurrWin = await browser.tabs.query({
cookieStoreId,
windowId
});
identitiesOutput[cookieStoreId] = {
hasHiddenTabs: !!containerState.hiddenTabs.length,
hasOpenTabs: !!openTabs.length,
numberOfHiddenTabs: containerState.hiddenTabs.length,
numberOfOpenTabs: openTabs.length,
numberOfOpenTabsCurrWin: openTabsCurrWin.length,
isIsolated: !!containerState.isIsolated
};
return;
Expand Down
66 changes: 48 additions & 18 deletions src/js/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,8 @@ const Logic = {
icon: "default-tab",
color: "default-tab",
numberOfHiddenTabs: 0,
numberOfOpenTabs: 0
numberOfOpenTabs: 0,
numberOfOpenTabsCurrWin: 0
};
// Handle old style rejection with null and also Promise.reject new style
try {
Expand All @@ -215,14 +216,14 @@ const Logic = {
return activeTabs.length;
},

_disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
_disableMenuItem(message, elementToDisable) {
elementToDisable.setAttribute("title", message);
elementToDisable.removeAttribute("tabindex");
elementToDisable.classList.remove("hover-highlight");
elementToDisable.classList.add("disabled-menu-item");
},

_enableMenuItems(elementToEnable = document.querySelector("#move-to-new-window")) {
_enableMenuItems(elementToEnable) {
elementToEnable.removeAttribute("title");
elementToEnable.setAttribute("tabindex", "0");
elementToEnable.classList.add("hover-highlight");
Expand Down Expand Up @@ -264,6 +265,7 @@ const Logic = {
identity.hasHiddenTabs = stateObject.hasHiddenTabs;
identity.numberOfHiddenTabs = stateObject.numberOfHiddenTabs;
identity.numberOfOpenTabs = stateObject.numberOfOpenTabs;
identity.numberOfOpenTabsCurrWin = stateObject.numberOfOpenTabsCurrWin;
identity.isIsolated = stateObject.isIsolated;
}
if (containerOrder) {
Expand Down Expand Up @@ -924,15 +926,20 @@ Logic.registerPanel(P_CONTAINER_INFO, {
}

const moveTabsEl = document.querySelector("#move-to-new-window");
const numTabs = await Logic.numTabs();
const moveAllTabsEl = document.querySelector("#move-all-to-new-window");
if (incompatible) {
Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
return;
} else if (numTabs === 1) {
Logic._disableMenuItem("Cannot move a tab from a single-tab window.");
Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.", moveTabsEl);
Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.", moveAllTabsEl);
return;
}

Utils.addEnterHandler(moveAllTabsEl, async () => {
await browser.runtime.sendMessage({
method: "moveTabsToWindow",
cookieStoreId: Logic.currentIdentity().cookieStoreId,
});
window.close();
});
Utils.addEnterHandler(moveTabsEl, async () => {
await browser.runtime.sendMessage({
method: "moveTabsToWindow",
Expand Down Expand Up @@ -972,20 +979,23 @@ Logic.registerPanel(P_CONTAINER_INFO, {
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
}

const moveTabs = document.querySelector("#move-to-new-window");
const moveTabsAll = document.querySelector("#move-all-to-new-window");
if (identity.numberOfOpenTabsCurrWin === 0) {
Logic._disableMenuItem("No tabs available for this container in this window", moveTabs);
}
if (identity.numberOfOpenTabs === 0) {
Logic._disableMenuItem("No tabs available for this container");
} else {
Logic._enableMenuItems();
Logic._disableMenuItem("No tabs available for this container", moveTabsAll);
}

this.intializeShowHide(identity);

// Let's retrieve the list of tabs.
const tabs = await browser.runtime.sendMessage({
method: "getTabs",
windowId: browser.windows.WINDOW_ID_CURRENT,
cookieStoreId: Logic.currentIdentity().cookieStoreId
});
const currentWindowId = (await browser.windows.getCurrent()).id;
const manageContainer = document.querySelector("#manage-container-link");
Utils.addEnterHandler(manageContainer, async () => {
Logic.showPanel(P_CONTAINER_EDIT, identity);
Expand All @@ -997,7 +1007,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
Logic.showPanel(P_CLEAR_CONTAINER_STORAGE, identity);
}
});
return this.buildOpenTabTable(tabs);
return this.buildOpenTabTable(tabs, currentWindowId);
},

intializeShowHide(identity) {
Expand Down Expand Up @@ -1029,13 +1039,24 @@ Logic.registerPanel(P_CONTAINER_INFO, {
return;
},

buildOpenTabTable(tabs) {
buildOpenTabTable(tabs, currentWindowId) {
// Let's remove all the previous tabs.
const table = document.getElementById("container-info-table");
while (table.firstChild) {
table.firstChild.remove();
const tableCurrWin = document.getElementById("container-info-table-curr-windows");
while (tableCurrWin.firstChild) {
tableCurrWin.firstChild.remove();
}

const tableOtherWin = document.getElementById("container-info-table-other-windows");
while (tableOtherWin.firstChild) {
tableOtherWin.firstChild.remove();
}

// Sort tabs by window id so that we'll be able to display horizontal rules between tabs in different windows below
tabs.sort((a, b) => a.windowId - b.windowId);
// For making horizontal rules between tabs of different windows
let prevWindowId = undefined;
const makeHorizontalRule = () => document.createElement("hr");

// For each one, let's create a new line.
const fragment = document.createDocumentFragment();
for (let tab of tabs) { // eslint-disable-line prefer-const
Expand All @@ -1051,12 +1072,21 @@ Logic.registerPanel(P_CONTAINER_INFO, {
</td>`;
tr.querySelector(".favicon").appendChild(Utils.createFavIconElement(tab.favIconUrl));
tr.setAttribute("tabindex", "0");
table.appendChild(fragment);
if (tab.windowId === currentWindowId) {
tableCurrWin.appendChild(fragment);
} else {
if (prevWindowId !== undefined && tab.windowId !== prevWindowId) {
tableOtherWin.appendChild(makeHorizontalRule());
}
prevWindowId = tab.windowId;
tableOtherWin.appendChild(fragment);
}

// On click, we activate this tab. But only if this tab is active.
if (!tab.hiddenState) {
Utils.addEnterHandler(tr, async () => {
await browser.tabs.update(tab.id, { active: true });
await browser.windows.update(tab.windowId, { focused: true });
window.close();
});

Expand Down
22 changes: 21 additions & 1 deletion src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,14 @@ <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="pers
</span>
</td>
</tr>
<tr class="menu-item hover-highlight keyboard-nav" id="move-all-to-new-window" tabindex="0">
<td>
<img class="menu-icon" alt="" src="/img/movetowindow-16.svg" />
<span class="menu-text" data-i18n-message-id="moveTabsInAllWinsToASingleWindow"></span>
<span class="menu-arrow">
</span>
</td>
</tr>
<tr class="menu-item hover-highlight keyboard-nav" id="always-open" tabindex="0">
<td>
<img class="menu-icon" alt="" src="/img/container-openin-16.svg" />
Expand All @@ -251,7 +259,19 @@ <h3 class="title" id="container-info-title" data-i18n-attribute-message-id="pers
<div class="sub-header" data-i18n-message-id="openTabs"></div>
</div>
<div class="scrollable">
<table class="menu" id="container-info-table">
<table class="menu" id="container-info-table-curr-windows">
<tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
<td>
<div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
<span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
<img class="trash-button" src="/img/close.svg" />
</td>
</tr>
</table>
<div class="sub-header-wrapper">
<div class="sub-header" data-i18n-message-id="openTabsInOtherWindows"></div>
</div>
<table class="menu" id="container-info-table-other-windows">
<tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
<td>
<div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
Expand Down