Commit e0df987e authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

Customize moz-toggle for tor-browser.

parent d47a7a2d

toolkit/content/widgets/lit-utils.mjs

+6 −2
Original line number Diff line number Diff line
@@ -263,6 +263,9 @@ export class MozBaseInputElement extends MozLitElement { 
    ariaLabel: { type: String, mapped: true },

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

    inputLayout: { type: String, reflect: true, attribute: "inputlayout" },

    // 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" | "inline-end"} */

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

            for="input"

            shownaccesskey=${ifDefined(this.accessKey)}

            >${this.inputLayout === "inline"

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

              .inputLayout === "inline"

              ? this.inputTemplate()

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

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

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

          ${this.descriptionTemplate()}

        </span>

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

+9 −1
Original line number Diff line number Diff line
@@ -13,6 +13,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))) {
@@ -42,6 +43,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: var(--text-color-disabled);
@@ -111,7 +119,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>`;