devtools-settings.mjs

Enable keyboard shortcuts

/* 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, You can obtain one at http://mozilla.org/MPL/2.0/. */

/// <reference path="./devtools-settings.tagmap.d.ts" />

import { html, nothing } from "chrome://global/content/vendor/lit.all.mjs";

import { MozLitElement } from "chrome://global/content/lit-utils.mjs";

import { inventory } from "../inventory.mjs";

/**

 * @import { Setting, SettingSection } from "../types/inventory.d.ts"

*/

/** Renders the settings inventory as nested binding elements and controls. */

export class DevToolsSettings extends MozLitElement {

  /** @param {Setting} setting */

  #renderSetting(setting) {

    switch (setting.type) {

      case "boolean":

        return html`

          <devtools-settings-pref

            pref=${setting.pref}

            change-action=${setting.changeAction ?? nothing}

            <moz-checkbox

              id=${setting.id}

              data-l10n-id=${setting.l10nId}

            ></moz-checkbox>

          </devtools-settings-pref>

`;

      default:

        throw new Error(`Unsupported setting type "${setting.type}".`);

  /** @param {SettingSection} section */

  #renderSection(section) {

    return html`

      <moz-fieldset id=${section.id} data-l10n-id=${section.l10nId}>

        ${section.settings.map(setting => this.#renderSetting(setting))}

      </moz-fieldset>

`;

  render() {

    return html`

      <link

        rel="stylesheet"

        href="resource://devtools/client/settings/components/devtools-settings.css"

/>

      ${inventory.map(section => this.#renderSection(section))}

`;

customElements.define("devtools-settings", DevToolsSettings);