Adding upstream version 126.0.upstream/126.0

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

3 files changed, 118 insertions, 18 deletions

diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md
new file mode 100644
index 0000000000..800d446478
--- /dev/null
+++ b/toolkit/content/widgets/moz-page-nav/README.stories.md
@@ -0,0 +1,98 @@
+# MozPageNav
+
+`moz-page-nav` is a grouping of navigation buttons that is displayed at the page level,
+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-button
+    view="view-one"
+    iconSrc="chrome://browser/skin/preferences/category-general.svg"
+  >
+    <p style={{ margin: 0 }}>Test 1</p>
+  </moz-page-nav-button>
+  <moz-page-nav-button
+    view="view-two"
+    iconSrc="chrome://browser/skin/preferences/category-general.svg"
+  >
+    <p style={{ margin: 0 }}>Test 2</p>
+  </moz-page-nav-button>
+  <moz-page-nav-button
+    view="view-three"
+    iconSrc="chrome://browser/skin/preferences/category-general.svg"
+  >
+    <p style={{ margin: 0 }}>Test 3</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))
+* This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc.
+
+## When not to use
+
+* If you need a navigation menu that does not switch between views within a single page
+
+## Code
+
+The source for `moz-page-nav` and `moz-page-nav-button` can be found under
+[toolkit/content/widgets/moz-page-nav](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/moz-page-nav).
+You can find an examples of `moz-page-nav` in use in the Firefox codebase in
+[about:firefoxview](https://searchfox.org/mozilla-central/source/browser/components/firefoxview/firefoxview.html#52-87).
+
+`moz-page-nav` can be imported into `.html`/`.xhtml` files:
+
+```html
+<script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script>
+```
+
+And used as follows:
+
+```html
+<moz-page-nav>
+    <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
+    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
+    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>
+```
+
+### Fluent usage
+
+Generally the `heading` property of
+`moz-page-nav` will be provided via [Fluent attributes](https://mozilla-l10n.github.io/localizer-documentation/tools/fluent/basic_syntax.html#attributes).
+To get this working you will need to specify a `data-l10n-id` as well as
+`data-l10n-attrs` if you're providing a heading:
+
+```html
+<moz-page-nav data-l10n-id="with-heading"
+            data-l10n-attrs="heading"></moz-page-nav>
+```
+
+In which case your Fluent messages will look something like this:
+
+```
+with-heading =
+  .heading = Heading text goes here
+```
+
+You also need to specify a `data-l10n-id` for each `moz-page-nav-button`:
+
+```html
+<moz-page-nav-button data-l10n-id="with-button-text"></moz-page-nav-button>
+```
+
+```
+with-button-text = button text goes here
+```
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 2975bb1a7c..5d00198d65 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
@@ -13,7 +13,7 @@ button {
   background-color: var(--page-nav-button-background-color);
   border: 1px solid var(--page-nav-border-color);
   -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
+  fill: var(--icon-color);
   display: grid;
   grid-template-columns: min-content 1fr;
   gap: 12px;
@@ -34,34 +34,35 @@ button:hover {
 
 @media not (prefers-contrast) {
   button {
-    border-inline-start: 2px solid transparent;
-    border-inline-end: none;
-    border-block: none;
+    position: relative;
   }
 
-  button:hover,
-  button[selected]:hover {
-    background-color: var(--page-nav-button-background-color-hover);
+  button::before {
+    content: "";
+    display: block;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 2px;
+    background-color: transparent;
   }
 
-  button[selected]:hover {
-    border-inline-start-color: inherit;
+  button[selected]::before {
+    background-color: var(--color-accent-primary);
   }
 
-  button[selected],
-  button[selected]:hover {
-    border-inline-start: 2px solid;
+  button[selected]:hover::before {
+    background-color: var(--icon-color);
   }
 
-  button[selected]:not(:focus-visible) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+  button:hover,
+  button[selected]:hover {
+    background-color: var(--page-nav-button-background-color-hover);
   }
 
   button[selected]:not(:hover) {
     color: var(--color-accent-primary);
     background-color: color-mix(in srgb, var(--page-nav-button-background-color-selected) 5%, transparent);
-    border-inline-start-color: var(--color-accent-primary);
   }
 }
 
@@ -74,7 +75,7 @@ button:hover {
 button:focus-visible,
 button[selected]:focus-visible {
   outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline-offset: 0;
   border-radius: var(--border-radius-small);
 }
 
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
index 49000f622d..8e6724b2f5 100644
--- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
@@ -20,6 +20,7 @@
   position: sticky;
   top: 0;
   height: 100vh;
+  display: block;
   width: var(--page-nav-width);
 
   @media (prefers-reduced-motion) {
@@ -38,7 +39,7 @@ nav {
   grid-template-rows: min-content 1fr auto;
   gap: var(--page-nav-gap);
   margin-block: var(--page-nav-margin-top) var(--page-nav-margin-bottom);
-  height: calc(100vh - var(--page-nav-margin-top) - var(--page-nav-margin-bottom));
+  height: calc(100% - var(--page-nav-margin-top) - var(--page-nav-margin-bottom));
   @media (max-width: 52rem) {
     grid-template-rows: 1fr auto;
   }