Implemented UI/UX for container list Panel (first panel).
This commit is contained in:
Kendall Werts
parent
d654810d41
commit
055f47102f
12 changed files with 383 additions and 204 deletions
|
|
@ -91,7 +91,7 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollable {
|
.scrollable {
|
||||||
border-block-start: 1px solid #f1f1f1;
|
/* border-block-start: 1px solid #f1f1f1;*/
|
||||||
inline-size: 100%;
|
inline-size: 100%;
|
||||||
max-block-size: 400px;
|
max-block-size: 400px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
@ -488,24 +488,6 @@ manage things like container crud */
|
||||||
margin-inline-start: var(--inline-item-space-size);
|
margin-inline-start: var(--inline-item-space-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
#container-panel #sort-containers-link {
|
|
||||||
align-items: center;
|
|
||||||
block-size: var(--block-url-label-size);
|
|
||||||
border: 1px solid #d8d8d8;
|
|
||||||
border-radius: var(--small-radius);
|
|
||||||
color: var(--title-text-color);
|
|
||||||
display: flex;
|
|
||||||
font-size: var(--small-text-size);
|
|
||||||
inline-size: var(--inline-button-size);
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container-panel #sort-containers-link:hover,
|
|
||||||
#container-panel #sort-containers-link:focus {
|
|
||||||
background: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
span ~ .panel-header-text {
|
span ~ .panel-header-text {
|
||||||
padding-block-end: 0;
|
padding-block-end: 0;
|
||||||
padding-block-start: 0;
|
padding-block-start: 0;
|
||||||
|
|
@ -644,7 +626,7 @@ span ~ .panel-header-text {
|
||||||
background-image: var(--identity-icon);
|
background-image: var(--identity-icon);
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 20px 20px;
|
background-size: 16px 16px;
|
||||||
block-size: 100%;
|
block-size: 100%;
|
||||||
fill: var(--identity-icon-color);
|
fill: var(--identity-icon-color);
|
||||||
filter: url('/img/filters.svg#fill');
|
filter: url('/img/filters.svg#fill');
|
||||||
|
|
@ -1003,3 +985,121 @@ 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;
|
||||||
|
}
|
||||||
1
src/img/arrow-icon-left.svg
Normal file
1
src/img/arrow-icon-left.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 220 B |
21
src/img/arrow-icon-right.svg
Normal file
21
src/img/arrow-icon-right.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
|
||||||
|
<title>Arrow</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs>
|
||||||
|
<path d="M5.00090934,9.5006316 C4.79840046,9.50099392 4.61567086,9.37916873 4.53812503,9.19209489 C4.4605792,9.00502105 4.5035325,8.78964579 4.64690934,8.6466316 L7.29490934,6.0006316 L4.64690934,3.3546316 C4.45140054,3.1591228 4.45140054,2.8421404 4.64690934,2.6466316 C4.84241814,2.4511228 5.15940054,2.4511228 5.35490934,2.6466316 L8.35490934,5.6466316 C8.44895104,5.74043586 8.50180313,5.86780434 8.50180313,6.0006316 C8.50180313,6.13345886 8.44895104,6.26082734 8.35490934,6.3546316 L5.35490934,9.3546316 C5.26095861,9.44834555 5.13360821,9.5008686 5.00090934,9.5006316 Z" id="path-1"></path>
|
||||||
|
</defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.6">
|
||||||
|
<g id="Icons-/-12-/-Arrowhead-Right-12---Thin" transform="translate(-4.000000, -2.000000)">
|
||||||
|
<rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
|
||||||
|
<mask id="mask-2" fill="white">
|
||||||
|
<use xlink:href="#path-1"></use>
|
||||||
|
</mask>
|
||||||
|
<g id="Shape" fill-rule="nonzero"></g>
|
||||||
|
<g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#0C0C0D" fill-opacity="0.8" fill-rule="evenodd">
|
||||||
|
<rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
7
src/img/movetowindow-16.svg
Normal file
7
src/img/movetowindow-16.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.85 12.15l-3-3a0.49 0.49 0 0 0-0.7 0.7L14.29 12H9.5a0.5 0.5 0 0 0 0 1h4.79l-2.14 2.15a0.48 0.48 0 0 0 0 0.7 0.48 0.48 0 0 0 0.7 0l3-3a0.36 0.36 0 0 0 0.11-0.16 0.5 0.5 0 0 0 0-0.38 0.36 0.36 0 0 0-0.11-0.16z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 1H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h4a1 1 0 0 0 0-2H3a1 1 0 0 1-1-1V6h12v2a1 1 0 0 0 2 0V4a3 3 0 0 0-3-3zM2 5V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 796 B |
7
src/img/open-in-new-16.svg
Normal file
7
src/img/open-in-new-16.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1H9a1 1 0 0 0 0 2h2.59l-3.3 3.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V7a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 10a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h1a1 1 0 0 0 0-2H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1a1 1 0 0 0-1-1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 747 B |
7
src/img/open-in-stop-16.svg
Normal file
7
src/img/open-in-stop-16.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 10a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h1a1 1 0 0 0 0-2H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1a1 1 0 0 0-1-1z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.91 4.5l1.8-1.79a1 1 0 1 0-1.42-1.42l-1.79 1.8-1.79-1.8a1 1 0 0 0-1.42 1.42l1.8 1.79-1.8 1.79a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.79-1.8 1.79 1.8a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 772 B |
9
src/img/password-hide.svg
Normal file
9
src/img/password-hide.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 7l-4 4a4 4 0 0 0 4-4z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.66 7.71a7.78 7.78 0 0 0-1.55-2.82L12.7 6.3a5.9 5.9 0 0 1 1 1.7A6 6 0 0 1 8 12a7.28 7.28 0 0 1-.93-.07l-1.64 1.64A7.92 7.92 0 0 0 8 14a8 8 0 0 0 7.66-5.71 1 1 0 0 0 0-.58zM14.71 1.29a1 1 0 0 0-1.42 0l-1.63 1.64A7.8 7.8 0 0 0 8 2a8 8 0 0 0-7.66 5.71 1 1 0 0 0 0 .58 7.8 7.8 0 0 0 2.34 3.62l-1.39 1.38a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l12-12a1 1 0 0 0 0-1.42zM8.5 5a1.43 1.43 0 0 1 .82.26L7.26 7.32A1.43 1.43 0 0 1 7 6.5 1.5 1.5 0 0 1 8.5 5zM2.35 8a6 6 0 0 1 2.11-2.82A3.91 3.91 0 0 0 5 9.61l-.9.9A5.91 5.91 0 0 1 2.35 8z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 7l-4 4a4 4 0 0 0 4-4z"/>
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M16 7.7a8.06 8.06 0 0 0-1.72-2.94l-1.45 1.41A5.91 5.91 0 0 1 13.94 8 6.33 6.33 0 0 1 8 12a7.28 7.28 0 0 1-.93-.07l-1.66 1.66A8.56 8.56 0 0 0 8 14a8.34 8.34 0 0 0 8-5.7 1.22 1.22 0 0 0 0-.6zM14.71 1.29a1 1 0 0 0-1.42 0L11.7 2.88A8.43 8.43 0 0 0 8 2a8.34 8.34 0 0 0-8 5.7 1.22 1.22 0 0 0 0 .6A7.87 7.87 0 0 0 2.58 12l-1.29 1.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l12-12a1 1 0 0 0 0-1.42zM8.5 5a1.43 1.43 0 0 1 .82.26L7.26 7.32A1.43 1.43 0 0 1 7 6.5 1.5 1.5 0 0 1 8.5 5zM2.06 8a6 6 0 0 1 2.49-3A4 4 0 0 0 4 7a4 4 0 0 0 1 2.61l-1 1A5.94 5.94 0 0 1 2.06 8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
6
src/img/refresh-16.svg
Normal file
6
src/img/refresh-16.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 1a1 1 0 0 0-1 1v2.42A7 7 0 1 0 13 13a1 1 0 0 0-1.41-1.41 5 5 0 1 1 1-5.54H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 495 B |
6
src/img/sort-16_1.svg
Normal file
6
src/img/sort-16_1.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.71 4.29l-3-3a1 1 0 0 0-1.42 1.42L11.59 4H4a1 1 0 0 0 0 2h7.59l-1.3 1.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 0-1.42zM12 10H4.41l1.3-1.29a1 1 0 1 0-1.42-1.42l-3 3a1 1 0 0 0 0 1.42l3 3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42L4.41 12H12a1 1 0 0 0 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 625 B |
6
src/img/tab-new-16.svg
Normal file
6
src/img/tab-new-16.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- 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/. -->
|
||||||
|
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||||
|
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M11 11V9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h7v-1a1 1 0 0 1 1-1zm4.5 1H13V9.5a0.5 0.5 0 0 0-1 0V12H9.5a0.5 0.5 0 0 0 0 1H12v2.5a0.5 0.5 0 0 0 1 0V13h2.5a0.5 0.5 0 0 0 0-1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 583 B |
243
src/js/popup.js
243
src/js/popup.js
|
|
@ -20,7 +20,11 @@ const P_ONBOARDING_5 = "onboarding5";
|
||||||
const P_ONBOARDING_6 = "onboarding6";
|
const P_ONBOARDING_6 = "onboarding6";
|
||||||
const P_ONBOARDING_7 = "onboarding7";
|
const P_ONBOARDING_7 = "onboarding7";
|
||||||
const P_CONTAINERS_LIST = "containersList";
|
const P_CONTAINERS_LIST = "containersList";
|
||||||
const P_CONTAINERS_EDIT = "containersEdit";
|
const P_CONTAINER_PICKER = "containerPicker";
|
||||||
|
const OPEN_NEW_CONTAINER_PICKER = "new-tab";
|
||||||
|
const MANAGE_CONTAINERS_PICKER = "manage";
|
||||||
|
const REOPEN_IN_CONTAINER = "reopen-in";
|
||||||
|
const ALWAYS_OPEN_IN_PICKER = "always-open-in";
|
||||||
const P_CONTAINER_INFO = "containerInfo";
|
const P_CONTAINER_INFO = "containerInfo";
|
||||||
const P_CONTAINER_EDIT = "containerEdit";
|
const P_CONTAINER_EDIT = "containerEdit";
|
||||||
const P_CONTAINER_DELETE = "containerDelete";
|
const P_CONTAINER_DELETE = "containerDelete";
|
||||||
|
|
@ -275,7 +279,7 @@ const Logic = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async showPanel(panel, currentIdentity = null) {
|
async showPanel(panel, currentIdentity = null, pickerType = null) {
|
||||||
// Invalid panel... ?!?
|
// Invalid panel... ?!?
|
||||||
if (!(panel in this._panels)) {
|
if (!(panel in this._panels)) {
|
||||||
throw new Error("Something really bad happened. Unknown panel: " + panel);
|
throw new Error("Something really bad happened. Unknown panel: " + panel);
|
||||||
|
|
@ -283,6 +287,7 @@ const Logic = {
|
||||||
|
|
||||||
this._previousPanel = this._currentPanel;
|
this._previousPanel = this._currentPanel;
|
||||||
this._currentPanel = panel;
|
this._currentPanel = panel;
|
||||||
|
this.pickerType = pickerType;
|
||||||
|
|
||||||
this._currentIdentity = currentIdentity;
|
this._currentIdentity = currentIdentity;
|
||||||
|
|
||||||
|
|
@ -589,16 +594,20 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
async initialize() {
|
async initialize() {
|
||||||
Logic.addEnterHandler(document.querySelector("#container-add-link"), () => {
|
Logic.addEnterHandler(document.querySelector("#manage-containers-link"), (e) => {
|
||||||
Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
|
|
||||||
});
|
|
||||||
|
|
||||||
Logic.addEnterHandler(document.querySelector("#edit-containers-link"), (e) => {
|
|
||||||
if (!e.target.classList.contains("disable-edit-containers")) {
|
if (!e.target.classList.contains("disable-edit-containers")) {
|
||||||
Logic.showPanel(P_CONTAINERS_EDIT);
|
Logic.showPanel(P_CONTAINER_PICKER, null, MANAGE_CONTAINERS_PICKER);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Logic.addEnterHandler(document.querySelector("#open-new-tab-in"), () => {
|
||||||
|
Logic.showPanel(P_CONTAINER_PICKER, null, OPEN_NEW_CONTAINER_PICKER);
|
||||||
|
});
|
||||||
|
Logic.addEnterHandler(document.querySelector("#reopen-site-in"), () => {
|
||||||
|
Logic.showPanel(P_CONTAINER_PICKER, null, REOPEN_IN_CONTAINER);
|
||||||
|
});
|
||||||
|
Logic.addEnterHandler(document.querySelector("#always-open-in"), () => {
|
||||||
|
Logic.showPanel(P_CONTAINER_PICKER, null, ALWAYS_OPEN_IN_PICKER);
|
||||||
|
});
|
||||||
Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
|
Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
|
||||||
try {
|
try {
|
||||||
await browser.runtime.sendMessage({
|
await browser.runtime.sendMessage({
|
||||||
|
|
@ -668,123 +677,47 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// When the popup is open sometimes the tab will still be updating it's state
|
|
||||||
this.tabUpdateHandler = (tabId, changeInfo) => {
|
|
||||||
const propertiesToUpdate = ["title", "favIconUrl"];
|
|
||||||
const hasChanged = Object.keys(changeInfo).find((changeInfoKey) => {
|
|
||||||
if (propertiesToUpdate.includes(changeInfoKey)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (hasChanged) {
|
|
||||||
this.prepareCurrentTabHeader();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
browser.tabs.onUpdated.addListener(this.tabUpdateHandler);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
unregister() {
|
unregister() {
|
||||||
browser.tabs.onUpdated.removeListener(this.tabUpdateHandler);
|
|
||||||
},
|
|
||||||
|
|
||||||
setupAssignmentCheckbox(siteSettings, currentUserContextId) {
|
|
||||||
const assignmentCheckboxElement = document.getElementById("container-page-assigned");
|
|
||||||
let checked = false;
|
|
||||||
if (siteSettings && Number(siteSettings.userContextId) === currentUserContextId) {
|
|
||||||
checked = true;
|
|
||||||
}
|
|
||||||
assignmentCheckboxElement.checked = checked;
|
|
||||||
let disabled = false;
|
|
||||||
if (siteSettings === false) {
|
|
||||||
disabled = true;
|
|
||||||
}
|
|
||||||
assignmentCheckboxElement.disabled = disabled;
|
|
||||||
},
|
|
||||||
|
|
||||||
async prepareCurrentTabHeader() {
|
|
||||||
const currentTab = await Logic.currentTab();
|
|
||||||
const currentTabElement = document.getElementById("current-tab");
|
|
||||||
const assignmentCheckboxElement = document.getElementById("container-page-assigned");
|
|
||||||
const currentTabUserContextId = Logic.userContextId(currentTab.cookieStoreId);
|
|
||||||
assignmentCheckboxElement.addEventListener("change", () => {
|
|
||||||
Logic.setOrRemoveAssignment(currentTab.id, currentTab.url, currentTabUserContextId, !assignmentCheckboxElement.checked);
|
|
||||||
});
|
|
||||||
currentTabElement.hidden = !currentTab;
|
|
||||||
this.setupAssignmentCheckbox(false, currentTabUserContextId);
|
|
||||||
if (currentTab) {
|
|
||||||
const identity = await Logic.identity(currentTab.cookieStoreId);
|
|
||||||
const siteSettings = await Logic.getAssignment(currentTab);
|
|
||||||
this.setupAssignmentCheckbox(siteSettings, currentTabUserContextId);
|
|
||||||
const currentPage = document.getElementById("current-page");
|
|
||||||
currentPage.innerHTML = escaped`<span class="page-title truncate-text">${currentTab.title}</span>`;
|
|
||||||
const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || "");
|
|
||||||
currentPage.prepend(favIconElement);
|
|
||||||
|
|
||||||
const currentContainer = document.getElementById("current-container");
|
|
||||||
currentContainer.innerText = identity.name;
|
|
||||||
|
|
||||||
currentContainer.setAttribute("data-identity-color", identity.color);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
async prepare() {
|
async prepare() {
|
||||||
const fragment = document.createDocumentFragment();
|
const fragment = document.createDocumentFragment();
|
||||||
|
|
||||||
this.prepareCurrentTabHeader();
|
|
||||||
|
|
||||||
Logic.identities().forEach(identity => {
|
Logic.identities().forEach(identity => {
|
||||||
const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
|
|
||||||
const tr = document.createElement("tr");
|
const tr = document.createElement("tr");
|
||||||
const context = document.createElement("td");
|
tr.classList.add("menu-item");
|
||||||
const manage = document.createElement("td");
|
const td = document.createElement("td");
|
||||||
|
const openTabs = identity.numberOfOpenTabs || "" ;
|
||||||
|
|
||||||
tr.classList.add("container-panel-row");
|
td.innerHTML = escaped`
|
||||||
|
<div class="menu-icon">
|
||||||
context.classList.add("userContext-wrapper", "open-newtab", "clickable", "firstTabindex");
|
|
||||||
manage.classList.add("show-tabs", "pop-button");
|
|
||||||
manage.setAttribute("title", `View ${identity.name} container`);
|
|
||||||
context.setAttribute("tabindex", "0");
|
|
||||||
context.setAttribute("title", `Create ${identity.name} tab`);
|
|
||||||
context.innerHTML = escaped`
|
|
||||||
<div class="userContext-icon-wrapper open-newtab">
|
|
||||||
<div class="usercontext-icon"
|
<div class="usercontext-icon"
|
||||||
data-identity-icon="${identity.icon}"
|
data-identity-icon="${identity.icon}"
|
||||||
data-identity-color="${identity.color}">
|
data-identity-color="${identity.color}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container-name truncate-text"></div>`;
|
<span class="menu-text">${identity.name}</span>
|
||||||
context.querySelector(".container-name").textContent = identity.name;
|
<span class="menu-right-float">
|
||||||
manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
|
<span class="container-count">${openTabs}</span>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
|
||||||
|
</span>
|
||||||
|
</span>`;
|
||||||
|
|
||||||
fragment.appendChild(tr);
|
fragment.appendChild(tr);
|
||||||
|
|
||||||
tr.appendChild(context);
|
tr.appendChild(td);
|
||||||
|
|
||||||
if (hasTabs) {
|
Logic.addEnterHandler(tr, () => {
|
||||||
tr.appendChild(manage);
|
|
||||||
}
|
|
||||||
|
|
||||||
Logic.addEnterHandler(tr, async (e) => {
|
|
||||||
if (e.target.matches(".open-newtab")
|
|
||||||
|| e.target.parentNode.matches(".open-newtab")
|
|
||||||
|| e.type === "keydown") {
|
|
||||||
try {
|
|
||||||
browser.tabs.create({
|
|
||||||
cookieStoreId: identity.cookieStoreId
|
|
||||||
});
|
|
||||||
window.close();
|
|
||||||
} catch (e) {
|
|
||||||
window.close();
|
|
||||||
}
|
|
||||||
} else if (hasTabs) {
|
|
||||||
Logic.showPanel(P_CONTAINER_INFO, identity);
|
Logic.showPanel(P_CONTAINER_INFO, identity);
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const list = document.querySelector(".identities-list tbody");
|
const list = document.querySelector("#identities-list");
|
||||||
|
|
||||||
list.innerHTML = "";
|
list.innerHTML = "";
|
||||||
list.appendChild(fragment);
|
list.appendChild(fragment);
|
||||||
|
|
@ -804,14 +737,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
||||||
document.addEventListener("mousedown", () => {
|
document.addEventListener("mousedown", () => {
|
||||||
document.removeEventListener("focus", focusHandler);
|
document.removeEventListener("focus", focusHandler);
|
||||||
});
|
});
|
||||||
/* If no container is present disable the Edit Containers button */
|
|
||||||
const editContainer = document.querySelector("#edit-containers-link");
|
|
||||||
if (Logic.identities().length === 0) {
|
|
||||||
editContainer.classList.add("disable-edit-containers");
|
|
||||||
} else {
|
|
||||||
editContainer.classList.remove("disable-edit-containers");
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -963,68 +888,100 @@ Logic.registerPanel(P_CONTAINER_INFO, {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// P_CONTAINERS_EDIT: Makes the list editable.
|
// P_CONTAINER_PICKER: Makes the list editable.
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
Logic.registerPanel(P_CONTAINERS_EDIT, {
|
Logic.registerPanel(P_CONTAINER_PICKER, {
|
||||||
panelSelector: "#edit-containers-panel",
|
panelSelector: "#container-picker-panel",
|
||||||
|
|
||||||
// This method is called when the object is registered.
|
// This method is called when the object is registered.
|
||||||
initialize() {
|
initialize() {
|
||||||
Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
|
// Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
|
||||||
Logic.showPanel(P_CONTAINERS_LIST);
|
// Logic.showPanel(P_CONTAINERS_LIST);
|
||||||
});
|
// });
|
||||||
},
|
},
|
||||||
|
|
||||||
// This method is called when the panel is shown.
|
// This method is called when the panel is shown.
|
||||||
prepare() {
|
prepare() {
|
||||||
const fragment = document.createDocumentFragment();
|
const fragment = document.createDocumentFragment();
|
||||||
|
let pickedFunction;
|
||||||
|
switch (Logic.pickerType) {
|
||||||
|
case OPEN_NEW_CONTAINER_PICKER:
|
||||||
|
pickedFunction = function (identity) {
|
||||||
|
try {
|
||||||
|
browser.tabs.create({
|
||||||
|
cookieStoreId: identity.cookieStoreId
|
||||||
|
});
|
||||||
|
window.close();
|
||||||
|
} catch (e) {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case MANAGE_CONTAINERS_PICKER:
|
||||||
|
pickedFunction = function (identity) {
|
||||||
|
Logic.showPanel(P_CONTAINER_EDIT, identity);
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case REOPEN_IN_CONTAINER:
|
||||||
|
pickedFunction = function (identity) {
|
||||||
|
try {
|
||||||
|
browser.tabs.create({
|
||||||
|
cookieStoreId: identity.cookieStoreId
|
||||||
|
});
|
||||||
|
window.close();
|
||||||
|
} catch (e) {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case ALWAYS_OPEN_IN_PICKER:
|
||||||
|
default:
|
||||||
|
pickedFunction = async function (identity) {
|
||||||
|
const currentTab = await Logic.currentTab();
|
||||||
|
console.log(identity.cookieStoreId)
|
||||||
|
console.log(identity)
|
||||||
|
Logic.setOrRemoveAssignment(
|
||||||
|
currentTab.id,
|
||||||
|
currentTab.url,
|
||||||
|
identity.cookieStoreId,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
window.close();
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
Logic.identities().forEach(identity => {
|
Logic.identities().forEach(identity => {
|
||||||
const tr = document.createElement("tr");
|
const tr = document.createElement("tr");
|
||||||
fragment.appendChild(tr);
|
tr.classList.add("menu-item");
|
||||||
tr.classList.add("container-panel-row");
|
const td = document.createElement("td");
|
||||||
tr.innerHTML = escaped`
|
|
||||||
<td class="userContext-wrapper">
|
td.innerHTML = escaped`
|
||||||
<div class="userContext-icon-wrapper">
|
<div class="menu-icon">
|
||||||
<div class="usercontext-icon"
|
<div class="usercontext-icon"
|
||||||
data-identity-icon="${identity.icon}"
|
data-identity-icon="${identity.icon}"
|
||||||
data-identity-color="${identity.color}">
|
data-identity-color="${identity.color}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container-name truncate-text"></div>
|
<span class="menu-text">${identity.name}</span>`;
|
||||||
</td>
|
|
||||||
<td class="edit-container pop-button edit-container-icon">
|
|
||||||
<img
|
|
||||||
src="/img/container-edit.svg"
|
|
||||||
class="pop-button-image" />
|
|
||||||
</td>
|
|
||||||
<td class="remove-container pop-button delete-container-icon">
|
|
||||||
<img
|
|
||||||
class="pop-button-image"
|
|
||||||
src="/img/container-delete.svg"
|
|
||||||
/>
|
|
||||||
</td>`;
|
|
||||||
tr.querySelector(".container-name").textContent = identity.name;
|
|
||||||
tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`);
|
|
||||||
tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`);
|
|
||||||
|
|
||||||
|
fragment.appendChild(tr);
|
||||||
|
|
||||||
Logic.addEnterHandler(tr, e => {
|
tr.appendChild(td);
|
||||||
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
|
|
||||||
Logic.showPanel(P_CONTAINER_EDIT, identity);
|
Logic.addEnterHandler(tr, () => {
|
||||||
} else if (e.target.matches(".delete-container-icon") || e.target.parentNode.matches(".delete-container-icon")) {
|
pickedFunction(identity);
|
||||||
Logic.showPanel(P_CONTAINER_DELETE, identity);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const list = document.querySelector("#edit-identities-list");
|
const list = document.querySelector("#picker-identities-list");
|
||||||
|
|
||||||
list.innerHTML = "";
|
list.innerHTML = "";
|
||||||
list.appendChild(fragment);
|
list.appendChild(fragment);
|
||||||
|
|
||||||
return Promise.resolve(null);
|
return Promise.resolve(null);
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// P_CONTAINER_EDIT: Editor for a container.
|
// P_CONTAINER_EDIT: Editor for a container.
|
||||||
|
|
|
||||||
116
src/popup.html
116
src/popup.html
|
|
@ -115,33 +115,78 @@
|
||||||
<a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
|
<a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel container-panel hide" id="container-panel">
|
<div class="panel menu-panel container-panel hide" id="container-panel">
|
||||||
<div id="current-tab">
|
<h3 class="title">
|
||||||
<h3>Current Tab</h3>
|
Multi-Account Containers
|
||||||
<div id="current-page"></div>
|
</h3>
|
||||||
<label for="container-page-assigned">
|
<hr>
|
||||||
<input type="checkbox" id="container-page-assigned" />
|
<table class="menu">
|
||||||
<span class="truncate-text">
|
<tr class="menu-item" id="open-new-tab-in">
|
||||||
Always open in
|
<td>
|
||||||
<span id="current-container"></span>
|
<img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
|
||||||
|
<span class="menu-text">Open New Tab in...</span>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="menu-item" id="reopen-site-in">
|
||||||
|
<td>
|
||||||
|
<img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
|
||||||
|
<span class="menu-text">Reopen This Site in...</span>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<table class="menu">
|
||||||
|
<tr class="menu-item" id="sort-containers-link">
|
||||||
|
<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>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="menu-item" id="always-open-in">
|
||||||
|
<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>
|
||||||
|
<span class="menu-arrow">
|
||||||
|
<img alt="Container Info" src="/img/arrow-icon-right.svg" />
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<div class="sub-header">
|
||||||
|
Containers
|
||||||
</div>
|
</div>
|
||||||
<div class="container-panel-controls">
|
<div class="scrollable identities-list">
|
||||||
<a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
|
<table class="menu" id="identities-list">
|
||||||
|
<tr class="menu-item">
|
||||||
|
<td>
|
||||||
|
<div class="menu-icon">
|
||||||
|
<div class="usercontext-icon"
|
||||||
|
data-identity-icon="pet"
|
||||||
|
data-identity-color="blue">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrollable panel-content" tabindex="-1">
|
</div>
|
||||||
<table class="identities-list">
|
<span class="menu-text">Default</span>
|
||||||
<tbody></tbody>
|
<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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer edit-identities">
|
<div class="bottom-btn" id="manage-containers-link">
|
||||||
<div class="edit-containers-text panel-footer-secondary">
|
Manage Containers
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -170,19 +215,26 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="panel edit-containers-panel hide" id="edit-containers-panel">
|
<div class="panel container-picker-panel hide" id="container-picker-panel">
|
||||||
<div class="panel-header">
|
<h3 class="title">
|
||||||
<h3 class="panel-header-text">Edit Containers</h3>
|
Multi-Account Containers
|
||||||
|
</h3>
|
||||||
|
<hr>
|
||||||
|
<div class="scrollable identities-list">
|
||||||
|
<table class="menu" id="picker-identities-list">
|
||||||
|
<tr class="menu-item">
|
||||||
|
<td>
|
||||||
|
<div class="menu-icon">
|
||||||
|
<div class="usercontext-icon"
|
||||||
|
data-identity-icon="pet"
|
||||||
|
data-identity-color="blue">
|
||||||
</div>
|
</div>
|
||||||
<div class="scrollable panel-content">
|
</div>
|
||||||
<table class="unstriped">
|
<span class="menu-text">Default</span>
|
||||||
<tbody id="edit-identities-list"></tbody>
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-footer edit-containers-panel-footer">
|
|
||||||
<a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">
|
|
||||||
<img src="/img/container-arrow.svg"/>Exit Edit Mode</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue