Merge pull request #236 from QNetITQ/WaveFox-Nightly

WaveFox v1.8.135
QNetITQ · Jan 24, 2025 · 9c9459c · 9c9459c
2 parents ee86985 + b12edbf
commit 9c9459c
Show file tree

Hide file tree

Showing 7 changed files with 345 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -9,10 +9,10 @@
 [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.8.134</summary>
+  <summary>WaveFox v1.8.135</summary>
 
 - ##### Minimum Requirements
-  - Firefox 134
+  - Firefox 135
   - Windows / MacOS / Linux
 
 - Download the `chrome` folder and put it in your user profile folder

diff --git a/chrome/modules/horizontal_tabs/wavefox_one_line.css b/chrome/modules/horizontal_tabs/wavefox_one_line.css
@@ -79,7 +79,7 @@
     {
         @media (-moz-windows-accent-color-in-titlebar) or (-moz-windows-mica)
         {
-            :root[tabsintitlebar]:not([lwtheme]) #nav-bar
+            :root[customtitlebar]:not([lwtheme]) #nav-bar
             {
                 color: inherit !important;
                 --toolbarbutton-icon-fill: currentColor !important;
@@ -93,7 +93,7 @@
 
     @media (-moz-platform: linux)
     {
-        :root[tabsintitlebar]:not([lwtheme]) #nav-bar
+        :root[customtitlebar]:not([lwtheme]) #nav-bar
         {
             color: inherit !important;
         }

diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css b/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css
@@ -143,3 +143,235 @@
         display: none !important;
     }
 }
+
+
+
+
+
+
+
+
+@media (-moz-bool-pref: "MediaIcons136")
+{
+
+
+
+
+
+
+
+
+
+
+/* -------------------- Media Icons -------------------- */
+
+/* Pinned Tabs */
+
+.tabbrowser-tab[pinned]:not([crashed], [busy])
+{
+    .tab-icon-overlay
+    {
+        background-color: transparent !important;
+        background-image: none !important;
+        fill: currentColor !important;
+        border-radius: 50px !important;
+        top: -8px !important;
+        inset-inline-end: -8px !important;
+
+        &:hover
+        {
+            background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
+        }
+
+        &:hover:active
+        {
+            background-color: color-mix(in srgb, currentColor 30%, transparent) !important;
+        }
+    }
+
+    &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack > :not(.tab-icon-overlay)
+    {
+        mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
+        mask-size: 16px 16px, 16px 16px !important;
+        mask-position: center center, center center !important;
+        mask-repeat: no-repeat, no-repeat !important;
+        mask-composite: exclude !important;
+        mask-mode: alpha, alpha !important;
+
+        :root:-moz-locale-dir(rtl) &
+        {
+            mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
+        }
+    }
+}
+
+/* Regular Tabs */
+
+.tabbrowser-tab:not([pinned], [crashed], [busy])
+{
+    .tab-icon-overlay
+    {
+        background-color: currentColor !important;
+        border-radius: 50px !important;
+        top: 0px !important;
+        inset-inline-end: 0px !important;
+        mask-image: var(--mask-overlay-background, none), var(--mask-overlay-image, none) !important;
+        mask-size: 16px 16px, 12px 12px !important;
+        mask-position: center center, center center !important;
+        mask-repeat: no-repeat, no-repeat !important;
+        mask-mode: alpha, alpha !important;
+
+        &:hover
+        {
+            --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.15);
+        }
+
+        &:hover:active
+        {
+            --mask-overlay-background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3);
+        }
+    }
+
+    &[soundplaying] .tab-icon-overlay
+    {
+        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
+    }
+
+    &[muted] .tab-icon-overlay
+    {
+        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
+    }
+
+    &[activemedia-blocked] .tab-icon-overlay
+    {
+        --mask-overlay-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
+    }
+
+    &:is([image], [sharing], [pictureinpicture]) .tab-icon-overlay
+    {
+        top: -8px !important;
+        inset-inline-end: -8px !important;
+    }
+
+    &:is([soundplaying], [muted], [activemedia-blocked])
+    {
+        .tab-icon-stack > :not(.tab-icon-overlay)
+        {
+            mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at right top, black 8px, transparent 9px) !important;
+            mask-size: 16px 16px, 16px 16px !important;
+            mask-position: center center, center center !important;
+            mask-repeat: no-repeat, no-repeat !important;
+            mask-composite: exclude !important;
+            mask-mode: alpha, alpha !important;
+
+            :root:-moz-locale-dir(rtl) &
+            {
+                mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at left top, black 8px, transparent 9px) !important;
+            }
+        }
+
+        .tab-icon-overlay
+        {
+            display: revert !important;
+        }
+    }
+}
+
+.tabbrowser-tab:not([pinned])
+{
+    --tab-min-width: inherit !important;
+
+    .tab-icon-stack > *
+    {
+        margin-inline-end: 8px !important;
+    }
+
+    .tab-audio-button
+    {
+        display: none !important;
+    }
+}
+
+/* ---------- Picture-In-Picture ---------- */
+
+.tabbrowser-tab[pictureinpicture]:not([crashed], [busy])
+{
+    .tab-icon-stack::before
+    {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background-color: currentColor;
+        mask-size: 16px 16px;
+        mask-position: center center;
+        mask-repeat: no-repeat;
+
+        :root:-moz-locale-dir(rtl) &
+        {
+            transform: rotateY(180deg);
+        }
+    }
+
+    .tab-icon-stack > :not(.tab-icon-overlay)
+    {
+        position: relative !important;
+        padding: 2px !important;
+        inset-inline-start: 8px !important;
+        top: 8px !important;
+        mask-image: none !important;
+        box-sizing: border-box !important;
+        z-index: 1 !important;
+    }
+
+    &:not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
+    {
+        mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
+        mask-size: 8px 8px, 8px 8px, 16px 16px;
+        mask-position: right bottom, right bottom, center center;
+        mask-repeat: no-repeat, no-repeat, no-repeat;
+        mask-composite: exclude, add;
+        mask-mode: alpha, alpha, alpha;
+    }
+
+    &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before
+    {
+        mask-image: linear-gradient(to bottom, black, black), linear-gradient(to bottom, black, black), url("chrome://global/skin/media/picture-in-picture-open.svg");
+        mask-size: 8px 16px, 8px 16px, 16px 16px;
+        mask-position: right bottom, right bottom, center center;
+        mask-repeat: no-repeat, no-repeat, no-repeat;
+        mask-composite: exclude, add;
+        mask-mode: alpha, alpha, alpha;
+    }
+}
+
+/* -------------------- Tab Text -------------------- */
+
+.tab-label-container
+{
+    height: auto !important;
+    font-size: clamp(0px, 1em, 16px) !important;
+    mask-image: none !important;
+}
+
+.tab-label
+{
+    width: 100% !important;
+    height: auto !important;
+    line-height: normal !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    text-overflow: ellipsis !important;
+    margin-block: 0px !important;
+}
+
+.tab-secondary-label
+{
+    display: none !important;
+}
+
+
+
+
+}
diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css b/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css
@@ -3,7 +3,8 @@
        (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled")     or
        (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
 {
-    @media not ((-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
+    @media not ((-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")  or
+                (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
@@ -91,7 +92,8 @@
         }
     }
 
-    @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
+    @media (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")  or
+           (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
@@ -210,7 +212,8 @@
        (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled")     or
        (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled")
 {
-    @media not ((-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
+    @media not ((-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")  or
+                (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
                 (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or
@@ -298,7 +301,8 @@
         }
     }
 
-    @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
+    @media (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled")  or
+           (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled")  or
            (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled")  or