Merge branch 'bottom-rounded-corner' into dev #326

CREDITS

@@ -233,3 +233,8 @@ N: Waterfox
 W: https://github.com/WaterfoxCo/Waterfox
 C: Copyright (c) 2012 Waterfox Limited
 L: MPL 2.0
+
+N: WaveFox
+W: https://github.com/QNetITQ/WaveFox
+C: Copyright (c) 2021 QNetITQ
+L: MIT

src/compatibility/_theme.scss

@@ -116,8 +116,8 @@ menu {
 
 /* Navbar Border */
 #navigator-toolbox:-moz-lwtheme {
-  --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */
-  --lwt-tabs-border-color: rgba(0, 0, 0, 0.3);
+  --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4)  */
+  --lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
 }
 
 /*= Findbar Border Color =====================================================*/

src/tab/_selected_tab.scss

@@ -15,7 +15,26 @@
 
 /*= Selected Tab - Bottom Rounded Corner =====================================*/
 @include Option("userChrome.tab.bottom_rounded_corner") {
-  @import "selected_tab/bottom_rounded_corner";
+  @include NotOption("userChrome.tab.bottom_rounded_corner.wave") {
+    @include NotOption("userChrome.tab.bottom_rounded_corner.australis") {
+      @include NotOption("userChrome.tab.bottom_rounded_corner.chrome") {
+        @include NotOption("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
+          @include NotOption("userChrome.tab.bottom_rounded_corner.edge") {
+            @import "selected_tab/bottom_rounded_corner";
+          }
+        }
+      }
+    }
+  }
+  @include Option(
+    "userChrome.tab.bottom_rounded_corner.wave",
+    "userChrome.tab.bottom_rounded_corner.australis",
+    "userChrome.tab.bottom_rounded_corner.chrome_legacy",
+    "userChrome.tab.bottom_rounded_corner.chrome",
+    "userChrome.tab.bottom_rounded_corner.edge"
+  ) {
+    @import "selected_tab/bottom_rounded_corner_others";
+  }
 }
 
 /*= Selected Tab - Photon like contextline ===================================*/

src/tab/newtab_button/_looks_like_tab.scss

@@ -1,35 +1,75 @@
 #tabs-newtab-button {
-  /* Original:
+  @include Option("userChrome.tab.connect_to_window") {
+    /* Size */
+    -moz-box-align: stretch !important;
+    padding-top: var(--tab-block-margin) !important;
+  }
+
+  @include Option("userChrome.tab.bottom_rounded_corner") {
+    /* Original:
     margin: 0 0 var(--tabs-navbar-shadow-size) !important
     => Can't override style. Therefore, we should approach it by bypass.
-    */
-  --tabs-navbar-shadow-size: -1px; /* Original: 1px */
-  --tabs-navbar-original-shadow-size: 0.5px;
-  --tab-corner-rounding: 4px; /* Hardcoded */
+   */
+    --tabs-navbar-shadow-size: -1px; /* Original: 1px */
+    --uc-tabs-navbar-shadow-size: 0.5px;
+    --uc-tab-corner-rounding: 4px; /* Hardcoded */
+    --uc-newtab-bgcolor: transparent;
+
+    /* Corner Rounding Image */
+    --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1);
+    background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg);
+    background-repeat: no-repeat;
+    background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
+                         right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
+    background-size: var(--uc-tab-corner-rounding);
 
-  /* Size */
-  -moz-box-align: stretch !important;
-  padding-top: var(--tab-block-margin) !important;
+    /* Corner Rounding Color */
+    fill: var(--uc-newtab-bgcolor) !important;
+    -moz-context-properties: fill !important;
 
