From b91cf5bd8a5be7f9a699e32ad887e7e0f5360ec2 Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 10:20:18 -0600 Subject: [PATCH 1/9] ignore local vimrc files --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 520552f..6914c99 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules README.html *.xpi *.swp +.vimrc From b4a41dfca28501609564d62563181c492ffde1dc Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 10:20:32 -0600 Subject: [PATCH 2/9] for #55: update panel UI to specs --- webextension/css/popup.css | 49 ++++++++++++++++++++++++++++++++++---- webextension/js/popup.js | 13 +++++----- webextension/popup.html | 44 ++++++++++++++++++++++++++-------- 3 files changed, 86 insertions(+), 20 deletions(-) diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 2ce5d91..9f4a8e0 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -2,12 +2,21 @@ body { background: #FAFAFA; min-inline-size: 200px; max-inline-size: 400px; + inline-size: 264px; } table { margin-block-end: 0; } +.panel { + height: 100%; +} + +.panel-row { + height: 100%; +} + .onboarding { margin: 16px; min-block-size: 480px; @@ -35,14 +44,26 @@ table { padding: .5em; } -.header-column { - padding: 0; +.panel-header { + height: 54px; + display: flex; + align-items: center; +} + +.panel-header-text { + font-weight: lighter; + font-size: 16px; + margin-bottom: 0; + color: #4a4a4a; +} + +.panel-header-button { + justify-content: center; } .icon { max-inline-size: 16px; block-size: 16px; - margin: 4px; } .container-panel > table.unstriped tbody tr { @@ -71,9 +92,19 @@ table { background: #DCDBDC; } +.panel-footer { + align-items: center; + background: #efefef; + color: #000000; + display: flex; + font-size: 13px; + height: 54px; + width: 100%; +} + .edit-containers-text { text-align: center; - padding: .5em; + border-right: solid 1px #d8d8d8; } .edit-containers-text a { @@ -143,3 +174,13 @@ table { .container-info-has-tabs { cursor: pointer; } + +.edit-panel-footer { + background: #248aeb; + color: #ffffff; + justify-content: center; +} + +.edit-panel-footer a { + color: #ffffff; +} diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 278eeb3..b03ee03 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -130,12 +130,13 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { }); document.querySelector("#edit-containers-link").addEventListener("click", () => { - browser.runtime.sendMessage({ - method: "openTab", - url: "about:preferences#containers" - }).then(() => { - window.close(); - }); + document.querySelector("#container-panel").classList.add("hide"); + document.querySelector("#edit-panel").classList.remove("hide"); +}); + +document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { + document.querySelector("#container-panel").classList.remove("hide"); + document.querySelector("#edit-panel").classList.add("hide"); }); document.querySelector("#sort-containers-link").addEventListener("click", () => { diff --git a/webextension/popup.html b/webextension/popup.html index 5bd8dfc..b03efd2 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -6,6 +6,7 @@ +
Container Tabs Overview

A better way to manage all the things you do online

@@ -13,33 +14,54 @@

Learn more

Next
+ +
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.

Done
+ +
-
-
- Containers icon +
+
+

Containers

-
-

Containers

-
-
+
Sort Containers
-
-
- Edit Containers +
+
+ Edit Containers +
+
+ +
+ + +
+
+
+

Edit Containers

