Commit f0a12d29 authored by henry's avatar henry
Browse files

Customize moz-toggle for tor-browser.

parent f53f82ba

toolkit/content/widgets/lit-utils.mjs

+6 −2
Original line number Diff line number Diff line
@@ -262,6 +262,9 @@ export class MozBaseInputElement extends MozLitElement { 
    parentDisabled: { type: Boolean, state: true },

    ariaLabel: { type: String, mapped: true },

    ariaDescription: { type: String, mapped: true },

    // label-align-before is a customisation for the moz-toggle in about:tor.

    // See tor-browser#43727.

    labelAlignBefore: { type: Boolean, attribute: "label-align-before" },

  };

  /** @type {"inline" | "block"} */

  static inputLayout = "inline";
@@ -448,9 +451,10 @@ export class MozBaseInputElement extends MozLitElement { 
          part="label"

          for="input"

          shownaccesskey=${ifDefined(this.accessKey)}

          >${this.isInlineLayout

          >${this.labelAlignBefore ? this.labelTemplate() : ""}${this

            .isInlineLayout

            ? this.inputTemplate()

            : ""}${this.labelTemplate()}</label

            : ""}${this.labelAlignBefore ? "" : this.labelTemplate()}</label

        >${this.hasDescription ? "" : this.supportLinkTemplate()}

      </span>

      ${this.descriptionTemplate()}

toolkit/content/widgets/moz-input-common.css

+9 −1
Original line number Diff line number Diff line
@@ -12,6 +12,7 @@ 
    --input-margin-block-adjust: calc((1lh - var(--input-height)) / 2);

    --icon-margin-block-adjust: calc((1lh - var(--icon-size)) / 2);

    --input-margin-inline-start-adjust: calc(-1 * var(--input-space-offset));

    --input-margin-inline-adjust: var(--input-margin-inline-start-adjust) var(--space-small);

  }



  :host(:not(:state(has-label))) {
@@ -35,6 +36,13 @@ 
    display: inline-block;

  }



  :host([label-align-before]) {

    /* The label is before the input, so we need the input to only have a

     * starting gap between it and the label. */

    --input-space-offset: 0;

    --input-margin-inline-adjust: var(--space-small) 0;

  }



  @media (forced-colors) {

    :host(:state(disabled)) {

      color: GrayText;
@@ -82,7 +90,7 @@ 
    line-height: inherit;

    vertical-align: top;

    margin-block: var(--input-margin-block-adjust);

    margin-inline: var(--input-margin-inline-start-adjust) var(--space-small);

    margin-inline: var(--input-margin-inline-adjust);



    :host(:not(:state(has-label))) & {

      margin-inline-end: 0;

toolkit/content/widgets/moz-toggle/moz-toggle.mjs

+19 −3
Original line number Diff line number Diff line
@@ -24,6 +24,8 @@ import "chrome://global/content/elements/moz-label.mjs"; 
export default class MozToggle extends MozBaseInputElement {

  static properties = {

    pressed: { type: Boolean, reflect: true },

    // Extension for tor-browser. Used for tor-browser#41333.

    title: { type: String, attribute: "title" },

  };



  static activatedProperty = "pressed";
@@ -49,6 +51,22 @@ export default class MozToggle extends MozBaseInputElement { 


  inputTemplate() {

    const { pressed, disabled, ariaLabel, handleClick } = this;

    let ariaDescription = undefined;

    if (!this.hasDescription) {

      ariaDescription = this.ariaDescription;

      if (

        !ariaDescription &&

        this.title &&

        this.title !== (ariaLabel || this.label)

      ) {

        // For tor-browser, if we have a title we use it as the

        // aria-description. Used for tor-browser#41333.

        // Only set the description using the title if it differs from the

        // accessible name derived from the label (ariaLabel || this.label).

        ariaDescription = this.title;

      }

    }



    return html`<button

      id="input"

      part="button"
@@ -60,9 +78,7 @@ export default class MozToggle extends MozBaseInputElement { 
      aria-pressed=${pressed}

      aria-label=${ifDefined(ariaLabel ?? undefined)}

      aria-describedby="description"

      aria-description=${ifDefined(

        this.hasDescription ? undefined : this.ariaDescription

      )}

      aria-description=${ifDefined(ariaDescription)}

      accesskey=${ifDefined(this.accessKey)}

      @click=${handleClick}

    ></button>`;