Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new design system links #25486

Merged
merged 6 commits into from
Mar 23, 2023
Merged

Add new design system links #25486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7463ce0
Add new design system links
dawei-wang Mar 20, 2023
1953caf
Add new design system links
dawei-wang Mar 22, 2023
d5a50e4
Merge branch 'patch-1' of https://github.com/dawei-wang/content into …
dawei-wang Mar 22, 2023
c51cf30
Merge branch 'main' into patch-1
dawei-wang Mar 22, 2023
f61028e
Fix typo
rebloor Mar 23, 2023
d6fc3fa
Merge branch 'main' into patch-1
rebloor Mar 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ The `options_ui` key is an object with the following contents:
The
<a
class="external external-icon"
href="https://design.firefox.com/photon/"
href="https://acorn.firefox.com/latest/acorn.html"
>Firefox Style Guide</a
>
describes the classes you can apply to elements in the popup in order
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/browser_action/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ You can change many of the browser action properties programmatically using the

## Icons

For details on how to create icons to use with your browser action, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to create icons to use with your browser action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion .../en-us/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ browser.contextMenus.onClicked.addListener((info, tab) => {

## Icons

For details on how to create icons to use with your context menu, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to create icons to use with your context menu, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
22 changes: 12 additions & 10 deletions files/en-us/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,27 @@ function handleHidden() {
console.log("panel is being hidden");
}

browser.devtools.panels.create(
"My Panel", // title
"icons/star.png", // icon
"devtools/panel/panel.html" // content
).then((newPanel) => {
newPanel.onShown.addListener(handleShown);
newPanel.onHidden.addListener(handleHidden);
});
browser.devtools.panels
.create(
"My Panel", // title
"icons/star.png", // icon
"devtools/panel/panel.html" // content
)
.then((newPanel) => {
newPanel.onShown.addListener(handleShown);
newPanel.onHidden.addListener(handleHidden);
});
```

The extension can now run code in the inspected window using [`devtools.inspectedWindow.eval()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/eval) or by injecting a content script via the background script by passing a message. You can find more details on how to do this in [Extending the developer tools.](/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)

## Developer panel design

For details on how to design your developer panel's web page to match the style of Firefox, see the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to design your developer panel's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Icons

For details on how to create icons to use with your developer tools panel, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to create icons to use with your developer tools panel, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
6 changes: 3 additions & 3 deletions files/en-us/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ let createData = {
type: "detached_panel",
url: "panel.html",
width: 250,
height: 100
height: 100,
};
let creating = browser.windows.create(createData);
```
Expand All @@ -59,7 +59,7 @@ By default, pages you open in this way will be stored in the user's history, jus
```js
function onVisited(historyItem) {
if (historyItem.url === browser.extension.getURL(myPage)) {
browser.history.deleteUrl({url: historyItem.url});
browser.history.deleteUrl({ url: historyItem.url });
}
}

Expand All @@ -70,7 +70,7 @@ To use the history API, you must request the "`history`" [permission](/en-US/doc

## Web page design

For details on how to design your web page's to match the style of Firefox, see the [Photon Design System](https://design.firefox.com/photon/index.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.
For details on how to design your web page's to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/notifications/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ If you are issuing calls to action through notifications, you will also want to

## Icons

For details on how to create icons to use with your notification, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to create icons to use with your notification, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/options_pages/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ See the [`options_ui`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/o

## Options content design

For details on how to design your options content to match the style of Firefox, see the [Photon Design System](https://design.firefox.com/photon/index.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.
For details on how to design your options content to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) and [browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ You can change any of the page action properties programmatically using the [`pa

## Icons

For details on how to create icons to use with your page action, see [Iconography](https://design.firefox.com/photon/visuals/iconography.html) in the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to create icons to use with your page action, see [Iconography](https://acorn.firefox.com/latest/styles/iconography.html) in the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/popups/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ In Firefox Android 57, the popup is shown as a normal page in a new tab.

## Popup design

For details on how to design your popup's web page to match the style of Firefox, see the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to design your popup's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/add-ons/webextensions/user_interface/sidebars/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Title and icon are shown to the user in any UI provided by the browser to list s

## Sidebar design

For details on how to design a sidebar's web page to match the style of Firefox, see the [Photon Design System](https://design.firefox.com/photon/index.html) documentation.
For details on how to design a sidebar's web page to match the style of Firefox, see the [Acorn Design System](https://acorn.firefox.com/latest/acorn.html) documentation.

## Example

Expand Down