cherry picked
This commit is contained in:
Kendall Werts
parent
82a6843f5c
commit
abc491cb60
3 changed files with 208 additions and 52 deletions
|
|
@ -1007,3 +1007,133 @@ span ~ .panel-header-text {
|
||||||
.amo-rate-cta {
|
.amo-rate-cta {
|
||||||
background: #0f1126;
|
background: #0f1126;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: -0.1px;
|
||||||
|
width: 320px;
|
||||||
|
/* remove in prodcution*/
|
||||||
|
}
|
||||||
|
|
||||||
|
h3.title {
|
||||||
|
width: 100%;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: -0.1px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
width: 100%;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover {
|
||||||
|
background: #1296F8;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-highlight {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-text {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
width: 40px;
|
||||||
|
display: block;
|
||||||
|
height: 24px;
|
||||||
|
padding: 0 8px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-right-float {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
width: 60px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-count {
|
||||||
|
opacity: 0.6;
|
||||||
|
padding: 0 6px 0 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-arrow {
|
||||||
|
float: right;
|
||||||
|
text-align: center;
|
||||||
|
width: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 24px;
|
||||||
|
padding: 6px 12px 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-arrow img {
|
||||||
|
padding: 2 2 2 2;
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #e3e3e3;
|
||||||
|
padding: 0 0 6px 0;
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-header {
|
||||||
|
height: 24px;
|
||||||
|
color: #737373;
|
||||||
|
line-height: 24px;
|
||||||
|
padding: 0 16px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.identities-list {
|
||||||
|
margin: 0 0 41px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-btn {
|
||||||
|
height: 41px;
|
||||||
|
line-height: 41px;
|
||||||
|
background-color: #e3e3e3;
|
||||||
|
padding: 0 16px 0 16px;
|
||||||
|
border: solid 1px #d9d9d9;
|
||||||
|
cursor: pointer;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-panel {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-return.arrow-left {
|
||||||
|
position: absolute;
|
||||||
|
border: 0;
|
||||||
|
left: 15px;
|
||||||
|
top: 15px;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
background-image: url("/img/arrow-icon-left.svg");
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -741,21 +741,21 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
Utils.addEnterHandler(closeContEl, () => {
|
Utils.addEnterHandler(closeContEl, () => {
|
||||||
Logic.showPreviousPanel();
|
Logic.showPreviousPanel();
|
||||||
});
|
});
|
||||||
const hideContEl = document.querySelector("#container-info-hideorshow");
|
// const hideContEl = document.querySelector("#container-info-hideorshow");
|
||||||
hideContEl.setAttribute("tabindex", "0");
|
// hideContEl.setAttribute("tabindex", "0");
|
||||||
Utils.addEnterHandler(hideContEl, async () => {
|
// Utils.addEnterHandler(hideContEl, async () => {
|
||||||
const identity = Logic.currentIdentity();
|
// const identity = Logic.currentIdentity();
|
||||||
try {
|
// try {
|
||||||
browser.runtime.sendMessage({
|
// browser.runtime.sendMessage({
|
||||||
method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
|
// method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
|
||||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
// windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||||
cookieStoreId: Logic.currentCookieStoreId()
|
// cookieStoreId: Logic.currentCookieStoreId()
|
||||||
});
|
// });
|
||||||
window.close();
|
// window.close();
|
||||||
} catch (e) {
|
// } catch (e) {
|
||||||
window.close();
|
// window.close();
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
// Check if the user has incompatible add-ons installed
|
// Check if the user has incompatible add-ons installed
|
||||||
let incompatible = false;
|
let incompatible = false;
|
||||||
|
|
@ -766,8 +766,8 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
throw new Error("Could not check for incompatible add-ons.");
|
throw new Error("Could not check for incompatible add-ons.");
|
||||||
}
|
}
|
||||||
const moveTabsEl = document.querySelector("#container-info-movetabs");
|
// const moveTabsEl = document.querySelector("#container-info-movetabs");
|
||||||
moveTabsEl.setAttribute("tabindex","0");
|
// moveTabsEl.setAttribute("tabindex","0");
|
||||||
const numTabs = await Logic.numTabs();
|
const numTabs = await Logic.numTabs();
|
||||||
if (incompatible) {
|
if (incompatible) {
|
||||||
Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
|
Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
|
||||||
|
|
@ -776,13 +776,17 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
|
Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
Utils.addEnterHandler(moveTabsEl, async () => {
|
// Utils.addEnterHandler(moveTabsEl, async () => {
|
||||||
await browser.runtime.sendMessage({
|
// await browser.runtime.sendMessage({
|
||||||
method: "moveTabsToWindow",
|
// method: "moveTabsToWindow",
|
||||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
// windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||||
cookieStoreId: Logic.currentIdentity().cookieStoreId,
|
// cookieStoreId: Logic.currentIdentity().cookieStoreId,
|
||||||
});
|
// });
|
||||||
window.close();
|
// window.close();
|
||||||
|
// });
|
||||||
|
const manageContainer = document.querySelector("#manage-container-link");
|
||||||
|
Utils.addEnterHandler(manageContainer, async () => {
|
||||||
|
Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -791,22 +795,22 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
const identity = Logic.currentIdentity();
|
const identity = Logic.currentIdentity();
|
||||||
|
|
||||||
// Populating the panel: name and icon
|
// Populating the panel: name and icon
|
||||||
document.getElementById("container-info-name").textContent = identity.name;
|
document.getElementById("container-info-title").textContent = identity.name;
|
||||||
|
|
||||||
const icon = document.getElementById("container-info-icon");
|
// const icon = document.getElementById("container-info-icon");
|
||||||
icon.setAttribute("data-identity-icon", identity.icon);
|
// icon.setAttribute("data-identity-icon", identity.icon);
|
||||||
icon.setAttribute("data-identity-color", identity.color);
|
// icon.setAttribute("data-identity-color", identity.color);
|
||||||
|
|
||||||
// Show or not the has-tabs section.
|
// Show or not the has-tabs section.
|
||||||
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
|
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
|
||||||
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
|
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
|
||||||
}
|
}
|
||||||
|
|
||||||
const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
|
// const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
|
||||||
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
|
// hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
|
||||||
|
|
||||||
const hideShowLabel = document.getElementById("container-info-hideorshow-label");
|
// const hideShowLabel = document.getElementById("container-info-hideorshow-label");
|
||||||
hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
|
// hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
|
||||||
|
|
||||||
// Let's remove all the previous tabs.
|
// Let's remove all the previous tabs.
|
||||||
const table = document.getElementById("container-info-table");
|
const table = document.getElementById("container-info-table");
|
||||||
|
|
|
||||||
|
|
@ -146,26 +146,48 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
|
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
|
||||||
<div class="columns">
|
<h3 class="title" id="container-info-title">
|
||||||
<div class="panel-back-arrow" id="close-container-info-panel">
|
Personal
|
||||||
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
|
</h3>
|
||||||
</div>
|
<button class="btn-return arrow-left" id="close-container-info-panel"></button>
|
||||||
<div class="column-panel-content">
|
<hr>
|
||||||
<div class="panel-header container-info-panel-header">
|
<table class="menu">
|
||||||
<span class="usercontext-icon" id="container-info-icon"></span>
|
<tr class="menu-item" id="hide-container">
|
||||||
<h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
|
<td>
|
||||||
</div>
|
<img class="menu-icon" alt="Hide This Container" src="/img/tab-new-16.svg" />
|
||||||
<div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
|
<span class="menu-text">Hide This Container</span>
|
||||||
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
|
<span class="menu-arrow">
|
||||||
<span id="container-info-hideorshow-label">Hide this container</span>
|
</span>
|
||||||
</div>
|
</td>
|
||||||
<div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
|
</tr>
|
||||||
<div class="scrollable">
|
<tr class="menu-item" id="move-to-new-window">
|
||||||
<table id="container-info-table" class="container-info-list">
|
<td>
|
||||||
</table>
|
<img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
|
||||||
</div>
|
<span class="menu-text">Move Tabs to a New Window</span>
|
||||||
</div>
|
<span class="menu-arrow">
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="menu-item" id="always-open">
|
||||||
|
<td>
|
||||||
|
<img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
|
||||||
|
<span class="menu-text">Always Open Site in Container</span>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<div class="sub-header">
|
||||||
|
Open Tabs
|
||||||
|
</div>
|
||||||
|
<div class="scrollable">
|
||||||
|
<table id="container-info-table" class="container-info-list">
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-btn" id="manage-container-link">
|
||||||
|
Manage This Container
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue