Add support for Proton.

Tested with Default, Dark, and Light theme of Windows and MacOS Big Sur. Both OS are on dark theme. Tested container tabs (no highlight) and tabs overflow scrollbox. Added clearer README on what is regularly tested, and support situation.
wilfredwee · May 3, 2021 · 4273a36 · 4273a36
2 parents d43ef0d + 47adfd3
commit 4273a36
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # 🐺 Photon Australis
-Bringing sexy curves back to Firefox Photon.
+Bringing sexy curves back to Firefox Photon AND Proton.
 
 ![alt text](assets/images/screen-1.png "Photon Australis Dark Main Window")
 <br />
@@ -14,10 +14,17 @@ Bringing sexy curves back to Firefox Photon.
 ## Why?
 Because all you sexy Firefox users deserve something sexier than ugly, blocky square. (Who wants to be square, right?)
 
+## ⚠ Support note ⚠:
+This is a ***NEW*** release that supports Firefox Proton (version 89+). If you are running an older version of Firefox with Photon, please visit [this link](https://github.com/wilfredwee/photon-australis/tree/0.10).
+
+This is regular used and tested by me in these following configurations:
+1. Firefox Developer Edition on Dark Theme + Windows 10 on Dark Theme.
+1. Firefox Developer Edition on Default Theme + MacOS on Dark Theme.
+
 ## 😍 How do I get this sexy thing? 😍
 Since Firefox 57+, the only way to customize your browser UI is through `userChrome.css`. Learn more [here](http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes).
 
-Rough instructions:
+### General Instructions:
 1. Go to your Firefox browser, type `about:config` in your url bar.
 1. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set it to `true`
 1. Type `about:profiles` in your url bar.
@@ -33,9 +40,15 @@ Rough instructions:
 <br/>**WARNING:** Newer versions of Firefox with Mojave or Windows 10 Dark Mode will cause Firefox to use the `Dark` theme by default. In this case, you should use the [userChrome-dark.css](./userChrome-dark.css) theme.
 1. Restart Firefox and enjoy some sexy curves :D
 
+### Special Instructions for Default Theme users:
+If you are using the [Default Theme](./userChrome-default.css) but your MacOS is using the Dark Theme, you can go to `about:config` -> search for `ui.systemUsesDarkTheme` and **ADD** (click the '+' sign) a ***Number***. Set the value to `0`. Restart the browser.
+
 ## 😞 Something is broken 😞
-Fret not! Please create an [issue](https://github.com/wilfredwee/photon-australis/issues/new) and I'll see what I can do.
+Fell free to create an [issue](https://github.com/wilfredwee/photon-australis/issues/new) and I'll see what I can do. However, I'm unable to guarantee quick (or any) responses as this project is in maintenance mode.
 
 ## FAQ
 ### How do I add back tab separators and borders around the tabs?
 Please follow these instructions created by a helpful Redditor: https://www.reddit.com/r/FirefoxCSS/comments/bzd5dz/help_with_australis_css/
+
+### Nothing has changed for me
+Make sure that your file extension for `userChrome.css` is correct. Most likely a problem for Windows, refer to [this issue](https://github.com/wilfredwee/photon-australis/issues/104). 
diff --git a/userChrome-dark.css b/userChrome-dark.css
@@ -1,6 +1,7 @@
 :root {
   --tab-curve-width: 30px;
   --tabs-border: transparent !important;
+  --tab-border-radius: 0 !important;
 }
 
 .tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
@@ -20,6 +21,8 @@
 /* When the window is maximized, the first pinned tab is properly displayed. */
 #TabsToolbar  {
   padding-inline-start: 15px !important;
+  min-height: 33px !important;
+  max-height: 33px !important;
 }
 
 .tabbrowser-tab[first-visible-tab="true"] {
@@ -38,7 +41,7 @@
   border: none !important;
 }
 
-/* Styles to account for when window is resized small, and margin-inline-start kicks in */
+/* Styles to account for when tab scrollbar is visible, and margin-inline-start kicks in */
 .tabbrowser-tab[pinned="true"] {
   width: 40px !important; /* Actual photon pinned tab is 41px, but 40px removes pixelated artifact from pinned tab favicon */
 }
@@ -53,6 +56,32 @@
   border: none !important;
 }
 
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+  padding-inline: 0px !important;
+}
+
+.tab-background {
+  margin-bottom: 0 !important;
+  display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+  flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+  margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+  background-color: rgba(0,0,0,0) !important;
+  height: inherit !important;
+  border-radius: 0px !important;
+  margin: 0px !important;
+}
+
 /* Windows 7 specific */
 @media (-moz-os-version: windows-win7) {
   .tabbrowser-tab {
@@ -187,17 +216,17 @@
 
 /* Color specific customizations */
 :root {
-  --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
+  --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(43, 42, 51);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
 
-  --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
+  --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.065 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.065 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(43, 42, 51);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
 
   --background-selected-middle:
     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
     linear-gradient(
       transparent
       2px,
-      rgb(50, 50, 52) 2px,
-      rgb(50, 50, 52)
+      rgb(42, 43, 51) 2px,
+      rgb(42, 43, 51)
     ),
     none !important;
 
@@ -234,6 +263,7 @@
   }
 }
 
+/* Dark theme */
 @media (-moz-windows-accent-color-in-titlebar) {
   :root[tabsintitlebar]:not(:-moz-window-inactive) {
     background-color: #000000 !important;
@@ -248,10 +278,15 @@
   background-image: var(--svg-selected-after) !important;
 }
 
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
   background-image: var(--background-selected-middle) !important;
 }
 
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+  box-shadow: none !important;    
+}
+
+
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
   background-image: var(--svg-hover-before) !important;
 }
