From b2282ba69befd7c1dc30f8e1d2806543d2a09b53 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 28 Jun 2021 14:45:11 +0900
Subject: [PATCH] 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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg transform="scale(-1,1)" stroke-width="1.2" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"></path>
+  <path d="M0 16 A16 16 0 0 0 16 0" stroke="context-stroke" fill="transparent"></path>
+</svg>
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;