cherry picked
This commit is contained in:
Kendall Werts
parent
081d8a506a
commit
e269deb427
3 changed files with 105 additions and 66 deletions
|
|
@ -1047,13 +1047,15 @@ h3.title {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #1296F8;
|
||||
color: #FFFFFF;
|
||||
.disabled-menu-item {
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.hover-highlight {
|
||||
|
||||
.hover-highlight:hover {
|
||||
background: #1296F8;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
* 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 CONTAINER_HIDE_SRC = "/img/container-hide.svg";
|
||||
const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
|
||||
const CONTAINER_HIDE_SRC = "/img/password-hide.svg";
|
||||
const CONTAINER_UNHIDE_SRC = "/img/password-hide.svg";
|
||||
|
||||
const DEFAULT_COLOR = "blue";
|
||||
const DEFAULT_ICON = "circle";
|
||||
|
|
@ -168,20 +168,16 @@ const Logic = {
|
|||
return activeTabs.length;
|
||||
},
|
||||
|
||||
_disableMoveTabs(message) {
|
||||
// const moveTabsEl = document.querySelector("#container-info-movetabs");
|
||||
const fragment = document.createDocumentFragment();
|
||||
const incompatEl = document.createElement("div");
|
||||
_disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
|
||||
elementToDisable.setAttribute("title", message);
|
||||
elementToDisable.classList.remove("hover-highlight");
|
||||
elementToDisable.classList.add("disabled-menu-item");
|
||||
},
|
||||
|
||||
// moveTabsEl.classList.remove("clickable");
|
||||
// moveTabsEl.setAttribute("title", message);
|
||||
|
||||
fragment.appendChild(incompatEl);
|
||||
incompatEl.setAttribute("id", "container-info-movetabs-incompat");
|
||||
incompatEl.textContent = message;
|
||||
incompatEl.classList.add("container-info-tab-row");
|
||||
|
||||
// moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
|
||||
_enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) {
|
||||
elementToDisable.removeAttribute("title");
|
||||
elementToDisable.classList.add("hover-highlight");
|
||||
elementToDisable.classList.remove("disabled-menu-item");
|
||||
},
|
||||
|
||||
async refreshIdentities() {
|
||||
|
|
@ -676,6 +672,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
|||
const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
|
||||
const tr = document.createElement("tr");
|
||||
tr.classList.add("menu-item");
|
||||
tr.setAttribute("tabindex", "0");
|
||||
const td = document.createElement("td");
|
||||
const openTabs = identity.numberOfOpenTabs || "" ;
|
||||
|
||||
|
|
@ -741,10 +738,11 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
async initialize() {
|
||||
const closeContEl = document.querySelector("#close-container-info-panel");
|
||||
Utils.addEnterHandler(closeContEl, () => {
|
||||
Logic.showPreviousPanel();
|
||||
Logic.showPanel(P_CONTAINERS_LIST);
|
||||
});
|
||||
|
||||
// Check if the user has incompatible add-ons installed
|
||||
// Note: this is not implemented in messageHandler.js
|
||||
let incompatible = false;
|
||||
try {
|
||||
incompatible = await browser.runtime.sendMessage({
|
||||
|
|
@ -754,15 +752,25 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
throw new Error("Could not check for incompatible add-ons.");
|
||||
}
|
||||
|
||||
const moveTabsEl = document.querySelector("#move-to-new-window");
|
||||
const numTabs = await Logic.numTabs();
|
||||
if (incompatible) {
|
||||
Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
|
||||
Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
|
||||
return;
|
||||
} else if (numTabs === 1) {
|
||||
Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
|
||||
Logic._disableMenuItem("Cannot move a tab from a single-tab window.");
|
||||
return;
|
||||
}
|
||||
|
||||
Utils.addEnterHandler(moveTabsEl, async () => {
|
||||
await browser.runtime.sendMessage({
|
||||
method: "moveTabsToWindow",
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
cookieStoreId: Logic.currentIdentity().cookieStoreId,
|
||||
});
|
||||
window.close();
|
||||
});
|
||||
|
||||
const manageContainer = document.querySelector("#manage-container-link");
|
||||
Utils.addEnterHandler(manageContainer, async () => {
|
||||
Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
|
||||
|
|
@ -786,6 +794,14 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
|
||||
}
|
||||
|
||||
if (identity.numberOfOpenTabs === 0) {
|
||||
Logic._disableMenuItem("No tabs available for this container");
|
||||
} else {
|
||||
Logic._enableMenuItems();
|
||||
}
|
||||
|
||||
this.intializeShowHide(identity);
|
||||
|
||||
// Let's remove all the previous tabs.
|
||||
const table = document.getElementById("container-info-table");
|
||||
while (table.firstChild) {
|
||||
|
|
@ -801,6 +817,35 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
return this.buildInfoTable(tabs);
|
||||
},
|
||||
|
||||
intializeShowHide(identity) {
|
||||
const hideContEl = document.querySelector("#hideorshow-container");
|
||||
if (identity.numberOfOpenTabs === 0 && !identity.hasHiddenTabs) {
|
||||
return Logic._disableMenuItem("No tabs available for this container", hideContEl);
|
||||
} else {
|
||||
Logic._enableMenuItems(hideContEl);
|
||||
}
|
||||
|
||||
Utils.addEnterHandler(hideContEl, async () => {
|
||||
try {
|
||||
browser.runtime.sendMessage({
|
||||
method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
cookieStoreId: Logic.currentCookieStoreId()
|
||||
});
|
||||
window.close();
|
||||
} catch (e) {
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
|
||||
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.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
|
||||
return;
|
||||
},
|
||||
|
||||
buildInfoTable(tabs) {
|
||||
// For each one, let's create a new line.
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
|
@ -861,10 +906,8 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
|
|||
// This method is called when the object is registered.
|
||||
initialize() {
|
||||
const closeContEl = document.querySelector("#close-container-picker-panel");
|
||||
closeContEl.setAttribute("tabindex", "0");
|
||||
closeContEl.classList.add("firstTabindex");
|
||||
Utils.addEnterHandler(closeContEl, () => {
|
||||
Logic.showPreviousPanel();
|
||||
Logic.showPanel(P_CONTAINERS_LIST);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -115,27 +115,14 @@
|
|||
<a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<div class="panel container-panel hide" id="container-panel">
|
||||
<div id="current-tab">
|
||||
<h3>Current Tab</h3>
|
||||
<div id="current-page"></div>
|
||||
<label for="container-page-assigned">
|
||||
<input type="checkbox" id="container-page-assigned" />
|
||||
<span class="truncate-text">
|
||||
Always open in
|
||||
<span id="current-container"></span>
|
||||
</span>
|
||||
</label>
|
||||
=======
|
||||
<div class="panel menu-panel container-panel hide" id="container-panel">
|
||||
<h3 class="title">
|
||||
Multi-Account Containers
|
||||
</h3>
|
||||
<a href="#" id="info-icon">i</a>
|
||||
<a href="#" id="info-icon" tabindex="10">i</a>
|
||||
<hr>
|
||||
<table class="menu">
|
||||
<tr class="menu-item" id="open-new-tab-in">
|
||||
<tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
|
||||
<span class="menu-text">Open New Tab in...</span>
|
||||
|
|
@ -144,7 +131,7 @@
|
|||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item" id="reopen-site-in">
|
||||
<tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
|
||||
<span class="menu-text">Reopen This Site in...</span>
|
||||
|
|
@ -156,7 +143,7 @@
|
|||
</table>
|
||||
<hr>
|
||||
<table class="menu">
|
||||
<tr class="menu-item" id="sort-containers-link">
|
||||
<tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
|
||||
<span class="menu-text">Sort Tabs by Container</span>
|
||||
|
|
@ -164,7 +151,7 @@
|
|||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item" id="always-open-in">
|
||||
<tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Open in New Tab" src="/img/open-in-new-16.svg" />
|
||||
<span class="menu-text">Always Open This Site in...</span>
|
||||
|
|
@ -177,23 +164,30 @@
|
|||
<hr>
|
||||
<div class="sub-header">
|
||||
Containers
|
||||
>>>>>>> 30e5895... added info icon as ling to options page
|
||||
</div>
|
||||
<div class="container-panel-controls">
|
||||
<a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
|
||||
</div>
|
||||
<div class="scrollable panel-content" tabindex="-1">
|
||||
<table class="identities-list">
|
||||
<tbody></tbody>
|
||||
<div class="scrollable identities-list">
|
||||
<table class="menu" id="identities-list">
|
||||
<tr class="menu-item hover-highlight">
|
||||
<td>
|
||||
<div class="menu-icon">
|
||||
<div class="usercontext-icon"
|
||||
data-identity-icon="pet"
|
||||
data-identity-color="blue">
|
||||
</div>
|
||||
</div>
|
||||
<span class="menu-text">Default</span>
|
||||
<span class="menu-right-float">
|
||||
<span class="container-count">22</span>
|
||||
<span class="menu-arrow">
|
||||
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="panel-footer edit-identities">
|
||||
<div class="edit-containers-text panel-footer-secondary">
|
||||
<a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
|
||||
</div>
|
||||
<a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">
|
||||
<img class="pop-button-image-small icon" alt="Create new container icon" src="/img/container-add.svg" />
|
||||
</a>
|
||||
<div class="bottom-btn" id="manage-containers-link" tabindex="0">
|
||||
Manage Containers
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -205,15 +199,15 @@
|
|||
<button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
|
||||
<hr>
|
||||
<table class="menu">
|
||||
<tr class="menu-item" id="hide-container">
|
||||
<tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Hide This Container" src="/img/tab-new-16.svg" />
|
||||
<span class="menu-text">Hide This Container</span>
|
||||
<img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
|
||||
<span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
|
||||
<span class="menu-arrow">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item" id="move-to-new-window">
|
||||
<tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
|
||||
<span class="menu-text">Move Tabs to a New Window</span>
|
||||
|
|
@ -221,7 +215,7 @@
|
|||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item" id="always-open">
|
||||
<tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
|
||||
<span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
|
||||
|
|
@ -248,11 +242,11 @@
|
|||
<h3 class="title" id="picker-title">
|
||||
Multi-Account Containers
|
||||
</h3>
|
||||
<button class="btn-return arrow-left" id="close-container-picker-panel"></button>
|
||||
<button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
|
||||
<hr>
|
||||
<div class="scrollable identities-list">
|
||||
<table class="menu" id="picker-identities-list">
|
||||
<tr class="menu-item">
|
||||
<tr class="menu-item hover-highlight">
|
||||
<td>
|
||||
<div class="menu-icon">
|
||||
<div class="usercontext-icon"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue