Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
import { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
/**
* Local sidebar/banner element for about:keyboard.
*
* Renders as a sticky sidebar by default, and as a sticky header on narrower
* viewports. It includes the brand logo, page name, subheading text with a
* support, a search and reset controls.
*/
class CustomkeysSidebar extends MozLitElement {
createRenderRoot() {
return this;
}
render() {
return html`
<header
class="customkeys-sidebar"
data-l10n-attrs="aria-label"
data-l10n-id="customkeys-sidebar"
>
<div class="customkeys-heading">
<img
class="brand-logo"
alt=""
src="chrome://branding/content/about-logo.png"
/>
<h1 class="customkeys-title" data-l10n-id="customkeys-title"></h1>
</div>
<p class="customkeys-description">
<span data-l10n-id="customkeys-description"></span>
<a
is="moz-support-link"
data-l10n-id="customkeys-support-link-text"
support-page="keyboard-shortcuts-perform-firefox-tasks-quickly"
target="_blank"
></a>
</p>
<div class="customkeys-sidebar-actions">
<moz-input-search
id="search"
data-l10n-id="customkeys-search-input"
inputlayout="block"
></moz-input-search>
<moz-button
id="resetAll"
data-l10n-id="customkeys-reset-all-button"
iconsrc="chrome://global/skin/icons/arrow-counterclockwise-16.svg"
></moz-button>
</div>
</header>
`;
}
}
customElements.define("customkeys-sidebar", CustomkeysSidebar);