summaryrefslogtreecommitdiffstats
path: root/browser/components/storybook
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-06-12 05:43:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-06-12 05:43:14 +0000
commit8dd16259287f58f9273002717ec4d27e97127719 (patch)
tree3863e62a53829a84037444beab3abd4ed9dfc7d0 /browser/components/storybook
parentReleasing progress-linux version 126.0.1-1~progress7.99u1. (diff)
downloadfirefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz
firefox-8dd16259287f58f9273002717ec4d27e97127719.zip
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/storybook')
-rw-r--r--browser/components/storybook/.storybook/main.js2
-rw-r--r--browser/components/storybook/docs/README.other-widgets.stories.md11
-rw-r--r--browser/components/storybook/docs/README.reusable-widgets.stories.md11
-rw-r--r--browser/components/storybook/stories/fxview-tab-list.stories.mjs1
-rw-r--r--browser/components/storybook/stories/shopping-message-bar.stories.mjs28
5 files changed, 27 insertions, 26 deletions
diff --git a/browser/components/storybook/.storybook/main.js b/browser/components/storybook/.storybook/main.js
index 0a5a55b851..276d3e06cf 100644
--- a/browser/components/storybook/.storybook/main.js
+++ b/browser/components/storybook/.storybook/main.js
@@ -23,6 +23,8 @@ module.exports = {
`${projectRoot}/toolkit/content/widgets/**/*.stories.@(js|jsx|mjs|ts|tsx|md)`,
// about:logins components stories
`${projectRoot}/browser/components/aboutlogins/content/components/**/*.stories.mjs`,
+ // Backup components stories
+ `${projectRoot}/browser/components/backup/content/**/*.stories.mjs`,
// Reader View components stories
`${projectRoot}/toolkit/components/reader/**/*.stories.mjs`,
// Everything else
diff --git a/browser/components/storybook/docs/README.other-widgets.stories.md b/browser/components/storybook/docs/README.other-widgets.stories.md
index b2614d88b6..3c6f8d63f2 100644
--- a/browser/components/storybook/docs/README.other-widgets.stories.md
+++ b/browser/components/storybook/docs/README.other-widgets.stories.md
@@ -30,8 +30,8 @@ Please refer to the existing [UA widgets documentation](https://firefox-source-d
### How to use existing Mozilla Custom Elements
-The existing Mozilla Custom Elements are automatically imported into all chrome privileged documents.
-These existing elements do not need to be imported individually via `<script>` tag or by using `window.ensureCustomElements()` when in a privileged main process document.
+The existing Mozilla Custom Elements are either [automatically imported](https://searchfox.org/mozilla-central/rev/d23849dd6d83edbe681d3b4828700256ea34a654/toolkit/content/customElements.js#853-878) into all chrome privileged documents, or are [lazy loaded](https://searchfox.org/mozilla-central/rev/d23849dd6d83edbe681d3b4828700256ea34a654/toolkit/content/customElements.js#789-809) and get automatically imported when first used.
+In either case, these existing elements do not need to be imported individually via `<script>` tag.
As long as you are working in a chrome privileged document, you will have access to the existing Mozilla Custom Elements.
You can dynamically create one of the existing custom elements by using `document.createDocument("customElement)` or `document.createXULElement("customElement")` in the relevant JS file, or by using the custom element tag in the relevant XHTML document.
For example, `document.createXULElement("checkbox")` creates an instance of [widgets/checkbox.js](https://searchfox.org/mozilla-central/source/toolkit/content/widgets/checkbox.js) while using `<checkbox>` declares an instance in the XUL document.
@@ -74,11 +74,10 @@ Just like with the UI widgets, [the `browser_all_files_referenced.js` will fail
### Using new domain-specific widgets
-This is effectively the same as [using new design system components](#using-new-design-system-components).
-You will need to import your widget into the relevant `html`/`xhtml` files via a `script` tag with `type="module"`:
+This is effectively the same as [using new design system components](#using-new-design-system-components). In general you should be able to rely on these elements getting lazily loaded at the time of first use, similar to how existing custom elements are imported.
+
+Outside of chrome privileged documents you may need to import your widget into the relevant `html`/`xhtml` files via a `script` tag with `type="module"`:
```html
<script type="module" src="chrome://browser/content/<domain-directory>/<your-widget>.mjs"></script>
```
-
-Or use `window.ensureCustomElements("<your-widget>")` as previously stated in [the using new design system components section.](#using-new-design-system-components)
diff --git a/browser/components/storybook/docs/README.reusable-widgets.stories.md b/browser/components/storybook/docs/README.reusable-widgets.stories.md
index f26c18a2b0..003cbc36bf 100644
--- a/browser/components/storybook/docs/README.reusable-widgets.stories.md
+++ b/browser/components/storybook/docs/README.reusable-widgets.stories.md
@@ -16,6 +16,8 @@ re-rendering logic. All new components are being documented in Storybook in an
effort to create a catalog that engineers and designers can use to see which
components can be easily lifted off the shelf for use throughout Firefox.
+If you want to see the progress over time of these new reusable components, we have a [Reusable Component Adoption chart](https://firefoxux.github.io/recomp-metrics/) that you should check out!
+
## Designing new reusable widgets
Widgets that live at the global level, "UI Widgets", should be created in collaboration with the Design System team.
@@ -111,17 +113,16 @@ by updating [this array](https://searchfox.org/mozilla-central/rev/5c922d8b93b43
Once you've added a new component to `toolkit/content/widgets` and created
`chrome://` URLs via `toolkit/content/jar.mn` you should be able to start using it
-throughout Firefox. You can import the component into `html`/`xhtml` files via a
+throughout Firefox. In most cases, you should be able to rely on your custom element getting lazy loaded at the time of first use, provided you are working in a privileged context where `customElements.js` is available.
+
+You can import the component directly into `html`/`xhtml` files via a
`script` tag with `type="module"`:
```html
<script type="module" src="chrome://global/content/elements/your-component-name.mjs"></script>
```
-If you are unable to import the new component in html, you can use [`ensureCustomElements()` in customElements.js](https://searchfox.org/mozilla-central/rev/31f5847a4494b3646edabbdd7ea39cb88509afe2/toolkit/content/customElements.js#865) in the relevant JS file.
-For example, [we use `window.ensureCustomElements("moz-button-group")` in `browser-siteProtections.js`](https://searchfox.org/mozilla-central/rev/31f5847a4494b3646edabbdd7ea39cb88509afe2/browser/base/content/browser-siteProtections.js#1749).
-**Note** you will need to add your new widget to [the switch in importCustomElementFromESModule](https://searchfox.org/mozilla-central/rev/85b4f7363292b272eb9b606e00de2c37a6be73f0/toolkit/content/customElements.js#845-859) for `ensureCustomElements()` to work as expected.
-Once [Bug 1803810](https://bugzilla.mozilla.org/show_bug.cgi?id=1803810) lands, this process will be simplified: you won't need to use `ensureCustomElements()` and you will [add your widget to the appropriate array in customElements.js instead of the switch statement](https://searchfox.org/mozilla-central/rev/85b4f7363292b272eb9b606e00de2c37a6be73f0/toolkit/content/customElements.js#818-841).
+**Note** you will need to add your new widget to [this array in customElements.js](https://searchfox.org/mozilla-central/rev/cde3d4a8d228491e8b7f1bd94c63bbe039850696/toolkit/content/customElements.js#791-810) to ensure it gets lazy loaded on creation.
## Common pitfalls
diff --git a/browser/components/storybook/stories/fxview-tab-list.stories.mjs b/browser/components/storybook/stories/fxview-tab-list.stories.mjs
index b18ad16e3a..888f9a567a 100644
--- a/browser/components/storybook/stories/fxview-tab-list.stories.mjs
+++ b/browser/components/storybook/stories/fxview-tab-list.stories.mjs
@@ -56,6 +56,7 @@ const Template = ({
.dateTimeFormat=${dateTimeFormat}
.maxTabsLength=${maxTabsLength}
.tabItems=${tabItems}
+ .updatesPaused=${false}
@fxview-tab-list-secondary-action=${secondaryAction}
@fxview-tab-list-primary-action=${primaryAction}
>
diff --git a/browser/components/storybook/stories/shopping-message-bar.stories.mjs b/browser/components/storybook/stories/shopping-message-bar.stories.mjs
index 7bc0895fd0..61b99d4d8d 100644
--- a/browser/components/storybook/stories/shopping-message-bar.stories.mjs
+++ b/browser/components/storybook/stories/shopping-message-bar.stories.mjs
@@ -15,21 +15,19 @@ export default {
component: "shopping-message-bar",
argTypes: {
type: {
- control: {
- type: "select",
- options: [
- "stale",
- "generic-error",
- "not-enough-reviews",
- "product-not-available",
- "product-not-available-reported",
- "thanks-for-reporting",
- "analysis-in-progress",
- "reanalysis-in-progress",
- "page-not-supported",
- "thank-you-for-feedback",
- ],
- },
+ control: { type: "select" },
+ options: [
+ "stale",
+ "generic-error",
+ "not-enough-reviews",
+ "product-not-available",
+ "product-not-available-reported",
+ "thanks-for-reporting",
+ "analysis-in-progress",
+ "reanalysis-in-progress",
+ "page-not-supported",
+ "thank-you-for-feedback",
+ ],
},
},
parameters: {