Adding upstream version 110.0.1.upstream/110.0.1upstream

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

7 files changed, 459 insertions, 0 deletions

diff --git a/browser/components/storybook/stories/button-group.stories.mjs b/browser/components/storybook/stories/button-group.stories.mjs
new file mode 100644
index 0000000000..6f9acb2d6e
--- /dev/null
+++ b/browser/components/storybook/stories/button-group.stories.mjs
@@ -0,0 +1,38 @@
+/* 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/. */
+
+import { html } from "lit";
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/named-deck.js";
+
+export default {
+  title: "Widgets/Functional/Button Group",
+  argTypes: {
+    orientation: {
+      options: ["horizontal", "vertical"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template = ({ orientation }) => html`
+  <button-group orientation=${orientation}>
+    <button>One</button>
+    <button>Two</button>
+    <button>Three</button>
+    <button>Four</button>
+  </button-group>
+
+  <p>
+    The <code>button-group</code> element will group focus to the buttons,
+    requiring left/right or up/down to switch focus between its child elements.
+    It accepts an <code>orientation</code> property, which determines if
+    left/right or up/down are used to change the focused button.
+  </p>
+`;
+export const ButtonGroup = Template.bind({});
+ButtonGroup.args = {
+  orientation: "horizontal",
+};
diff --git a/browser/components/storybook/stories/button.stories.mjs b/browser/components/storybook/stories/button.stories.mjs
new file mode 100644
index 0000000000..b0d6b04401
--- /dev/null
+++ b/browser/components/storybook/stories/button.stories.mjs
@@ -0,0 +1,56 @@
+/* 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/. */
+
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+
+export default {
+  title: "Design System/Atoms/Button",
+};
+
+const Template = ({ disabled, primary, text, ghostButton, icon }) =>
+  html`
+    <style>
+      .icon-button {
+        background-image: url("${icon}");
+      }
+    </style>
+    <button
+      ?disabled=${disabled}
+      class=${classMap({
+        primary,
+        "ghost-button": ghostButton,
+        "icon-button": icon,
+      })}
+    >
+      ${text}
+    </button>
+  `;
+
+export const RegularButton = Template.bind({});
+RegularButton.args = {
+  text: "Regular",
+  primary: false,
+  disabled: false,
+};
+export const PrimaryButton = Template.bind({});
+PrimaryButton.args = {
+  text: "Primary",
+  primary: true,
+  disabled: false,
+};
+export const DisabledButton = Template.bind({});
+DisabledButton.args = {
+  text: "Disabled",
+  primary: false,
+  disabled: true,
+};
+
+export const GhostIconButton = Template.bind({});
+GhostIconButton.args = {
+  text: "",
+  icon: "chrome://browser/skin/login.svg",
+  disabled: false,
+  ghostButton: true,
+};
diff --git a/browser/components/storybook/stories/message-bar.stories.mjs b/browser/components/storybook/stories/message-bar.stories.mjs
new file mode 100644
index 0000000000..ca57066408
--- /dev/null
+++ b/browser/components/storybook/stories/message-bar.stories.mjs
@@ -0,0 +1,40 @@
+/* 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/. */
+
+import { html } from "lit";
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/message-bar.js";
+
+const MESSAGE_TYPES = {
+  default: "",
+  success: "success",
+  error: "error",
+  warning: "warning",
+};
+
+export default {
+  title: "Design System/Components/Message Bar",
+  argTypes: {
+    type: {
+      options: Object.keys(MESSAGE_TYPES),
+      mapping: MESSAGE_TYPES,
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = ({ dismissable, type }) =>
+  html`
+    <message-bar type=${type} ?dismissable=${dismissable}>
+      <span>A very expressive and slightly whimsical message goes here.</span>
+      <button>Click me, please!</button>
+    </message-bar>
+  `;
+
+export const Basic = Template.bind({});
+Basic.args = { type: "", dismissable: false };
+
+export const Dismissable = Template.bind({});
+Dismissable.args = { type: "", dismissable: true };
diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs
new file mode 100644
index 0000000000..6200e76c5b
--- /dev/null
+++ b/browser/components/storybook/stories/migration-wizard.stories.mjs
@@ -0,0 +1,63 @@
+/* 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/. */
+
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "browser/components/migration/content/migration-wizard.mjs";
+import { MigrationWizardConstants } from "chrome://browser/content/migration/migration-wizard-constants.mjs";
+
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/named-deck.js";
+
+export default {
+  title: "Design System/Components/Migration Wizard",
+};
+
+const FAKE_BROWSER_LIST = [
+  "Google Chrome - Profile 1",
+  "Google Chrome - Profile 2",
+  "Internet Explorer",
+  "Edge",
+  "Brave",
+  "Safari",
+  "Vivaldi",
+  "Opera",
+  "Opera GX",
+];
+
+const Template = state => {
+  let wiz = document.createElement("migration-wizard");
+  wiz.setState(state);
+  return wiz;
+};
+
+export const MainSelectorVariant1 = Template.bind({});
+MainSelectorVariant1.args = {
+  page: MigrationWizardConstants.PAGES.SELECTION,
+  migrators: FAKE_BROWSER_LIST,
+  withImportAll: false,
+};
+
+export const MainSelectorVariant2 = Template.bind({});
+MainSelectorVariant2.args = {
+  page: MigrationWizardConstants.PAGES.SELECTION,
+  migrators: FAKE_BROWSER_LIST,
+  withImportAll: true,
+};
+
+export const Progress = Template.bind({});
+Progress.args = {
+  page: MigrationWizardConstants.PAGES.PROGRESS,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  page: MigrationWizardConstants.PAGES.PROGRESS,
+};
+
+export const SafariPermissions = Template.bind({});
+SafariPermissions.args = {
+  page: MigrationWizardConstants.PAGES.SAFARI_PERMISSION,
+};
diff --git a/browser/components/storybook/stories/named-deck.stories.mjs b/browser/components/storybook/stories/named-deck.stories.mjs
new file mode 100644
index 0000000000..33310c3d6d
--- /dev/null
+++ b/browser/components/storybook/stories/named-deck.stories.mjs
@@ -0,0 +1,122 @@
+/* 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/. */
+
+import { html } from "lit";
+// Imported for side-effects.
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/named-deck.js";
+
+export default {
+  title: "Widgets/Functional/Named Deck",
+};
+
+export const Tabs = () => html`
+  <style>
+    button[selected] {
+      outline: 2px dashed var(--in-content-primary-button-background);
+    }
+  </style>
+  <button-group>
+    <button is="named-deck-button" deck="tabs-deck" name="tab-1">Tab 1</button>
+    <button is="named-deck-button" deck="tabs-deck" name="tab-2">Tab 2</button>
+    <button is="named-deck-button" deck="tabs-deck" name="tab-3">Tab 3</button>
+  </button-group>
+  <named-deck id="tabs-deck" is-tabbed>
+    <p name="tab-1">This is tab 1</p>
+    <p name="tab-2">This is tab 2</p>
+    <p name="tab-3">This is tab 3</p>
+  </named-deck>
+
+  <hr>
+
+  <p>
+    The dashed outline is added for emphasis here. It applies to the button with
+    the <code>selected</code> attribute, but matches the deck's
+    <code>selected-view</code> name.
+  </p>
+
+  <p>
+    These tabs are a combination of <code>button-group</code>,
+    <code>named-deck-button</code>, and <code>named-deck</code>.
+    <ul>
+      <li>
+        <code>button-group</code> makes the tabs a single focusable group,
+        using left/right to switch between focused buttons.
+      </li>
+      <li>
+        <code>named-deck-button</code>s are <code>button</code> subclasses
+        that are used to control the <code>named-deck</code>.
+      </li>
+      <li>
+        <code>named-deck</code> show only one selected child at a time.
+      </li>
+    </ul>
+  </p>
+`;
+
+export const ListMenu = () => html`
+  <style>
+    .icon-button {
+      background-image: url("chrome://global/skin/icons/arrow-left.svg");
+    }
+
+    .vertical-group {
+      display: flex;
+      flex-direction: column;
+      width: 200px;
+    }
+  </style>
+  <named-deck id="list-deck" is-tabbed>
+    <section name="list">
+      <button-group orientation="vertical" class="vertical-group">
+        <button is="named-deck-button" deck="list-deck" name="tab-1">
+          Tab 1
+        </button>
+        <button is="named-deck-button" deck="list-deck" name="tab-2">
+          Tab 2
+        </button>
+        <button is="named-deck-button" deck="list-deck" name="tab-3">
+          Tab 3
+        </button>
+      </button-group>
+    </section>
+    <section name="tab-1">
+      <button
+        class="icon-button ghost-button"
+        is="named-deck-button"
+        deck="list-deck"
+        name="list"
+      ></button>
+      <p>This is tab 1</p>
+    </section>
+    <section name="tab-2">
+      <button
+        class="icon-button ghost-button"
+        is="named-deck-button"
+        deck="list-deck"
+        name="list"
+      ></button>
+      <p>This is tab 2</p>
+    </section>
+    <section name="tab-3">
+      <button
+        class="icon-button ghost-button"
+        is="named-deck-button"
+        deck="list-deck"
+        name="list"
+      ></button>
+      <p>This is tab 3</p>
+    </section>
+  </named-deck>
+
+  <hr />
+
+  <p>
+    This is an alternate layout for creating a menu navigation. In this case,
+    the first view in the <code>named-deck</code> is the list view which
+    contains the <code>named-deck-button</code>s to link to the other views.
+    Each view then includes a back <code>named-deck-button</code> which is used
+    to navigate back to the first view.
+  </p>
+`;
diff --git a/browser/components/storybook/stories/panel-list.stories.mjs b/browser/components/storybook/stories/panel-list.stories.mjs
new file mode 100644
index 0000000000..652b8a582f
--- /dev/null
+++ b/browser/components/storybook/stories/panel-list.stories.mjs
@@ -0,0 +1,95 @@
+/* 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/. */
+
+// eslint-disable-next-line import/no-unassigned-import
+import "toolkit-widgets/panel-list.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+export default {
+  title: "Design System/Components/Panel Menu",
+  parameters: {
+    actions: {
+      handles: ["click"],
+    },
+  },
+};
+
+const openMenu = e => document.querySelector("panel-list").toggle(e);
+
+const Template = ({ open, items }) =>
+  html`
+    <style>
+      panel-item[icon="passwords"]::part(button) {
+        background-image: url("chrome://browser/skin/login.svg");
+      }
+      panel-item[icon="settings"]::part(button) {
+        background-image: url("chrome://global/skin/icons/settings.svg");
+      }
+      button {
+        position: absolute;
+        background-image: url("chrome://global/skin/icons/more.svg");
+      }
+      .end {
+        inset-inline-end: 30px;
+      }
+
+      .bottom {
+        inset-block-end: 30px;
+      }
+    </style>
+    <button class="ghost-button icon-button" @click=${openMenu}></button>
+    <button class="ghost-button icon-button end" @click=${openMenu}></button>
+    <button class="ghost-button icon-button bottom" @click=${openMenu}></button>
+    <button
+      class="ghost-button icon-button bottom end"
+      @click=${openMenu}
+    ></button>
+    <panel-list ?stay-open=${open} ?open=${open}>
+      ${items.map(i =>
+        i == "<hr>"
+          ? html`
+              <hr />
+            `
+          : html`
+              <panel-item
+                icon=${i.icon ?? ""}
+                ?checked=${i.checked}
+                ?badged=${i.badged}
+                accesskey=${ifDefined(i.accesskey)}
+              >
+                ${i.text ?? i}
+              </panel-item>
+            `
+      )}
+    </panel-list>
+  `;
+
+export const Simple = Template.bind({});
+Simple.args = {
+  open: false,
+  items: [
+    "Item One",
+    { text: "Item Two (accesskey w)", accesskey: "w" },
+    "Item Three",
+    "<hr>",
+    { text: "Checked", checked: true },
+    { text: "Badged, look at me", badged: true, icon: "settings" },
+  ],
+};
+
+export const Icons = Template.bind({});
+Icons.args = {
+  open: false,
+  items: [
+    { text: "Passwords", icon: "passwords" },
+    { text: "Settings", icon: "settings" },
+  ],
+};
+
+export const Open = Template.bind({});
+Open.args = {
+  ...Simple.args,
+  open: true,
+};
diff --git a/browser/components/storybook/stories/toggle.stories.mjs b/browser/components/storybook/stories/toggle.stories.mjs
new file mode 100644
index 0000000000..af3e72c6fe
--- /dev/null
+++ b/browser/components/storybook/stories/toggle.stories.mjs
@@ -0,0 +1,45 @@
+/* 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/. */
+
+import { html } from "lit";
+
+export default {
+  title: "Design System/Atoms/Toggle",
+};
+
+const Template = ({ checked, disabled }) =>
+  html`
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
+    <link
+      rel="stylesheet"
+      href="chrome://global/skin/in-content/toggle-button.css"
+    />
+    <input
+      type="checkbox"
+      class="toggle-button"
+      ?checked=${checked}
+      ?disabled=${disabled}
+    />
+  `;
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+  disabled: false,
+  checked: false,
+};
+export const Checked = Template.bind({});
+Checked.args = {
+  disabled: false,
+  checked: true,
+};
+export const DisabledUnchecked = Template.bind({});
+DisabledUnchecked.args = {
+  disabled: true,
+  checked: false,
+};
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  disabled: true,
+  checked: true,
+};