Adding upstream version 110.0.1.upstream/110.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

5 files changed, 398 insertions, 0 deletions

diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg
new file mode 100644
index 0000000000..b2f739a868
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-blocked.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #e62117;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#999999" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <rect    class="style-badge-icon"       x="9" y="13" width="14" height="4" rx="1" ry="1" />
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg
new file mode 100644
index 0000000000..2b8ba7cb86
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-downloading.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #55cc3d;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <path    class="style-badge-icon" d="M22.7,16.1l-5.6,5.5C16.8,21.9,16.4,22,16,22c-0.4,0-0.7-0.1-1-0.4 l-5.6-5.5C8.8,15.5,8.9,15,9.8,15l3.2,0V9c0-0.6,0.5-1,1.1-1h4c0.6,0,1,0.4,1,1v6h3.2C23.1,15,23.3,15.5,22.7,16.1z"/>
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg
new file mode 100644
index 0000000000..86ebe4975d
--- /dev/null
+++ b/browser/themes/shared/addons/addon-install-installed.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <style>
+      .style-puzzle-piece {
+        fill: url('#gradient-linear-puzzle-piece');
+      }
+      .style-badge-shadow {
+        fill: #0d131a;
+        fill-opacity: .15;
+      }
+      .style-badge-background {
+        fill: #fff;
+      }
+      .style-badge-inside {
+        fill: #55cc3d;
+      }
+      .style-badge-icon {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+  <svg width="32" height="32" x="32" y="0">
+    <ellipse class="style-badge-shadow"     rx="14" ry="15" cx="16" cy="17" />
+    <circle  class="style-badge-background" r="15"  cy="15" cx="16" />
+    <circle  class="style-badge-inside"     r="12"  cy="15" cx="16" />
+    <path    class="style-badge-icon" d="M22.8,12.3c0,0-6.7,8.1-6.9,8.3c-0.4,0.5-1.5,0.3-1.7,0 c-0.2-0.3-5-5.8-5-5.8c-0.3-0.3-0.3-0.7,0-1l1-1c0.4-0.4,0.9,0,1.2,0.3c0.3,0.4,3.4,3.8,3.4,3.8s5.2-6.1,5.4-6.4 c0.5-0.8,1.6-0.8,1.9-0.5l0.7,0.6C23.1,11.1,23.1,12,22.8,12.3z" />
+  </svg>
+</svg>
diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css
new file mode 100644
index 0000000000..69d78373fc
--- /dev/null
+++ b/browser/themes/shared/addons/extension-controlled.css
@@ -0,0 +1,32 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body {
+  width: 30em;
+}
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > hbox > vbox > .popup-notification-description {
+  font-weight: 600;
+}
+
+.extension-controlled-notification {
+  margin-bottom: 0;
+}
+
+.extension-controlled-notification popupnotificationcontent > description > .extension-controlled-icon {
+  height: 16px;
+  width: 16px;
+  vertical-align: bottom;
+}
+
+.extension-controlled-icon.alltabs-icon {
+  background: url("chrome://global/skin/icons/arrow-down.svg");
+  /* This icon has a lot of extra space to the sides, reduce that a little. */
+  margin: 0 -1px 1px;
+}
+
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning,
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon {
+  display: none;
+}
diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
new file mode 100644
index 0000000000..3356695e1e
--- /dev/null
+++ b/browser/themes/shared/addons/unified-extensions.css
@@ -0,0 +1,255 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  /* uei = unified extensions item */
+  --uei-icon-size: 32px;
+  --uei-attention-dot-size: 8px;
+  --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor);
+  --uei-button-hover-color: inherit;
+  --uei-button-active-bgcolor: var(--panel-item-active-bgcolor);
+  --uei-button-active-color: inherit;
+  --uei-button-attention-dot-color: var(--tab-attention-icon-color);
+}
+
+:root[uidensity="compact"] {
+  --uei-icon-size: 24px;
+}
+
+#unified-extensions-panel {
+  --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+  --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2));
+}
+
+/* Align extensions rendered with custom elements. */
+unified-extensions-item {
+  display: flex;
+  align-items: center;
+}
+
+#unified-extensions-panel .unified-extensions-item {
+  /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */
+  padding-block: 2px;
+}
+
+/* The "attention UI" for the unified extensions is based on:
+ * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */
+
+/* On the main unified extensions button, we draw the attention on the icon element. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+/* For extension widgets placed in a toolbar, we use the stack element (containing the icon)
+ * of the action button to draw the attention dot.
+ * Otherwise (in the extensions panel), we use the action button itself. */
+toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack,
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button,
+.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px);
+  background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size);
+  background-repeat: no-repeat;
+}
+
+/* Adjust attention dots position in the toolbar. */
+#unified-extensions-button[attention] > .toolbarbutton-icon,
+toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack {
+  background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2);
+}
+
+/* Adjust attention dots position in the unified extensions panel. */
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button {
+  background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel);
+}
+
+/* Adjust attention dots position in the unified extensions panel for RTL. */
+#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) {
+  background-position-x: right var(--uei-dot-horizontal-position-in-panel);
+}
+
+/* Adjust attention dots position in the overflow panel. */
+.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-position-x: left calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+  background-position-y: bottom calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2);
+}
+
+:root[uidensity="compact"] .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button {
+  background-position-y: bottom -2px;
+}
+
+/* Adjust attention dots position in the overflow panel for RTL. */
+.widget-overflow-list toolbaritem.unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) {
+  background-position-x: right calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2);
+}
+
+.unified-extensions-item-action-button {
+  overflow: hidden;
+  background-color: transparent;
+}
+
+/* The padding-block for menuitems is set to 0 in compact mode which, with the
+ * extension icon being 32px in this case, makes the item look crowded even for
+ * compact mode. */
+:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button {
+  padding-block: 4px;
+}
+
+.unified-extensions-item-action-button[disabled].subviewbutton {
+  color: var(--panel-description-color);
+}
+
+.unified-extensions-item-action-button[disabled] .unified-extensions-item-icon {
+  opacity: 0.5;
+}
+
+.unified-extensions-item-icon,
+/* When the unified extensions pref is enabled, we also want to increase the
+ * size of the icons in the extension CUI widgets. */
+panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+  height: var(--uei-icon-size);
+  width: var(--uei-icon-size);
+}
+
+/* The first selector is for the custom elements icon, which appears only in the UEP. */
+.unified-extensions-item-icon,
+panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack {
+  margin-inline-end: 6px;
+}
+
+.unified-extensions-item-icon,
+.unified-extensions-item-contents {
+  pointer-events: none;
+}
+
+.unified-extensions-item-name,
+.unified-extensions-item-message {
+  margin: 0;
+  padding-inline-start: .5em;
+  width: 22em;
+  word-break: break-word;
+}
+
+.unified-extensions-item-message {
+  color: var(--panel-description-color);
+}
+
+.unified-extensions-item-menu-button.subviewbutton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+  margin: 0;
+  margin-inline-end: var(--arrowpanel-menuitem-margin-inline);
+  /* Have the icon even padding all around by default */
+  padding: var(--arrowpanel-menuitem-padding-inline);
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+
+.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-text {
+  display: none;
+}
+
+/* --- browser action CUI widget styles --- */
+
+/* Hide secondary (menu) button when the widget is in the list of widgets in
+ * customization mode. */
+toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-menu-button {
+  display: none;
+}
+
+/* Hide subviewbutton label by default, it should only be shown in the old
+ * overflow panel and the palette. */
+toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text,
+#unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text {
+  display: none;
+}
+
+/* Hide unified extensions content by default, unless the item is overflowed or in
+ * a panel. Also hide this content if the item is visible in customize mode. */
+toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents,
+toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents {
+  display: none;
+}
+
+toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
+  -moz-box-flex: 0;
+  margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
+  padding: var(--arrowpanel-menuitem-padding);
+  border: 1px solid transparent;
+}
+
+/* When the unified extensions pref is set, we want to always have a "large"
+ * menu button, even on compact mode since each extension has two lines of text
+ * anyway (extension name and message). */
+toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-menu-button.subviewbutton {
+  padding: 8px;
+}
+
+/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */
+
+/* Align CUI widgets with the custom elements in the unified extensions panel. */
+#unified-extensions-panel toolbaritem.unified-extensions-item {
+  max-width: max-content;
+}
+
+/* Show CUI widget label in overflow panel when the unified extensions pref is
+ * not set. */
+.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action-button .toolbarbutton-text {
+  text-align: start;
+  display: block;
+}
+
+@media (prefers-contrast) {
+  :root {
+    --uei-button-attention-dot-color: ButtonText;
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ) {
+    border-color: currentColor;
+    background-color: ButtonFace;
+    color: ButtonText;
+    --uei-button-hover-bgcolor: SelectedItem;
+    --uei-button-hover-color: SelectedItemText;
+    --uei-button-active-bgcolor: ButtonFace;
+    --uei-button-active-color: ButtonText;
+  }
+
+  #unified-extensions-panel .unified-extensions-item-action-button[disabled].subviewbutton {
+    background-color: Canvas;
+    color: GrayText;
+  }
+
+  .unified-extensions-item-action-button[disabled] .unified-extensions-item-message {
+    color: GrayText;
+  }
+
+  .unified-extensions-item-action-button:not([disabled]) .unified-extensions-item-message {
+    color: ButtonText;
+  }
+
+  .unified-extensions-item-action-button:not([disabled]):hover .unified-extensions-item-message {
+    color: inherit;
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ):hover:not(:active) {
+    background-color: var(--uei-button-hover-bgcolor);
+    color: var(--uei-button-hover-color);
+    border-color: var(--uei-button-hover-bgcolor);
+  }
+
+  #unified-extensions-panel :is(
+    .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    .unified-extensions-item-menu-button.subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton,
+    toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton
+  ):hover:active {
+    background-color: var(--uei-button-active-bgcolor);
+    color: var(--uei-button-active-color);
+  }
+}