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 {
|
||||
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, () => {
|
||||
Logic.showPreviousPanel();
|
||||
});
|
||||
const hideContEl = document.querySelector("#container-info-hideorshow");
|
||||
hideContEl.setAttribute("tabindex", "0");
|
||||
Utils.addEnterHandler(hideContEl, async () => {
|
||||
const identity = Logic.currentIdentity();
|
||||
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 hideContEl = document.querySelector("#container-info-hideorshow");
|
||||
// hideContEl.setAttribute("tabindex", "0");
|
||||
// Utils.addEnterHandler(hideContEl, async () => {
|
||||
// const identity = Logic.currentIdentity();
|
||||
// try {
|
||||
// browser.runtime.sendMessage({
|
||||
// method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
|
||||
// windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
// cookieStoreId: Logic.currentCookieStoreId()
|
||||
// });
|
||||
// window.close();
|
||||
// } catch (e) {
|
||||
// window.close();
|
||||
// }
|
||||
// });
|
||||
|
||||
// Check if the user has incompatible add-ons installed
|
||||
let incompatible = false;
|
||||
|
|
@ -766,8 +766,8 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
} catch (e) {
|
||||
throw new Error("Could not check for incompatible add-ons.");
|
||||
}
|
||||
const moveTabsEl = document.querySelector("#container-info-movetabs");
|
||||
moveTabsEl.setAttribute("tabindex","0");
|
||||
// const moveTabsEl = document.querySelector("#container-info-movetabs");
|
||||
// moveTabsEl.setAttribute("tabindex","0");
|
||||
const numTabs = await Logic.numTabs();
|
||||
if (incompatible) {
|
||||
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.");
|
||||
return;
|
||||
}
|
||||
Utils.addEnterHandler(moveTabsEl, async () => {
|
||||
await browser.runtime.sendMessage({
|
||||
method: "moveTabsToWindow",
|
||||
windowId: browser.windows.WINDOW_ID_CURRENT,
|
||||
cookieStoreId: Logic.currentIdentity().cookieStoreId,
|
||||
});
|
||||
window.close();
|
||||
// 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());
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -791,22 +795,22 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
|||
const identity = Logic.currentIdentity();
|
||||
|
||||
// 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");
|
||||
icon.setAttribute("data-identity-icon", identity.icon);
|
||||
icon.setAttribute("data-identity-color", identity.color);
|
||||
// const icon = document.getElementById("container-info-icon");
|
||||
// icon.setAttribute("data-identity-icon", identity.icon);
|
||||
// icon.setAttribute("data-identity-color", identity.color);
|
||||
|
||||
// Show or not the has-tabs section.
|
||||
for (let trHasTabs of document.getElementsByClassName("container-info-has-tabs")) { // eslint-disable-line prefer-const
|
||||
trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
|
||||
}
|
||||
|
||||
const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
|
||||
hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
|
||||
// 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";
|
||||
// const hideShowLabel = document.getElementById("container-info-hideorshow-label");
|
||||
// hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
|
||||
|
||||
// Let's remove all the previous tabs.
|
||||
const table = document.getElementById("container-info-table");
|
||||
|
|
|
|||
|
|
@ -146,26 +146,48 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
|
||||
<div class="columns">
|
||||
<div class="panel-back-arrow" id="close-container-info-panel">
|
||||
<img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
|
||||
<div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
|
||||
<h3 class="title" id="container-info-title">
|
||||
Personal
|
||||
</h3>
|
||||
<button class="btn-return arrow-left" id="close-container-info-panel"></button>
|
||||
<hr>
|
||||
<table class="menu">
|
||||
<tr class="menu-item" id="hide-container">
|
||||
<td>
|
||||
<img class="menu-icon" alt="Hide This Container" src="/img/tab-new-16.svg" />
|
||||
<span class="menu-text">Hide This Container</span>
|
||||
<span class="menu-arrow">
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="menu-item" id="move-to-new-window">
|
||||
<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>
|
||||
<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="column-panel-content">
|
||||
<div class="panel-header container-info-panel-header">
|
||||
<span class="usercontext-icon" id="container-info-icon"></span>
|
||||
<h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
|
||||
</div>
|
||||
<div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
|
||||
<img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
|
||||
<span id="container-info-hideorshow-label">Hide this container</span>
|
||||
</div>
|
||||
<div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
|
||||
<div class="scrollable">
|
||||
<table id="container-info-table" class="container-info-list">
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-btn" id="manage-container-link">
|
||||
Manage This Container
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue