Adding upstream version 127.0.upstream/127.0

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

4 files changed, 163 insertions, 24 deletions

diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md
index 800d446478..c2f1b37bb5 100644
--- a/toolkit/content/widgets/moz-page-nav/README.stories.md
+++ b/toolkit/content/widgets/moz-page-nav/README.stories.md
@@ -4,7 +4,7 @@
 intended to change the selected view, provide a heading, and have links to external resources.
 
 ```html story
-<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '200px' }}>
+<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '275px' }}>
   <moz-page-nav-button
     view="view-one"
     iconSrc="chrome://browser/skin/preferences/category-general.svg"
@@ -23,13 +23,27 @@ intended to change the selected view, provide a heading, and have links to exter
   >
     <p style={{ margin: 0 }}>Test 3</p>
   </moz-page-nav-button>
+  <moz-page-nav-button
+    support-page="test"
+    iconSrc="chrome://browser/skin/preferences/category-general.svg"
+    slot="secondary-nav"
+  >
+    <p style={{ margin: 0 }}>Support Link</p>
+  </moz-page-nav-button>
+  <moz-page-nav-button
+    href="https://www.example.com"
+    iconSrc="chrome://browser/skin/preferences/category-general.svg"
+    slot="secondary-nav"
+  >
+   <p style={{ margin: 0 }}>External Link</p>
+  </moz-page-nav-button>
 </moz-page-nav>
 ```
 
 ## When to use
 
 * Use moz-page-nav for single-page navigation to switch between different views.