@@ -260,7 +295,7 @@
   background-image: var(--svg-hover-after) !important;
 }
 
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
   background-image: var(--background-hover-middle) !important;
 }
 

diff --git a/userChrome-default.css b/userChrome-default.css
@@ -1,6 +1,7 @@
 :root {
   --tab-curve-width: 30px;
   --tabs-border: transparent !important;
+  --tab-border-radius: 0 !important;
 }
 
 .tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
@@ -20,6 +21,8 @@
 /* When the window is maximized, the first pinned tab is properly displayed. */
 #TabsToolbar  {
   padding-inline-start: 15px !important;
+  min-height: 33px !important;
+  max-height: 33px !important;
 }
 
 .tabbrowser-tab[first-visible-tab="true"] {
@@ -53,6 +56,52 @@
   border: none !important;
 }
 
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+  padding-inline: 0px !important;
+}
+
+.tab-background {
+  margin-bottom: 0 !important;
+  display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+  flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+  margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+  background-color: rgba(0,0,0,0) !important;
+  height: inherit !important;
+  border-radius: 0px !important;
+  margin: 0px !important;
+}
+
+/* Default theme customization: Vibrant (transparent, dark) titlebar for mac */
+:root:is([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
+  appearance: auto !important;
+  -moz-default-appearance: -moz-mac-vibrant-titlebar-dark !important;
+  -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark !important;
+  background-color: #232323 !important;
+  color: hsl(240, 9%, 98%) !important;
+  text-shadow: none !important;
+}
+
+#navigator-toolbox {
+  background-color: transparent !important;
+}
+
+#new-tab-button > .toolbarbutton-icon,
+#tabs-newtab-button > .toolbarbutton-icon {
+  fill: rgb(249,249,250) !important;
+}
+/* End default theme customizations */
+
 /* Windows 7 specific */
 @media (-moz-os-version: windows-win7) {
   .tabbrowser-tab {
@@ -242,9 +291,12 @@
   background-image: var(--svg-selected-after) !important;
 }
 
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
   background-image: var(--background-selected-middle) !important;
+}
 
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+  box-shadow: none !important;
 }
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
@@ -255,9 +307,8 @@
   background-image: var(--svg-hover-after)  !important;
 }
 
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
   background-image: var(--background-hover-middle) !important;
-
 }
 
 #tabs-newtab-button:hover {

diff --git a/userChrome-light.css b/userChrome-light.css
@@ -1,6 +1,7 @@
 :root {
   --tab-curve-width: 30px;
   --tabs-border: transparent !important;
+  --tab-border-radius: 0 !important;
 }
 
 #navigator-toolbox:-moz-lwtheme {
@@ -24,6 +25,8 @@
 /* When the window is maximized, the first pinned tab is properly displayed. */
 #TabsToolbar  {
   padding-inline-start: 15px !important;
+  min-height: 33px !important;
+  max-height: 33px !important;
 }
 
 .tabbrowser-tab[first-visible-tab="true"] {
@@ -57,6 +60,32 @@
   border: none !important;
 }
 
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+  padding-inline: 0px !important;
+}
+
+.tab-background {
+  margin-bottom: 0 !important;
+  display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+  flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+  margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+  background-color: rgba(0,0,0,0) !important;
+  height: inherit !important;
+  border-radius: 0px !important;
+  margin: 0px !important;
+}
+
 /* Windows 7 specific */
 @media (-moz-os-version: windows-win7) {
   .tabbrowser-tab {
@@ -245,10 +274,14 @@
   background-image: var(--svg-selected-after) !important;
 }
 
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
  background-image: var(--background-selected-middle) !important;
 }
 
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+  box-shadow: none !important;
+}
+
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
   background-image: var(--svg-hover-before) !important;
 }
@@ -257,7 +290,7 @@
   background-image: var(--svg-hover-after) !important;
 }
 
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
   background-image: var(--background-hover-middle) !important;
 
 }