feat: [UI] Modern Ctrl Tab Preview

Signed-off-by: Hugo Lee <104642670+Gholts@users.noreply.github.com>

Author: gholts

src/browser/themes/shared/tabbrowser/ctrlTab-css.patch

@@ -1,12 +1,103 @@
 diff --git a/browser/themes/shared/tabbrowser/ctrlTab.css b/browser/themes/shared/tabbrowser/ctrlTab.css
-index ffda4922c675f6159c825334cba9d49658d316ba..7b3d4d2b5c6d732a1d0074e05cc48131fe57c630 100644
+index ffda4922c675f6159c825334cba9d49658d316ba..95f7eb1da53f1986e7c3da41a0f10e03f80c4812 100644
 --- a/browser/themes/shared/tabbrowser/ctrlTab.css
 +++ b/browser/themes/shared/tabbrowser/ctrlTab.css
-@@ -11,6 +11,7 @@
-   --panel-border-color: transparent;
+@@ -6,16 +6,23 @@
+ 
+ #ctrlTab-panel {
+   appearance: none;
+-  --panel-background: hsla(0, 0%, 40%, 0.85);
+-  --panel-color: white;
+-  --panel-border-color: transparent;
++  --panel-background: light-dark(rgba(244,244,244,1), rgba(24,24,24,1));
++  --panel-color: white; /* Note: looking for better solution */
++  --panel-border-color: light-dark(rgba(220,220,220,1), rgba(78,78,78,1));
++  --panel-border-radius: 19px;
    --panel-padding: 20px 10px 10px;
    -moz-window-shadow: none;
 +  --panel-shadow-margin: 0;
    @media not (-moz-platform: macos) {
      font-weight: var(--font-weight-bold);
    }
+ }
+ 
++/* Preventing corners exist after border-radius is set */
++panel#ctrlTab-panel {
++    border-radius: var(--panel-border-radius);
++}
++
+ .ctrlTab-preview,
+ #ctrlTab-showAll {
+   appearance: none;
+@@ -35,27 +42,32 @@
+ }
+ 
+ .ctrlTab-favicon-container {
+-  position: relative;
+-  justify-content: flex-end;
++  position: absolute;
++  top: 8px;
++  left: 8px;
++  z-index: 10;
++  background-color: light-dark(rgba(234,234,234,1), rgba(34,34,34,1));
++  border-radius: calc(var(--border-radius-medium) + 2px);
++  border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-hover-bg), white 84%), color-mix(in srgb, var(--zen-colors-hover-bg), white 20%));
+ }
+ 
+ .ctrlTab-favicon[src] {
+-  width: 42px;
+-  height: 42px;
+-  margin-top: -44px;
+-  margin-bottom: 2px;
+-  margin-inline-end: -6px;
+-  padding: 5px;
+-  background-color: #f9f9fa;
+-  border-radius: var(--border-radius-small);
+-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
++  box-sizing: border-box;
++  width: 30px;
++  height: 30px;
++  padding: 4px;
++  border-radius: calc(var(--border-radius-medium) + 2px);
++  box-shadow: 0px 0px 25px 1px light-dark(rgba(0,0,0,0.2), rgba(0,0,0,0.3));
+ }
+ 
+ .ctrlTab-canvas {
++  border-radius: 6px;
++  overflow: hidden;
+   color-scheme: light;
+   background-color: Canvas;
+   color: CanvasText;
+-  box-shadow: 1px 1px 2px hsl(0, 0%, 12%);
++  box-shadow: 0px 0px 20px 2px light-dark(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
++  margin: 10px;
+   margin-bottom: 8px;
+   min-width: 0;
+ 
+@@ -82,20 +94,22 @@
+ }
+ 
+ .ctrlTab-preview-inner {
++  position: relative;
+   margin-top: -10px;
+   min-width: 0;
+ }
+ 
+ #ctrlTab-showAll {
+-  background-color: rgba(255, 255, 255, 0.2);
++  background-color: rgba(255,255,255,0.2);
+   margin-top: 0.5em;
+ }
+ 
+ .ctrlTab-preview:focus > .ctrlTab-preview-inner,
+ #ctrlTab-showAll:focus {
+-  background-color: rgba(0, 0, 0, 0.75);
+-  text-shadow: none;
+-  border-color: #45a1ff;
++  border-radius: 11px;
++  border-color: var(--panel-background);
++  box-shadow: 0px 0px 2px 1px light-dark(color-mix(in srgb, var(--zen-colors-hover-bg), white 55%), color-mix(in srgb, var(--zen-colors-hover-bg), white 30%)) inset;
++  background-color: light-dark(color-mix(in srgb, var(--zen-colors-hover-bg), white 45%), color-mix(in srgb, var(--zen-colors-hover-bg), white 25%));
+ }
+ 
+ .ctrlTab-label {