-  /* Corner Rounding 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 var(--tabs-navbar-original-shadow-size),
-    right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size);
-  background-size: var(--tab-corner-rounding);
+    @include Option(
+      "userChrome.tab.bottom_rounded_corner.wave",
+      "userChrome.tab.bottom_rounded_corner.australis",
+      "userChrome.tab.bottom_rounded_corner.chrome_legacy",
+      "userChrome.tab.bottom_rounded_corner.chrome",
+      "userChrome.tab.bottom_rounded_corner.edge"
+    ) {
+      --uc-newtab-position: 0px;
+      --uc-newtab-non-corner-bgwidth: 0px;
+      --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2);
+      --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1);
 
-  /* Corner Rounding Color */
-  fill: transparent !important;
-  -moz-context-properties: fill !important;
+      transform: translateX(var(--uc-tab-corner-half-height-reverse));
+      padding-inline: var(--uc-tab-corner-half-height) !important;
+      overflow-clip-margin: var(--uc-tab-corner-half-height) !important;
+
+      background-image: var(--uc-tab-corner-left-side-svg),
+                        linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)),
+                        var(--uc-tab-corner-right-side-svg);
+      background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size),
+                           center bottom var(--uc-tabs-navbar-shadow-size),
+                           right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size);
+      background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height),
+                       var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height),
+                       var(--uc-tab-corner-height) var(--uc-tab-corner-height);
+      background-origin: padding-box;
+
+      @include Option(
+        "userChrome.tab.bottom_rounded_corner.chrome",
+        "userChrome.tab.bottom_rounded_corner.edge"
+      ) {
+        --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding));
+      }
+    }
+  }
 }
 
 /* Corner Rounding Color */
 #tabs-newtab-button:hover {
-  fill: var(--toolbarbutton-hover-background) !important;
+  --uc-newtab-bgcolor: var(--toolbarbutton-hover-background);
 }
 #tabs-newtab-button:hover:active {
-  fill: var(--toolbarbutton-active-background) !important;
+  --uc-newtab-bgcolor: var(--toolbarbutton-active-background);
 }
 @media (-moz-windows-accent-color-in-titlebar) {
   @include AccentColor {
@@ -49,6 +89,29 @@
         transparent
       ) !important; /* Hardcoded for compatibility */
     }
+
+    @include Option("userChrome.tab.bottom_rounded_corner") {
+      @include Option(
+        "userChrome.tab.bottom_rounded_corner.wave",
+        "userChrome.tab.bottom_rounded_corner.australis",
+        "userChrome.tab.bottom_rounded_corner.chrome_legacy",
+        "userChrome.tab.bottom_rounded_corner.chrome",
+        "userChrome.tab.bottom_rounded_corner.edge"
+      ) {
+        :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover,
+        :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover {
+          background-image: var(--uc-tab-corner-left-side-svg),
+                            linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)),
+                            var(--uc-tab-corner-right-side-svg);
+        }
+        :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active,
+        :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active {
+          background-image: var(--uc-tab-corner-left-side-svg),
+                            linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)),
+                            var(--uc-tab-corner-right-side-svg);
+        }
+      }
+    }
   }
 }
 
@@ -57,8 +120,26 @@
   border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
 
   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;
+    calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--uc-tabs-navbar-shadow-size)) !important;
   -moz-context-properties: fill, fill-opacity;
   fill: var(--toolbarbutton-icon-fill);
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+
+  @include Option(
+    "userChrome.tab.bottom_rounded_corner.wave",
+    "userChrome.tab.bottom_rounded_corner.australis",
+    "userChrome.tab.bottom_rounded_corner.chrome_legacy",
+    "userChrome.tab.bottom_rounded_corner.chrome",
+    "userChrome.tab.bottom_rounded_corner.edge"
+  ) {
+    --tab-border-radius: 0px;
+    width: unset !important;
+    padding-inline: 0px !important;
+    margin-inline: calc(var(--uc-tab-corner-half-height) - #{( 15.5px / 2 )}) !important;
+
+    background-color: transparent !important;
+    // background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%;
+    // background-repeat: no-repeat;
+    // background-position: center;
+  }
 }