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

Customize moz-toggle for tor-browser.

parent 5b7f90bf

toolkit/content/widgets/lit-utils.mjs

+6 −2
Original line number Diff line number Diff line
@@ -250,6 +250,9 @@ export class MozBaseInputElement extends MozLitElement { 
    supportPage: { type: String, attribute: "support-page" },

    accessKey: { type: String, mapped: true, fluent: true },

    parentDisabled: { type: Boolean, state: 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" },

  };

  static inputLayout = "inline";
@@ -404,9 +407,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-default)) / 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([hidden])) {
@@ -32,6 +33,13 @@ 
    --input-margin-block-adjust: 0;

  }



  :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;
@@ -72,7 +80,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

+9 −0
Original line number Diff line number Diff line
@@ -25,6 +25,8 @@ export default class MozToggle extends MozBaseInputElement { 
  static properties = {

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

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

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

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

  };



  static activatedProperty = "pressed";
@@ -50,6 +52,12 @@ export default class MozToggle extends MozBaseInputElement { 


  inputTemplate() {

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

    // 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.

    const label = ariaLabel || this.label;

    const ariaDescription = label === this.title ? undefined : this.title;

    return html`<button

      id="input"

      part="button"
@@ -60,6 +68,7 @@ export default class MozToggle extends MozBaseInputElement { 
      ?disabled=${disabled}

      aria-pressed=${pressed}

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

      aria-description=${ifDefined(ariaDescription ?? undefined)}

      aria-describedby="description"

      accesskey=${ifDefined(this.accessKey)}

      @click=${handleClick}