| addon-component-status |
|
|
- |
| addon-fluent |
|
|
- |
| DocsContainer.mjs |
-------- helpers -------- |
4520 |
- |
| fluent-utils.mjs |
Updates "currentStrategy" when the selected pseudo localization strategy
changes, which in turn changes the transform used by the Fluent bundle.
@param {string} strategy
Pseudo localization strategy. Can be "default", "accented", or "bidi".
|
4197 |
- |
| l10n-pseudo.mjs |
Pseudolocalizations
PSEUDO_STRATEGIES is a dict of strategies to be used to modify a
context in order to create pseudolocalizations. These can be used by
developers to test the localizability of their code without having to
actually speak a foreign language.
Currently, the following pseudolocales are supported:
accented - Ȧȧƈƈḗḗƞŧḗḗḓ Ḗḗƞɠŀīīşħ
In Accented English all Latin letters are replaced by accented
Unicode counterparts which don't impair the readability of the content.
This allows developers to quickly test if any given string is being
correctly displayed in its 'translated' form. Additionally, simple
heuristics are used to make certain words longer to better simulate the
experience of international users.
bidi - ɥsıʅƃuƎ ıpıԐ
Bidi English is a fake RTL locale. All words are surrounded by
Unicode formatting marks forcing the RTL directionality of characters.
In addition, to make the reversed text easier to read, individual
letters are flipped.
Note: The name above is hardcoded to be RTL in case code editors have
trouble with the RLO and PDF Unicode marks. In reality, it should be
surrounded by those marks as well.
See https://bugzil.la/1450781 for more information.
In this implementation we use code points instead of inline unicode characters
because the encoding of JSM files mangles them otherwise.
|
4281 |
- |
| main.js |
/component-status.stories.mjs`,
// and lands on the Storybook.stories.md file
"../* |
7158 |
- |
| manager-head.html |
|
302 |
- |
| manager.mjs |
|
1857 |
- |
| markdown-story-indexer.js |
Function that tells Storybook how to index markdown based stories. This is
responsible for Storybook knowing how to populate the sidebar in the
Storybook UI, then retrieve the relevant file when a story is selected. In
order to get the data Storybook needs, we have to convert the markdown to
MDX, the convert that to CSF.
More info on indexers can be found here: storybook.js.org/docs/api/main-config-indexers
@param {string} fileName - Path to the file being processed.
@param {object} opts - Options to configure the indexer.
@returns Array of IndexInput objects.
|
2121 |
- |
| markdown-story-loader.js |
This file contains a Webpack loader that takes markdown as its source and
outputs a docs only MDX Storybook story. This enables us to write docs only
pages in plain markdown by specifying a `.stories.md` extension.
For more context on docs only stories, see:
https://storybook.js.org/docs/web-components/writing-docs/mdx#documentation-only-mdx
The MDX generated by the loader will then get run through the same loaders
Storybook usually uses to transform MDX files.
|
1318 |
- |
| markdown-story-utils.js |
Takes a file path and returns a string to use as the story title, capitalized
and split into multiple words. The file name gets transformed into the story
name, which will be visible in the Storybook sidebar. For example, either:
/stories/hello-world.stories.md or /stories/helloWorld.md
will result in a story named "Hello World".
@param {string} filePath - path of the file being processed.
@returns {string} The title of the story.
|
6366 |
- |
| moz-styles-loader.js |
This file contains a webpack loader which rewrites JS source files to use
CSS imports when running in Storybook. This allows JS files loaded in
Storybook to use chrome:// and moz-src:/// URIs when loading external
stylesheets without having to worry about Storybook being able to find and
detect changes to the files.
This loader allows Lit-based custom element code like this to work with
Storybook:
render() {
return html`
<link rel="stylesheet" href="chrome://global/content/elements/moz-toggle.css" />
...
`;
}
By rewriting the source to this:
import moztoggleStyles from "toolkit/content/widgets/moz-toggle/moz-toggle.css";
...
render() {
return html`
<link rel="stylesheet" href=${moztoggleStyles} />
...
`;
}
It works similarly for vanilla JS custom elements that utilize template
strings. The following code:
static get markup() {
return`
<template>
<link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css">
...
</template>
`;
}
Gets rewritten to:
import migrationwizardStyles from "browser/themes/shared/migration/migration-wizard.css";
...
static get markup() {
return`
<template>
<link rel="stylesheet" href=${migrationwizardStyles}>
...
</template>
`;
}
For moz-src:/// URIs the path is resolved relative to the importing file:
render() {
return html`
<link rel="stylesheet" href="moz-src:///third_party/js/prosemirror/prosemirror-view/style/prosemirror.css" />
...
`;
}
Gets rewritten to:
import prosemirrorStyles from "../../../../third_party/js/prosemirror/prosemirror-view/style/prosemirror.css";
...
render() {
return html`
<link rel="stylesheet" href=${prosemirrorStyles} />
...
`;
}
|
6632 |
- |
| moz-uri-utils.js |
|
1360 |
- |
| preview-head.html |
|
3922 |
- |
| preview.mjs |
NOOP |
5688 |
- |
| theme-dark.mjs |
|
1450 |
- |
| theme-light.mjs |
|
1451 |
- |