Apply appearance same to the native tab preview panel as possible as …

…we can #3412

webextensions/resources/tab-preview-frame.js

@@ -16,8 +16,6 @@ try{
   style.textContent = `
     :root {
       --show-hide-animation: opacity 0.1s ease-out;
-      --preview-panel-border-radius: 0.5em;
-
       opacity: 1;
       transition: var(--show-hide-animation);
     }
@@ -27,32 +25,103 @@ try{
     }
 
     .tab-preview-container {
-      background: Canvas;
-      border-radius: var(--preview-panel-border-radius);
-      box-shadow: rgba(0, 0, 0, 0.25) 0.05em 0.05em 0.5em;
-      color: CanvasText;
+      /* https://searchfox.org/mozilla-central/rev/dfaf02d68a7cb018b6cad7e189f450352e2cde04/toolkit/themes/shared/popup.css#11-63 */
+      color-scheme: light dark;
+
+      --panel-background: Menu;
+      --panel-color: MenuText;
+      --panel-padding-block: 4px;
+      --panel-padding: var(--panel-padding-block) 0;
+      --panel-border-radius: 4px;
+      --panel-border-color: ThreeDShadow;
+      --panel-width: initial;
+
+      --panel-shadow-margin: 0px;
+      --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
+      -moz-window-input-region-margin: var(--panel-shadow-margin);
+      margin: calc(-1 * var(--panel-shadow-margin));
+
+      /* Panel design token theming */
+      --background-color-canvas: var(--panel-background);
+
+      @media (-moz-platform: linux) {
+        --panel-border-radius: 8px;
+        --panel-padding-block: 3px;
+
+        @media (prefers-contrast) {
+          --panel-border-color: color-mix(in srgb, currentColor 60%, transparent);
+        }
+      }
+
+      @media (-moz-platform: linux) or (-moz-platform: windows) {
+        --panel-shadow-margin: 4px;
+      }
+
+      /* On some linux WMs we need to draw square menus because alpha is not available */
+      @media (-moz-platform: linux) and (not (-moz-gtk-csd-transparency-available)) {
+        --panel-shadow-margin: 0px !important;
+        --panel-border-radius: 0px !important;
+      }
+
+      @media (-moz-platform: macos) {
+        appearance: auto;
+        -moz-default-appearance: menupopup;
+        background-color: Menu;
+        --panel-background: none;
+        --panel-border-color: transparent;
+        --panel-border-radius: 6px;
+      }
+
+      /* https://searchfox.org/mozilla-central/rev/dfaf02d68a7cb018b6cad7e189f450352e2cde04/browser/themes/shared/tabbrowser/tab-hover-preview.css#5 */
+      --panel-width: 280px;
+      --panel-padding: 0;
+
+      /* https://searchfox.org/mozilla-central/rev/dfaf02d68a7cb018b6cad7e189f450352e2cde04/toolkit/themes/shared/design-system/tokens-shared.css#174 */
+      --space-xxsmall: calc(0.5 * var(--space-xsmall));
+      --space-xsmall: 0.267rem;
+      --space-small: calc(2 * var(--space-xsmall));
+      --space-medium: calc(3 * var(--space-xsmall));
+      --space-large: calc(4 * var(--space-xsmall));
+      --space-xlarge: calc(6 * var(--space-xsmall));
+      --space-xxlarge: calc(8 * var(--space-xsmall));
+
+
+      background: var(--panel-background);
+      border: var(--panel-border-color) solid 1px;
+      border-radius: var(--panel-border-radius);
+      box-shadow: var(--panel-shadow);
+      color: var(--panel-color);
       font: Message-Box;
-      left: calc(0.5em - 0.05em);
-      max-width: 20em;
+      left: var(--panel-shadow-margin);
+      max-width: var(--panel-width);
       opacity: 1;
       overflow: hidden; /* clip the preview with the rounded edges */
-      padding: var(--preview-panel-border-radius) 0 0;
+      padding: var(--panel-border-radius) 0 0;
       position: fixed;
       transition: var(--show-hide-animation);
     }
 
     .tab-preview-title {
       font-weight: bold;
-      margin: 0 var(--preview-panel-border-radius) 0.25em;
+      line-height: 1.5; /* -webkit-line-clamp looks unavailable, so this is a workaround */
+      margin: 0 var(--panel-border-radius) 0.25em;
+      max-height: 3em; /* -webkit-line-clamp looks unavailable, so this is a workaround */
+      overflow: hidden;
+      /* text-overflow: ellipsis; */
+      -webkit-line-clamp: 2; /* https://searchfox.org/mozilla-central/rev/dfaf02d68a7cb018b6cad7e189f450352e2cde04/browser/themes/shared/tabbrowser/tab-hover-preview.css#15-18 */
     }
 
     .tab-preview-url {
-      margin: 0 var(--preview-panel-border-radius) 0.25em;
-      opacity: 0.75;
+      margin: 0 var(--panel-border-radius) 0.25em;
+      opacity: 0.69; /* https://searchfox.org/mozilla-central/rev/234f91a9d3ebef0d514868701cfb022d5f199cb5/toolkit/themes/shared/design-system/tokens-shared.css#182 */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .tab-preview-image-wrapper {
-      max-height: 10em;
+      border-top: 1px solid var(--panel-border-color);
+      max-height: 140px;
       overflow: hidden;
     }