From b83c16260278ab4e46a610f215dc7817023362e6 Mon Sep 17 00:00:00 2001 From: Yunsup Sim Date: Tue, 15 Jun 2021 23:57:21 +0900 Subject: [PATCH 01/14] Feat: Change New Tab button #95 --- userChrome.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/userChrome.css b/userChrome.css index 8a94e88..a0fac2e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -326,6 +326,14 @@ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { margin-inline-end: 4px !important; } + + /* New tab button changed ***************************************************/ + #TabsToolbar #tabbrowser-arrowscrollbox #tabs-newtab-button.toolbarbutton-1 { + margin: calc(var(--tab-block-margin) / 2) 0 calc(-1 * var(--tab-block-margin) / 2) !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ + } + #TabsToolbar #tabs-newtab-button.toolbarbutton-1 > image.toolbarbutton-icon { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ + } /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { From 07f581d9fff6284a772cab8c0b3f264ed423a853 Mon Sep 17 00:00:00 2001 From: Yunsup Sim Date: Wed, 16 Jun 2021 00:23:26 +0900 Subject: [PATCH 02/14] Fix: Fix not working on 89 version --- userChrome.css | 1 + 1 file changed, 1 insertion(+) diff --git a/userChrome.css b/userChrome.css index a0fac2e..732421a 100644 --- a/userChrome.css +++ b/userChrome.css @@ -330,6 +330,7 @@ /* New tab button changed ***************************************************/ #TabsToolbar #tabbrowser-arrowscrollbox #tabs-newtab-button.toolbarbutton-1 { margin: calc(var(--tab-block-margin) / 2) 0 calc(-1 * var(--tab-block-margin) / 2) !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ + padding: 2px var(--toolbarbutton-outer-padding) 0; /* Original: 0 var(--toolbarbutton-outer-padding) */ } #TabsToolbar #tabs-newtab-button.toolbarbutton-1 > image.toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ From 7c6f50dd32dfd3f0403928ce72283dc5e62ecf03 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 16 Jun 2021 10:39:19 +0900 Subject: [PATCH 03/14] Clean: New tab button - selector, trailing white space --- userChrome.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 732421a..79a3e86 100644 --- a/userChrome.css +++ b/userChrome.css @@ -326,13 +326,13 @@ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { margin-inline-end: 4px !important; } - - /* New tab button changed ***************************************************/ - #TabsToolbar #tabbrowser-arrowscrollbox #tabs-newtab-button.toolbarbutton-1 { + + /* New tab button - Looks like tab ******************************************/ + #tabs-newtab-button { margin: calc(var(--tab-block-margin) / 2) 0 calc(-1 * var(--tab-block-margin) / 2) !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ padding: 2px var(--toolbarbutton-outer-padding) 0; /* Original: 0 var(--toolbarbutton-outer-padding) */ } - #TabsToolbar #tabs-newtab-button.toolbarbutton-1 > image.toolbarbutton-icon { + #tabs-newtab-button > .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ } From 7a020b35476e9ed1a667acc295568a93cb3c37a1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 16 Jun 2021 10:41:05 +0900 Subject: [PATCH 04/14] Fix: New tab button - Latest tab margin adjust --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 79a3e86..2dc3059 100644 --- a/userChrome.css +++ b/userChrome.css @@ -324,7 +324,7 @@ /* Latest Tab & New tab margin */ #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { - margin-inline-end: 4px !important; + margin-inline-end: 1px !important; } /* New tab button - Looks like tab ******************************************/ From bbd5c994f0fef7dc6094b930ca38eefbba1bde7e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Jun 2021 09:34:59 +0900 Subject: [PATCH 05/14] Fix: Reduce Padding - tab-block-margin compatibility at nightly --- userChrome.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 2dc3059..6e8ff6a 100644 --- a/userChrome.css +++ b/userChrome.css @@ -66,6 +66,7 @@ :root { /* Tab Bar */ --proton-tab-block-margin: 2px !important; /* Original: 4px */ + --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ @@ -86,6 +87,7 @@ :root[uidensity=touch] { /* Tab Bar - Like Original */ --proton-tab-block-margin: 4px !important; /* Original: 4px */ + --tab-block-margin: 4px !important; /* New version of --proton-tab-block-margin */ --inline-tab-padding: 8px !important; /* Original: 8px */ /* Panel - Like Original */ @@ -329,9 +331,9 @@ /* New tab button - Looks like tab ******************************************/ #tabs-newtab-button { - margin: calc(var(--tab-block-margin) / 2) 0 calc(-1 * var(--tab-block-margin) / 2) !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ - padding: 2px var(--toolbarbutton-outer-padding) 0; /* Original: 0 var(--toolbarbutton-outer-padding) */ + margin: var(--tab-block-margin) 0px 0px !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ } + #tabs-newtab-button > .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ } From b2282ba69befd7c1dc30f8e1d2806543d2a09b53 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Jun 2021 14:45:11 +0900 Subject: [PATCH 06/14] Add: New tab button - Bottom rounded corner --- ...-corner.svg => tab-bottom-corner-left.svg} | 0 icons/tab-bottom-corner-right.svg | 5 ++++ userChrome.css | 25 +++++++++++++++++-- 3 files changed, 28 insertions(+), 2 deletions(-) rename icons/{tab-bottom-corner.svg => tab-bottom-corner-left.svg} (100%) create mode 100644 icons/tab-bottom-corner-right.svg diff --git a/icons/tab-bottom-corner.svg b/icons/tab-bottom-corner-left.svg similarity index 100% rename from icons/tab-bottom-corner.svg rename to icons/tab-bottom-corner-left.svg diff --git a/icons/tab-bottom-corner-right.svg b/icons/tab-bottom-corner-right.svg new file mode 100644 index 0000000..b443ef3 --- /dev/null +++ b/icons/tab-bottom-corner-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/userChrome.css b/userChrome.css index 6e8ff6a..10b31be 100644 --- a/userChrome.css +++ b/userChrome.css @@ -274,7 +274,7 @@ stroke: var(--tabs-border-color, transparent) !important; -moz-context-properties: fill, stroke !important; - background-image: url(./icons/tab-bottom-corner.svg); + /* Image */ background-size: var(--tab-corner-rounding); background-repeat: no-repeat; background-position-y: bottom; @@ -282,11 +282,12 @@ :root[lwtheme="true"] tab[visuallyselected] > stack::before { left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important; + background-image: url(./icons/tab-bottom-corner-left.svg); } :root[lwtheme="true"] tab[visuallyselected] > stack::after { left: auto; right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - transform: scaleX(-1) !important; + background-image: url(./icons/tab-bottom-corner-right.svg); } /** Unselected Tab - Divide line ********************************************/ @@ -338,6 +339,26 @@ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ } + /* Coner Rounding */ + #tabs-newtab-button:hover { + /* Color */ + fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Hardcoded compatibility var(--toolbarbutton-hover-background) */ + -moz-context-properties: fill !important; + + /* Corner Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom, right var(--newtab-position) bottom; + background-size: var(--tab-corner-rounding); + } + + #tabs-newtab-button .toolbarbutton-icon { + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); + fill-opacity: var(--toolbarbutton-icon-fill-opacity); + } + /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { padding-inline-start: 8px !important; From 458859fe730a04567b336aa172960c34bbf6a175 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Jun 2021 15:24:02 +0900 Subject: [PATCH 07/14] Fix: New tab button - Top margin --- userChrome.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 10b31be..9b92955 100644 --- a/userChrome.css +++ b/userChrome.css @@ -200,7 +200,7 @@ } .tab-content { - margin-top: var(--proton-tab-block-margin); + margin-top: var(--tab-block-margin); } .tab-stack { @@ -332,7 +332,11 @@ /* New tab button - Looks like tab ******************************************/ #tabs-newtab-button { - margin: var(--tab-block-margin) 0px 0px !important; /* Original: 0 0 var(--tabs-navbar-shadow-size) !important */ + /* Original: + margin: 0 0 var(--tabs-navbar-shadow-size) !important + => Can't ovrride style. Therefore, we should approach it by bypass. + */ + transform: translateY(var(--tab-block-margin)); } #tabs-newtab-button > .toolbarbutton-icon { @@ -349,7 +353,7 @@ --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom, right var(--newtab-position) bottom; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-shadow-size); background-size: var(--tab-corner-rounding); } From 6651e9797f3094003f52e06a3b84a0c6a124ea51 Mon Sep 17 00:00:00 2001 From: Yunsup Sim Date: Mon, 28 Jun 2021 16:32:15 +0900 Subject: [PATCH 08/14] Fix: New tab Icon - Fix icon vertical align --- userChrome.css | 1 + 1 file changed, 1 insertion(+) diff --git a/userChrome.css b/userChrome.css index 9b92955..35256dd 100644 --- a/userChrome.css +++ b/userChrome.css @@ -358,6 +358,7 @@ } #tabs-newtab-button .toolbarbutton-icon { + padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); From f12b850c504ffb6a5613843b7fbd6256b4f3c50d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Jun 2021 17:22:05 +0900 Subject: [PATCH 09/14] Fix: Bottom corner rounding - decimal point --- userChrome.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 35256dd..fb1f883 100644 --- a/userChrome.css +++ b/userChrome.css @@ -253,7 +253,7 @@ /** Selected Tab - Bottom Rounded Corner ************************************/ #tabbrowser-tabs { - --tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 1px; } @@ -350,11 +350,12 @@ -moz-context-properties: fill !important; /* Corner Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + --newtab-corner-rounding: calc(var(--tab-corner-rounding) + 2px); + --newtab-position: calc((var(--newtab-corner-rounding) / 2) * -1); background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); background-repeat: no-repeat; background-position: left var(--newtab-position) bottom var(--tabs-navbar-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-shadow-size); - background-size: var(--tab-corner-rounding); + background-size: var(--newtab-corner-rounding); } #tabs-newtab-button .toolbarbutton-icon { From f4bd36e0760188a687bfdb733f1c381aa2007db4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 10:40:48 +0900 Subject: [PATCH 10/14] Fix: Unselected Tab - Divide line with new tab --- userChrome.css | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/userChrome.css b/userChrome.css index fb1f883..24cffa5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -291,14 +291,20 @@ } /** Unselected Tab - Divide line ********************************************/ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox { + position: absolute; + } + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after { + #tabs-newtab-button:not(:hover)::before { /* Box Model */ content: ""; - display: block; + display: block; position: absolute; - top: 50%; + + /* Position */ + top: 50%; + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); /* Bar shape */ width: 1px; @@ -307,19 +313,12 @@ /* Bar Color */ opacity: var(--tab-separator-opacity); - transition: opacity .2s var(--ease-basic) !important; - background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ - } - - .tab-background::before { - transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; - } - .tabbrowser-tab[last-visible-tab] .tab-background::after { - right: 0; - transform: translateX(.5px) translateY(calc(-50% + 1px)) !important; + transition: opacity .2s var(--ease-basic); + background-color: color-mix(in srgb, currentColor 20%, transparent); /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ } .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before, + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabs-newtab-button::before, .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before, #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { opacity: 0 !important; From 511427de1c4a04cd050bcd0a63fe8f680770ea34 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 10:48:58 +0900 Subject: [PATCH 11/14] Fix: New tab button - divide line compatibility --- userChrome.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 24cffa5..3371f00 100644 --- a/userChrome.css +++ b/userChrome.css @@ -335,7 +335,8 @@ margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't ovrride style. Therefore, we should approach it by bypass. */ - transform: translateY(var(--tab-block-margin)); + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --tabs-navbar-original-shadow-size: 1px; } #tabs-newtab-button > .toolbarbutton-icon { @@ -345,7 +346,7 @@ /* Coner Rounding */ #tabs-newtab-button:hover { /* Color */ - fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Hardcoded compatibility var(--toolbarbutton-hover-background) */ + fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */ -moz-context-properties: fill !important; /* Corner Image */ @@ -353,7 +354,7 @@ --newtab-position: calc((var(--newtab-corner-rounding) / 2) * -1); background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-shadow-size); + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); background-size: var(--newtab-corner-rounding); } From f068d811035dff99787b1161af74a0263dd4d55a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 10:52:26 +0900 Subject: [PATCH 12/14] Fix: New tab button - Make same rounding like Selected tab --- userChrome.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 3371f00..9f1a546 100644 --- a/userChrome.css +++ b/userChrome.css @@ -350,12 +350,11 @@ -moz-context-properties: fill !important; /* Corner Image */ - --newtab-corner-rounding: calc(var(--tab-corner-rounding) + 2px); - --newtab-position: calc((var(--newtab-corner-rounding) / 2) * -1); + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); background-repeat: no-repeat; background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--newtab-corner-rounding); + background-size: var(--tab-corner-rounding); } #tabs-newtab-button .toolbarbutton-icon { From 9578c318b34205caee99efaf2c638b3c44ab482d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 30 Jun 2021 01:33:47 +0900 Subject: [PATCH 13/14] Fix: New tab button - position at windows compatibility --- userChrome.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index e980743..c190f24 100644 --- a/userChrome.css +++ b/userChrome.css @@ -351,6 +351,10 @@ */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ --tabs-navbar-original-shadow-size: 1px; + + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; } #tabs-newtab-button > .toolbarbutton-icon { @@ -372,7 +376,7 @@ } #tabs-newtab-button .toolbarbutton-icon { - padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4)) !important; + padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); From 16d3b9be4167e6536ac558f1eb25dc7fc84b89d8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 30 Jun 2021 12:09:01 +0900 Subject: [PATCH 14/14] Doc: CREDIT - move to `Contributors` => `Major Contributors` --- CREDITS | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CREDITS b/CREDITS index bd5eea3..457aee8 100644 --- a/CREDITS +++ b/CREDITS @@ -66,6 +66,10 @@ N: Jan Janssen E: medhefgo@web.de W: https://github.com/medhefgo +N: Yunsup Sim +E: pedogunu@gmail.com +W: https://ethansup.net + ---------- Contributors @@ -93,7 +97,3 @@ E: sanderthedragon@zoho.com N: Sylvain E: B00ze64@hotmail.com - -N: Yunsup Sim -E: pedogunu@gmail.com -W: https://ethansup.net