diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 6bbec16..bc1227a 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -131,7 +131,7 @@ table { .edit-containers-text { text-align: center; - border-right: solid 1px #d8d8d8; + border-inline-end: solid 1px #d8d8d8; } .edit-containers-text a { @@ -202,20 +202,27 @@ table { block-size: 33px; display: flex; align-items: center; - border-bottom: 1px solid #ebebeb; - margin-bottom: 10px; + border-block-end: 1px solid #ebebeb; + margin-block-end: 10px; + padding: 0 20px; } .container-info-panel-hide { margin-bottom: 8px; + padding: 0 20px; +} + +.container-info-panel-hideorshow-icon { + margin-inline-end: 7px; } .container-info-panel-movetabs { - border-bottom: 1px solid #ebebeb; - margin-bottom: 10px; + border-block-end: 1px solid #ebebeb; + margin-block-end: 10px; + padding: 0 20px; } -.container-info-has-tabs { +.clickable { cursor: pointer; } diff --git a/webextension/img/container-newtab.svg b/webextension/img/container-newtab.svg index 4739c5c..477ace6 100644 --- a/webextension/img/container-newtab.svg +++ b/webextension/img/container-newtab.svg @@ -6,7 +6,6 @@ .st0{fill:#979797;} icon-newtab -Created with Sketch. diff --git a/webextension/js/popup.js b/webextension/js/popup.js index aa1e561..06b284e 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -23,6 +23,9 @@ function showContainerTabsPanel(identity) { trHasTabs.setAttribute("data-user-context-id", identity.userContextId); } + let hideOrShowRow = document.querySelector("#container-info-hideorshow"); + hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId); + const hideShowIcon = document.getElementById("container-info-hideorshow-icon"); hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC; @@ -39,12 +42,14 @@ function showContainerTabsPanel(identity) { method: "getTabs", userContextId: identity.userContextId, }).then(tabs => { + console.log('browser.runtime.sendMessage getTabs, tabs: ', tabs); // For each one, let's create a new line. let fragment = document.createDocumentFragment(); for (const tab of tabs) { let tr = document.createElement("tr"); fragment.appendChild(tr); tr.classList.add("container-info-tab"); + tr.classList.add("clickable"); tr.innerHTML = ` ${tab.title}`; @@ -89,12 +94,15 @@ document.querySelector("#onboarding-done-button").addEventListener("click", () = }); browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { + console.log('queryIdentities'); let fragment = document.createDocumentFragment(); identities.forEach(identity => { + console.log('identities.forEach'); let tr = document.createElement("tr"); fragment.appendChild(tr); - tr.className = "container-panel-row"; + tr.classList.add("container-panel-row"); + tr.classList.add("clickable"); tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); tr.innerHTML = ` @@ -136,6 +144,7 @@ function showEditContainersPanel() { let tr = document.createElement("tr"); fragment.appendChild(tr); tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); + tr.classList.add("clickable"); tr.innerHTML = `
-
+
Container Tabs Overview

A better way to manage all the things you do online

Use containers to organize tasks, manage accounts, and keep your focus where you want it.

@@ -16,7 +16,7 @@
-
+
How Containers Work

Put containers to work for you.

Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.

@@ -51,31 +51,19 @@
-
«
+
«
-
- -
-
-

-
+ +

-
- Hide Container iconHide this container
+
+ Hide Container iconHide this container
-
+
Move tabs to a new window
-