-* moz-page-nav will also support footer buttons for external support links in the future (See [bug 1877826](https://bugzilla.mozilla.org/show_bug.cgi?id=1877826))
+* moz-page-nav also supports footer buttons for external and support links
 * This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc.
 
 ## When not to use
@@ -53,18 +67,34 @@ And used as follows:
 
 ```html
 <moz-page-nav>
-    <moz-page-nav-button
+  <moz-page-nav-button
     view="A name for the first view"
     iconSrc="A url for the icon for the first navigation button">
-    </moz-page-nav-button>
-    <moz-page-nav-button
+  </moz-page-nav-button>
+  <moz-page-nav-button
     view="A name for the second view"
     iconSrc="A url for the icon for the second navigation button">
-    </moz-page-nav-button>
-    <moz-page-nav-button
+  </moz-page-nav-button>
+  <moz-page-nav-button
     view="A name for the third view"
     iconSrc="A url for the icon for the third navigation button">
-    </moz-page-nav-button>
+  </moz-page-nav-button>
+
+  <!-- Footer Links -->
+
+  <!-- Support Link -->
+  <moz-page-nav-button
+    support-page="A name for a support link"
+    iconSrc="A url for the icon for the third navigation button"
+    slot="secondary-nav">
+  </moz-page-nav-button>
+
+  <!-- External Link -->
+  <moz-page-nav-button
+    href="A url for an external link"
+    iconSrc="A url for the icon for the third navigation button"
+    slot="secondary-nav">
+  </moz-page-nav-button>
 </moz-page-nav>
 ```
 
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css
index 5d00198d65..781398056a 100644
--- a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css
@@ -4,11 +4,13 @@
 
 :host {
   border-radius: var(--border-radius-small);
+  font-size: var(--font-size-large);
   &:focus-visible {
     outline-offset: var(--page-nav-focus-outline-inset);
   }
 }
 
+a[href],
 button {
   background-color: var(--page-nav-button-background-color);
   border: 1px solid var(--page-nav-border-color);
@@ -28,11 +30,17 @@ button {
   padding: var(--page-nav-button-padding);
 }
 
+a[href] {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
 button:hover {
   cursor: pointer;
 }
 
 @media not (prefers-contrast) {
+  a[href],
   button {
     position: relative;
   }
@@ -55,6 +63,7 @@ button:hover {
     background-color: var(--icon-color);
   }
 
+  a[href]:hover,
   button:hover,
   button[selected]:hover {
     background-color: var(--page-nav-button-background-color-hover);
@@ -72,6 +81,7 @@ button:hover {
   }
 }
 
+a[href]:focus-visible,
 button:focus-visible,
 button[selected]:focus-visible {
   outline: var(--focus-outline);
@@ -86,13 +96,24 @@ button[selected]:focus-visible {
   fill: currentColor;
 }
 
+:host(.secondary-nav-item) {
+  font-size: var(--font-size-small);
+
+  & .page-nav-icon {
+    height: var(--icon-size-default);
+    width: var(--icon-size-default);
+  }
+}
+
 @media (prefers-contrast) {
+  a[href],
   button {
     transition: none;
     border-color: ButtonText;
     background-color: var(--button-background-color);
   }
 
+  a[href]:hover,
   button:hover {
     color: SelectedItem;
   }
@@ -105,13 +126,13 @@ button[selected]:focus-visible {
 }
 
 slot {
-  font-size: var(--font-size-large);
   margin: 0;
   padding-inline-start: 0;
   user-select: none;
 }
 
 @media (max-width: 52rem) {
+  a[href],
   button {
     grid-template-columns: min-content;
     justify-content: center;
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
index f998ee735f..c720e76e26 100644
--- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
@@ -4,6 +4,8 @@
 
 import { html } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://global/content/elements/moz-support-link.mjs";
 
 /**
  * A grouping of navigation buttons that is displayed at the page level,
@@ -35,6 +37,14 @@ export default class MozPageNav extends MozLitElement {
       );
   }
 
+  get secondaryNavButtons() {
+    return this.secondaryNavGroupSlot
+      .assignedNodes()
+      .filter(
+        node => node?.localName === "moz-page-nav-button" && !node.hidden
+      );
+  }
+
   onChangeView(e) {
     this.currentView = e.target.view;
   }
@@ -69,6 +79,12 @@ export default class MozPageNav extends MozLitElement {
     }
   }
 
+  onSecondaryNavChange() {
+    this.secondaryNavGroupSlot.assignedElements()?.forEach(el => {
+      el.classList.add("secondary-nav-item");
+    });
+  }
+
   render() {
     return html`
       <link
@@ -89,7 +105,10 @@ export default class MozPageNav extends MozLitElement {
           ></slot>
         </div>
         <div id="secondary-nav-group" role="group">
-          <slot name="secondary-nav" @keydown=${this.handleFocus}></slot>
+          <slot
+            name="secondary-nav"
+            @slotchange=${this.onSecondaryNavChange}
+          ></slot>
         </div>
       </nav>
     `;
@@ -114,16 +133,18 @@ customElements.define("moz-page-nav", MozPageNav);
  * A navigation button intended to change the selected view within a page.
  *
  * @tagname moz-page-nav-button
+ * @property {string} href - (optional) The url for an external link if not a support page URL
  * @property {string} iconSrc - The chrome:// url for the icon used for the button.
- * @property {string} l10nId - The fluent ID for the button's text
  * @property {boolean} selected - Whether or not the button is currently selected.
+ * @property {string} supportPage - (optional) The short name for the support page a secondary link should launch to
  * @slot [default] - Used to append the l10n string to the button.
  */
 export class MozPageNavButton extends MozLitElement {
   static properties = {
     iconSrc: { type: String },
-    l10nId: { type: String },
+    href: { type: String },
     selected: { type: Boolean },
+    supportPage: { type: String, attribute: "support-page" },
   };
 
   connectedCallback() {
@@ -133,6 +154,7 @@ export class MozPageNavButton extends MozLitElement {
 
   static queries = {
     buttonEl: "button",
+    linkEl: "a",
   };
 
   get view() {
@@ -148,12 +170,15 @@ export class MozPageNavButton extends MozLitElement {
     );
   }
 
-  render() {
+  itemTemplate() {
+    if (this.href || this.supportPage) {
+      return this.linkTemplate();
+    }
+    return this.buttonTemplate();
+  }
+
+  buttonTemplate() {
     return html`
-      <link
-        rel="stylesheet"
-        href="chrome://global/content/elements/moz-page-nav-button.css"
-      />
       <button
         aria-selected=${this.selected}
         tabindex=${this.selected ? 0 : -1}
@@ -161,10 +186,51 @@ export class MozPageNavButton extends MozLitElement {
         ?selected=${this.selected}
         @click=${this.activate}
       >
-        <img class="page-nav-icon" src=${this.iconSrc} />
-        <slot></slot>
+        ${this.innerContentTemplate()}
       </button>
     `;
   }
+
+  linkTemplate() {
+    if (this.supportPage) {
+      return html`
+        <a
+          is="moz-support-link"
+          class="moz-page-nav-link"
+          support-page=${this.supportPage}
+        >
+          ${this.innerContentTemplate()}
+        </a>
+      `;
+    }
+    return html`
+      <a href=${this.href} class="moz-page-nav-link" target="_blank">
+        ${this.innerContentTemplate()}
+      </a>
+    `;
+  }
+
+  innerContentTemplate() {
+    return html`
+      ${this.iconSrc
+        ? html`<img
+            class="page-nav-icon"
+            src=${this.iconSrc}
+            role="presentation"
+          />`
+        : ""}
+      <slot></slot>
+    `;
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/elements/moz-page-nav-button.css"
+      />
+      ${this.itemTemplate()}
+    `;
+  }
 }
 customElements.define("moz-page-nav-button", MozPageNavButton);
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs
index 4ac7b455cf..d1c565efe9 100644
--- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs
@@ -2,7 +2,7 @@
  * 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 "../vendor/lit.all.mjs";
+import { html, when } from "../vendor/lit.all.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "./moz-page-nav.mjs";
 
@@ -21,15 +21,17 @@ moz-page-nav-button-two = View 2
   .title = View 2
 moz-page-nav-button-three = View 3
   .title = View 3
-moz-page-link-one = Support Page
-  .title = Support Page
+moz-page-nav-button-four = Support Link
+  .title = Support Link
+moz-page-nav-button-five = External Link
+  .title = External Link
 moz-page-nav-heading =
   .heading = Heading
      `,
   },
 };
 
-const Template = () => html`
+const Template = ({ hasFooterLinks }) => html`
   <style>
     #page {
       height: 100%;
@@ -68,10 +70,30 @@ const Template = () => html`
         iconSrc="chrome://browser/skin/preferences/category-general.svg"
       >
       </moz-page-nav-button>
+      ${when(
+        hasFooterLinks,
+        () => html` <moz-page-nav-button
+            support-page="test"
+            data-l10n-id="moz-page-nav-button-four"
+            iconSrc="chrome://browser/skin/preferences/category-general.svg"
+            slot="secondary-nav"
+          >
+          </moz-page-nav-button>
+          <moz-page-nav-button
+            href="https://www.example.com"
+            data-l10n-id="moz-page-nav-button-five"
+            iconSrc="chrome://browser/skin/preferences/category-general.svg"
+            slot="secondary-nav"
+          >
+          </moz-page-nav-button>`
+      )}
     </moz-page-nav>
     <main></main>
   </div>
 `;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = { hasFooterLinks: false };
+
+export const WithFooterLinks = Template.bind({});
+WithFooterLinks.args = { hasFooterLinks: true };