+
+
+ + +
+
+ < Exit Edit Mode +
+
+ +
<
@@ -63,6 +85,8 @@
+ + From 5ca44030707ffe3b414b354a54e2ab114d6a2f1d Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 10:38:45 -0600 Subject: [PATCH 3/9] refactor a showPanel function --- webextension/js/popup.js | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/webextension/js/popup.js b/webextension/js/popup.js index b03ee03..05ce0cd 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -2,6 +2,13 @@ const CONTAINER_HIDE_SRC = "/img/container-hide.svg"; const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg"; +function showPanel(panelSelector) { + for (let panelElement of document.querySelectorAll(".panel")) { + panelElement.classList.add("hide"); + } + document.querySelector(panelSelector).classList.remove("hide"); +} + function showContainerTabsPanel(identity) { // Populating the panel: name and icon document.getElementById("container-info-name").innerText = identity.name; @@ -64,30 +71,21 @@ function showContainerTabsPanel(identity) { } if (localStorage.getItem("onboarded2")) { - for (let element of document.querySelectorAll(".onboarding")) { - element.classList.add("hide"); - } - document.querySelector("#container-panel").classList.remove("hide"); + showPanel("#container-panel"); } else if (localStorage.getItem("onboarded1")) { - document.querySelector(".onboarding-panel-1").classList.add("hide"); - document.querySelector("#container-panel").classList.add("hide"); + showPanel(".onboarding-panel-2"); } else { - document.querySelector(".onboarding-panel-2").classList.add("hide"); - document.querySelector("#container-panel").classList.add("hide"); + showPanel(".onboarding-panel-1"); } document.querySelector("#onboarding-next-button").addEventListener("click", () => { localStorage.setItem("onboarded1", true); - document.querySelector(".onboarding-panel-2").classList.remove("hide"); - document.querySelector(".onboarding-panel-1").classList.add("hide"); - document.querySelector("#container-panel").classList.add("hide"); + showPanel(".onboarding-panel-2"); }); document.querySelector("#onboarding-done-button").addEventListener("click", () => { localStorage.setItem("onboarded2", true); - document.querySelector(".onboarding-panel-1").classList.add("hide"); - document.querySelector(".onboarding-panel-2").classList.add("hide"); - document.querySelector("#container-panel").classList.remove("hide"); + showPanel("#container-panel"); }); browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { @@ -130,13 +128,11 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { }); document.querySelector("#edit-containers-link").addEventListener("click", () => { - document.querySelector("#container-panel").classList.add("hide"); - document.querySelector("#edit-panel").classList.remove("hide"); + showPanel("#edit-panel"); }); document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { - document.querySelector("#container-panel").classList.remove("hide"); - document.querySelector("#edit-panel").classList.add("hide"); + showPanel("#container-panel"); }); document.querySelector("#sort-containers-link").addEventListener("click", () => { From 962cd623b83eab2f2a602057f443ce1f2c98c5c0 Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 13:22:07 -0600 Subject: [PATCH 4/9] for #55: edit-containers-panel with live list --- webextension/css/popup.css | 4 ++-- webextension/js/popup.js | 48 +++++++++++++++++++++++++++++++++++++- webextension/popup.html | 10 ++++---- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 9f4a8e0..0d15dbe 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -175,12 +175,12 @@ table { cursor: pointer; } -.edit-panel-footer { +.edit-containers-panel-footer { background: #248aeb; color: #ffffff; justify-content: center; } -.edit-panel-footer a { +.edit-containers-panel-footer a { color: #ffffff; } diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 05ce0cd..ec9aec5 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -128,7 +128,53 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { }); document.querySelector("#edit-containers-link").addEventListener("click", () => { - showPanel("#edit-panel"); + browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { + let fragment = document.createDocumentFragment(); + + identities.forEach(identity => { + let tr = document.createElement("tr"); + fragment.appendChild(tr); + tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); + tr.innerHTML = ` + +
+
+ + ${identity.name} + + + + + + + >`; + + tr.addEventListener("click", e => { + if (e.target.matches(".edit-container-icon")) { + console.log(`clicked to edit ${identity.userContextId} container`); + } else if (e.target.matches(".delete-container-icon")) { + console.log(`clicked to delete ${identity.userContextId} container`); + } + }); + }); + + document.querySelector("#edit-identities-list").innerHTML = ""; + document.querySelector("#edit-identities-list").appendChild(fragment); + }); + showPanel("#edit-containers-panel"); }); document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { diff --git a/webextension/popup.html b/webextension/popup.html index b03efd2..cef9633 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -41,22 +41,24 @@ Edit Containers
- + + + Create new container icon +
-
+

Edit Containers

- +
-
+
< Exit Edit Mode
From 3be335e79c9d1fc44d5bd14b88979523c6270b64 Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 14:22:11 -0600 Subject: [PATCH 5/9] for #55: more UI spec; start edit-container-panel --- webextension/css/popup.css | 25 +++++++++++++++++++++++++ webextension/js/popup.js | 23 +++++++++++++++++++---- webextension/popup.html | 31 +++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 4 deletions(-) diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 0d15dbe..b45c346 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -9,6 +9,10 @@ table { margin-block-end: 0; } +.button { + background: #248aeb; +} + .panel { height: 100%; } @@ -17,6 +21,13 @@ table { height: 100%; } +.panel-back-arrow { + background: #ebebeb; + display: flex; + justify-content: center; + text-align: center; +} + .onboarding { margin: 16px; min-block-size: 480px; @@ -102,6 +113,20 @@ table { width: 100%; } +.footer-columns { + margin: 0; + padding: 0; +} + +.footer-button { + margin-bottom: 0; + border-radius: 0; +} + +.cancel-button { + background: #ebebeb; +} + .edit-containers-text { text-align: center; border-right: solid 1px #d8d8d8; diff --git a/webextension/js/popup.js b/webextension/js/popup.js index ec9aec5..6ec8979 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -127,7 +127,7 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { document.querySelector(".identities-list").appendChild(fragment); }); -document.querySelector("#edit-containers-link").addEventListener("click", () => { +function showEditContainersPanel() { browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { let fragment = document.createDocumentFragment(); @@ -159,12 +159,11 @@ document.querySelector("#edit-containers-link").addEventListener("click", () => class="icon delete-container-icon" src="/img/container-delete.svg" /> - - >`; + `; tr.addEventListener("click", e => { if (e.target.matches(".edit-container-icon")) { - console.log(`clicked to edit ${identity.userContextId} container`); + showPanel("#edit-container-panel"); } else if (e.target.matches(".delete-container-icon")) { console.log(`clicked to delete ${identity.userContextId} container`); } @@ -175,12 +174,28 @@ document.querySelector("#edit-containers-link").addEventListener("click", () => document.querySelector("#edit-identities-list").appendChild(fragment); }); showPanel("#edit-containers-panel"); +} + +document.querySelector("#add-container-link").addEventListener("click", () => { + showPanel("#edit-container-panel"); +}); + +document.querySelector("#edit-containers-link").addEventListener("click", () => { + showEditContainersPanel(); }); document.querySelector("#exit-edit-mode-link").addEventListener("click", () => { showPanel("#container-panel"); }); +document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => { + showEditContainersPanel(); +}); + +document.querySelector("#edit-container-cancel-link").addEventListener("click", () => { + showEditContainersPanel(); +}); + document.querySelector("#sort-containers-link").addEventListener("click", () => { browser.runtime.sendMessage({ method: "sortTabs" diff --git a/webextension/popup.html b/webextension/popup.html index cef9633..30fa6ea 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -88,6 +88,37 @@
+
+
+
+ « +
+
+
+

+ + +

+

+ + +

+

+ + +

+
+
+
+ Cancel +
+
+ OK +
+
+
+
+
From b41ca7411ca9629305e3b1fe4100cd0dc8d140f4 Mon Sep 17 00:00:00 2001 From: groovecoder Date: Tue, 10 Jan 2017 14:34:45 -0600 Subject: [PATCH 6/9] switch all width & height to logical CSS --- webextension/css/popup.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/webextension/css/popup.css b/webextension/css/popup.css index b45c346..30aab9a 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -14,11 +14,11 @@ table { } .panel { - height: 100%; + block-size: 100%; } .panel-row { - height: 100%; + block-size: 100%; } .panel-back-arrow { @@ -56,7 +56,7 @@ table { } .panel-header { - height: 54px; + block-size: 54px; display: flex; align-items: center; } @@ -109,8 +109,8 @@ table { color: #000000; display: flex; font-size: 13px; - height: 54px; - width: 100%; + block-size: 54px; + inline-size: 100%; } .footer-columns { From 6e00cf8d5beb43bf056c571aa7e6ffc331cd816f Mon Sep 17 00:00:00 2001 From: groovecoder Date: Wed, 11 Jan 2017 23:52:09 -0600 Subject: [PATCH 7/9] wip: ui updates to container-info and edit panel --- webextension/css/popup.css | 29 ++++++++++--- webextension/img/container-newtab.svg | 20 +++++++++ webextension/js/popup.js | 1 + webextension/popup.html | 61 +++++++++++++++------------ 4 files changed, 80 insertions(+), 31 deletions(-) create mode 100644 webextension/img/container-newtab.svg diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 30aab9a..6bbec16 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -1,5 +1,4 @@ body { - background: #FAFAFA; min-inline-size: 200px; max-inline-size: 400px; inline-size: 264px; @@ -90,12 +89,15 @@ table { background-size: contain; filter: url('/img/filters.svg#fill'); fill: var(--identity-icon-color); - inline-size: 32px; - block-size: 32px; + inline-size: 20px; + block-size: 20px; + padding-left: 20px; + padding-right: 10px; } -.userContext-icon:hover { - background-image: url('/img/container-add.svg'); +.container-panel-row:hover .userContext-icon { + background-image: url('/img/container-newtab.svg'); + filter: url('/img/filters.svg#fill'); fill: 'gray'; } @@ -196,6 +198,23 @@ table { --identity-icon: url("/img/usercontext.svg#circle"); } +.container-info-panel-header { + block-size: 33px; + display: flex; + align-items: center; + border-bottom: 1px solid #ebebeb; + margin-bottom: 10px; +} + +.container-info-panel-hide { + margin-bottom: 8px; +} + +.container-info-panel-movetabs { + border-bottom: 1px solid #ebebeb; + margin-bottom: 10px; +} + .container-info-has-tabs { cursor: pointer; } diff --git a/webextension/img/container-newtab.svg b/webextension/img/container-newtab.svg new file mode 100644 index 0000000..4739c5c --- /dev/null +++ b/webextension/img/container-newtab.svg @@ -0,0 +1,20 @@ + + + + +icon-newtab +Created with Sketch. + + + + + + + + + + diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 6ec8979..aa1e561 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -94,6 +94,7 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => { identities.forEach(identity => { let tr = document.createElement("tr"); fragment.appendChild(tr); + tr.className = "container-panel-row"; tr.setAttribute("data-identity-cookie-store-id", identity.userContextId); tr.innerHTML = ` diff --git a/webextension/popup.html b/webextension/popup.html index 30fa6ea..471c7c2 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -33,7 +33,7 @@ Sort Containers
- +
@@ -49,13 +49,46 @@
+
+
+
«
+
+
+
+ +
+
+

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