Merge pull request #210 from QNetITQ/WaveFox-Nightly

WaveFox v1.7.131
QNetITQ · Sep 18, 2024 · 7d07dd9 · 7d07dd9
2 parents be684b5 + 520153e
commit 7d07dd9
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -6,13 +6,13 @@
 
 ## Installation
 
-[Download Firefox](https://www.mozilla.org/en-US/firefox/all/#product-desktop-release) / [Download WaveFox](https://github.com/QNetITQ/WaveFox/releases)
+[Download Firefox](https://www.mozilla.org/en-US/firefox/all/#product-desktop-release) / [Download WaveFox](https://github.com/QNetITQ/WaveFox/releases) / [WaveFox Nightly](https://github.com/QNetITQ/WaveFox/tree/WaveFox-Nightly)
 
 <details>
-  <summary>WaveFox v1.7.130+</summary>
+  <summary>WaveFox v1.7.131</summary>
 
 - ##### Minimum Requirements
-  - Firefox 130+
+  - Firefox 131
   - Windows / MacOS / Linux
 
 - Download the `chrome` folder and put it in your user profile folder
@@ -94,22 +94,21 @@ Works only with the system theme.
 - `userChrome.Toolbar.Transparency.VeryHigh.Enabled`
 
 ### Tab Bar Shadows
-Incompatible with AMO themes.
 ![изображение](https://user-images.githubusercontent.com/85301851/152011749-4d5619b3-0fd8-40f9-a3dc-96be31839971.png)
 
 ##### Shadows (Light Theme)
 - `userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled`
 - `userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled`
 - `userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled`
 - `userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled`
-  - `userChrome.LightTheme.Tabs.Shadows.Blur.Low.Enabled` (Shadow like border)
+  - `userChrome.LightTheme.Tabs.Borders.Enabled` (Shadow like border)
 
 ##### Shadows (Dark Theme)
 - `userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled`
 - `userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled`
 - `userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled`
 - `userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled`
-  - `userChrome.DarkTheme.Tabs.Shadows.Blur.Low.Enabled` (Shadow like border)
+  - `userChrome.DarkTheme.Tabs.Borders.Enabled` (Shadow like border)
 
 ### Tab Separators
 ![изображение](https://user-images.githubusercontent.com/85301851/152351312-f6ad4578-e7d5-40b7-8b2d-49388a750f54.png)
@@ -129,7 +128,7 @@ By default context menus follow the selected interface density, but it is possib
 - `userChrome.Menu.Size.Touch.Enabled`
 
 ### Lepton Icons (Menu icons)
-This is third-party code. I will update this code according to the original source.
+This is third-party code. I will update this code according to the original source. The first two keys are mandatory. The rest can be turned on arbitrarily or all together.
 
 ![изображение](https://user-images.githubusercontent.com/85301851/151192118-0cbdb5a7-a77f-4275-8841-2ac321657c86.png)
 
@@ -174,6 +173,11 @@ This is third-party code. I will update this code according to the original sour
 - `userChrome.OneLine.TabBarFirst.Enabled`
 - `userChrome.OneLine.NavBarFirst.Enabled`
 
+### Rounded Web Page (Experimentally)
+![изображение](https://github.com/user-attachments/assets/93ffab37-bbe5-4b17-993d-cc084fd341ad)
+
+- `userChrome.WebPage.Rounding.Enabled`
+
 </details>
 
 <details>

diff --git a/chrome/modules/horizontal_tabs/wavefox_rounded_web_page b/chrome/modules/horizontal_tabs/wavefox_rounded_web_page
@@ -0,0 +1,13 @@
+@media (-moz-bool-pref: "userChrome.WebPage.Rounding.Enabled")
+{
+    :root:not([inFullscreen], [inDOMFullscreen]) #browser > #tabbrowser-tabbox
+    {
+        margin: 8px !important;
+        filter: var(--outer-drop-shadow) !important;
+
+        #tabbrowser-tabpanels
+        {
+            clip-path: xywh(0 0 100% 100% round 8px) !important;
+        }
+    }
+}
diff --git a/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css b/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css
@@ -2,11 +2,11 @@
 {
     .tabbrowser-tab[visuallyselected][usercontextid] .tab-background
     {
-        box-shadow: inset 0 -2px 0 var(--tab-loading-fill) !important;
+        box-shadow: inset 0 -2px 0 var(--tab-selected-outline-color) !important;
     }
 
     .tabbrowser-tab[visuallyselected]:not([usercontextid]) .tab-background
     {
-        box-shadow: inset 0 2px 0 var(--tab-loading-fill) !important;
+        box-shadow: inset 0 2px 0 var(--tab-selected-outline-color) !important;
     }
 }
diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css b/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css
@@ -8,7 +8,7 @@
         :root
         {
             --shadow-blur: 4px;
-            --shadow-color: rgb(0, 0, 0);
+            --shadow-color: var(--tab-selected-outline-color);
 
             --outer-box-shadow: 0
                                 0
@@ -30,7 +30,7 @@
 
             /* ---------- Blur ---------- */
 
-            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Blur.Low.Enabled")
+            @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Borders.Enabled")
             {
                 --shadow-blur: 2px;
             }
@@ -58,6 +58,20 @@
             }
         }
 
+        /* ---------- System Theme / Light Theme ---------- */
+
+        :root:is(:not([lwtheme]), [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"])
+        {
+            --shadow-color: rgb(0,0,0);
+        }
+
+        /* ---------- AMO Theme ---------- */
+
+        :root[lwtheme]:not([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"])
+        {
+            --shadow-saturation: 100%;
+        }
+
         /* ---------- Tab Bar ---------- */
 
         #TabsToolbar
@@ -84,15 +98,8 @@
 
         .tabbrowser-tab[visuallyselected]
         {
-            position: relative;
-            z-index: 2 !important;
             filter: var(--outer-drop-shadow);
         }
-
-        #tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected])
-        {
-            z-index: 0 !important;
-        }
     }
 }
 
@@ -106,7 +113,7 @@
         :root
         {
             --shadow-blur: 4px;
-            --shadow-color: rgb(0, 0, 0);
+            --shadow-color: var(--tab-selected-outline-color);
 
             --outer-box-shadow: 0
                                 0
@@ -128,7 +135,7 @@
 
             /* ---------- Blur ---------- */
 
-            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Blur.Low.Enabled")
+            @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Borders.Enabled")
             {
                 --shadow-blur: 2px;
             }
@@ -155,6 +162,20 @@
                 --shadow-saturation: 100%;
             }
         }
+
+        /* ---------- System Theme / Dark Theme ---------- */
+
+        :root:is(:not([lwtheme]), [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"])
+        {
+            --shadow-color: rgb(0,0,0);
+        }
+
+        /* ---------- AMO Theme ---------- */
+
+        :root[lwtheme]:not([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"])
+        {
+            --shadow-saturation: 100%;
+        }
 
         /* ---------- Tab Bar ---------- */
 
@@ -182,15 +203,8 @@
 
         .tabbrowser-tab[visuallyselected]
         {
-            position: relative;
-            z-index: 2 !important;
             filter: var(--outer-drop-shadow);
         }
-
-        #tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected])
-        {
-            z-index: 0 !important;
-        }
     }
 }
 

diff --git a/chrome/modules/horizontal_tabs/wavefox_tabs.css b/chrome/modules/horizontal_tabs/wavefox_tabs.css
@@ -78,42 +78,6 @@
     }
 }
 
-/* ---------------------------------------- System Theme ---------------------------------------- */
-
-@media not (prefers-contrast)
-{
-    :root:not([lwtheme])
-    {
-        .tabbrowser-tab[visuallyselected]
-        {
-            color: var(--toolbar-color) !important;
-
-            .tab-background
-            {
-                background-color: var(--toolbar-bgcolor) !important;
-            }
-        }
-    }
-}
-
-/* ---------------------------------------- Light Theme / Dark Theme ---------------------------------------- */
-
-:root:is(
-         [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"],
-         [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"]
-        )
-{
-    .tabbrowser-tab[visuallyselected]
-    {
-        color: var(--toolbar-color) !important;
-
-        .tab-background
-        {
-            background-color: var(--toolbar-bgcolor) !important;
-        }
-    }
-}
-
 /* ---------------------------------------- Main Window ---------------------------------------- */
 
 :root
@@ -169,10 +133,44 @@
 .tabbrowser-tab
 {
     --tab-label-mask-size: 0px !important;
-    overflow: visible !important;
-    justify-content: flex-end !important;
+    overflow-clip-margin: var(--tab-min-height) !important;
     padding-inline: var(--tab-inline-padding) !important;
 
+    &[visuallyselected]
+    {
+        color: var(--toolbar-color) !important;
+        position: relative;
+        z-index: 2 !important;
+
+        .tab-background
+        {
+            --gradient-background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
+            --gradient-background-attachment: fixed;
+            --gradient-background-size: auto auto;
+            --gradient-background-position: left top;
+            --gradient-background-repeat: no-repeat;
+
+            --amo-background-image-1: var(--lwt-header-image, none);
+            --amo-background-attachment-1: fixed;
+            --amo-background-size-1: auto auto;
+            --amo-background-position-1: right top;
+            --amo-background-repeat-1: no-repeat;
+
+            --amo-background-image-2: var(--lwt-additional-images, none);
+            --amo-background-attachment-2: fixed, fixed, fixed;
+            --amo-background-size-2: auto auto, auto auto, auto auto;
+            --amo-background-position-2: var(--lwt-background-alignment);
+            --amo-background-repeat-2: var(--lwt-background-tiling);
+
+            background-color: transparent !important;
+            background-image: var(--gradient-background-image), var(--amo-background-image-1), var(--amo-background-image-2) !important;
+            background-attachment: var(--gradient-background-attachment), var(--amo-background-attachment-1), var(--amo-background-attachment-2) !important;
+            background-size: var(--gradient-background-size), var(--amo-background-size-1), var(--amo-background-size-2) !important;
+            background-position: var(--gradient-background-position), var(--amo-background-position-1), var(--amo-background-position-2) !important;
+            background-repeat: var(--gradient-background-repeat), var(--amo-background-repeat-1), var(--amo-background-repeat-2) !important;
+        }
+    }
+
     &:not([visuallyselected])
     {
         color: inherit !important;
@@ -186,6 +184,11 @@
         {
             background-color: var(--toolbarbutton-active-background) !important;
         }
+
+        #tabbrowser-tabs[movingtab] &
+        {
+            z-index: 0 !important;
+        }
     }
 
     .tab-background
@@ -213,9 +216,9 @@
     }
 }
 
-.tab-drop-indicator
+#tabbrowser-tabs[overflow] .tab-drop-indicator
 {
-    opacity: 0 !important;
+    inset-inline-start: var(--tab-first-last-inline-margin) !important;
 }
 
 .tabbrowser-tab[pending] .tab-icon-image
@@ -434,7 +437,6 @@
     box-sizing: content-box !important;
     padding-inline: var(--tab-scroll-animation-inline-padding) !important;
     margin-inline: var(--tab-scroll-animation-inline-margin) !important;
-    overflow: clip !important;
     overflow-clip-margin: 0px !important;
 }
 

diff --git a/chrome/userChrome.css b/chrome/userChrome.css