Bug 1639756 - Clean-up forms.css by using :is(). r=jwatt
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 21 May 2020 12:27:24 +0000
changeset 531867 c161d7a53845bad9e2bebc9f76af9e6633507efb
parent 531866 67dcbffe8b5b4873ed8719089c6dddc5e2c9060d
child 531868 b8e3a5d241c9461def0cde60d778b429bd0fecc6
push id37447
push usernbeleuzu@mozilla.com
push dateMon, 25 May 2020 15:42:48 +0000
treeherdermozilla-central@e7641c1071ea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjwatt
bugs1639756
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1639756 - Clean-up forms.css by using :is(). r=jwatt I also removed some unneeded specific selectors for ::placeholder / ::-moz-text-control-editing-root / etc. We only query them for textarea / input elements, so it is more of a pesimization than an optimization. Differential Revision: https://phabricator.services.mozilla.com/D76263
layout/style/res/forms.css
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -133,22 +133,19 @@ input, textarea, select, button {
   letter-spacing: initial;
   /* Note that line-height is also reset for all these, via the font shorthand */
 }
 
 textarea > scrollbar {
   cursor: default;
 }
 
-textarea::-moz-text-control-editing-root,
-input::-moz-text-control-editing-root,
-input::placeholder,
-textarea::placeholder,
-input::-moz-text-control-preview,
-textarea::-moz-text-control-preview {
+::-moz-text-control-editing-root,
+::placeholder,
+::-moz-text-control-preview {
   overflow: auto;
   border: 0;
   padding: inherit;
   margin: 0;
   text-decoration: inherit;
   display: inline-block;
   ime-mode: inherit;
   resize: inherit;
@@ -176,20 +173,18 @@ input[type=password]::-moz-text-control-
 
 textarea::-moz-text-control-editing-root {
   scroll-behavior: inherit;
   overscroll-behavior: inherit;
   /* StyleAdjuster makes sure that the overflow value ends up being scrollable */
   overflow: inherit;
 }
 
-input::placeholder,
-textarea::placeholder,
-input::-moz-text-control-preview,
-textarea::-moz-text-control-preview {
+::placeholder,
+::-moz-text-control-preview {
   /*
    * Changing display to inline can leads to broken behaviour and will assert.
    */
   display: inline-block;
 
   /*
    * Changing resize would display a broken behaviour and will assert.
    */
@@ -199,18 +194,17 @@ textarea::-moz-text-control-preview {
 
   /*
    * The placeholder or preview should be ignored by pointer otherwise, we might have some
    * unexpected behavior like the resize handle not being selectable.
    */
   pointer-events: none;
 }
 
-input::placeholder,
-textarea::placeholder {
+::placeholder {
   opacity: 0.54;
 }
 
 textarea::placeholder,
 textarea::-moz-text-control-preview {
   white-space: pre-wrap !important;
 }
 
@@ -246,30 +240,27 @@ select {
 select:active:hover {
   color: -moz-gtk-buttonactivetext;
 }
 %endif
 
 /* Need the "select[size][multiple]" selector to override the settings on
    'select[size="1"]', eg if one has <select size="1" multiple> */
 
-select[size],
-select[multiple],
-select[size][multiple] {
+select:is([size], [multiple], [size][multiple]) {
   /* Different alignment and padding for listbox vs combobox */
   background-color: -moz-Field;
   color: -moz-FieldText;
   padding-block: 1px;
   padding-inline: 0;
   vertical-align: text-bottom;
   -moz-appearance: listbox;
 }
 
-select[size="0"],
-select[size="1"] {
+select:is([size="0"], [size="1"]) {
   /* Except this is not a listbox */
   background-color: -moz-Combobox;
   color: -moz-ComboboxText;
   vertical-align: baseline;
   padding: unset;
   -moz-appearance: menulist;
 }
 
@@ -504,17 +495,17 @@ input[type="file"] > label {
 /* button part of file selector */
 input[type="file"] > button {
   font-size: unset;
   letter-spacing: unset;
   cursor: unset;
 }
 
 /* colored part of the color selector button */
-input[type="color"]::-moz-color-swatch {
+::-moz-color-swatch {
   width: 100%;
   height: 100%;
   min-width: 3px;
   min-height: 3px;
   margin-inline: auto;
   box-sizing: border-box;
   border: 1px solid grey;
   display: block;
@@ -542,24 +533,17 @@ input[type="checkbox"] {
   cursor: default;
   /* unset some values from the general 'input' rule above: */
   padding: unset;
   border: unset;
   background-color: unset;
   color: unset;
 }
 
-input[type="radio"]:disabled,
-input[type="radio"]:disabled:active,
-input[type="radio"]:disabled:hover,
-input[type="radio"]:disabled:hover:active,
-input[type="checkbox"]:disabled,
-input[type="checkbox"]:disabled:active,
-input[type="checkbox"]:disabled:hover,
-input[type="checkbox"]:disabled:hover:active {
+input:is([type="radio"], [type="checkbox"]):is(:disabled, :disabled:active, :disabled:hover:active) {
   cursor: unset;
 }
 
 input:not([type="file"]):not([type="image"]):-moz-focusring,
 select:-moz-focusring,
 button:-moz-focusring,
 textarea:-moz-focusring {
   /* These elements can handle outline themselves when themed, so we use
@@ -575,39 +559,34 @@ input[type="search"] {
 /* buttons */
 
 /* Note: Values in nsNativeTheme IsWidgetStyled function
    need to match button background/border values here */
 
 /* Non text-related properties for buttons: these ones are shared with
    input[type="color"] */
 button,
-input[type="color"],
-input[type="reset"],
-input[type="button"],
-input[type="submit"] {
+input:is([type="color"], [type="reset"], [type="button"], [type="submit"]) {
   -moz-appearance: button;
   /* The sum of border and padding on block-start and block-end
      must be the same here, for text inputs, and for <select>.
      Note -moz-focus-inner padding does not affect button size. */
   padding-block: 0;
   padding-inline: 8px;
   border: 2px outset ThreeDLightShadow;
   background-color: ButtonFace;
   cursor: default;
   box-sizing: border-box;
   user-select: none;
 }
 
 /* Text-related properties for buttons: these ones are not shared with
    input[type="color"] */
 button,
-input[type="reset"],
-input[type="button"],
-input[type="submit"] {
+input:is([type="reset"], [type="button"], [type="submit"]) {
   color: ButtonText;
   font: -moz-button;
   white-space: pre;
   text-align: center;
   overflow-clip-box: padding-box;
 }
 
 input[type="color"] {
@@ -653,102 +632,69 @@ button {
   /* CSS Align */
   align-content: inherit;
   align-items: inherit;
   justify-content: inherit;
   justify-items: inherit;
 }
 
 button:hover,
-input[type="color"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-input[type="submit"]:hover {
+input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):hover {
   background-color: -moz-buttonhoverface;
 }
 
 button:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-input[type="submit"]:hover {
+input:is([type="reset"], [type="button"], [type="submit"]):hover {
   color: -moz-buttonhovertext;
 }
 
 button:active:hover,
-input[type="color"]:active:hover,
-input[type="reset"]:active:hover,
-input[type="button"]:active:hover,
-input[type="submit"]:active:hover {
+input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):active:hover {
 %ifndef XP_MACOSX
   padding-block: 0;
   padding-inline: 9px 7px;
 %endif
   border-style: inset;
   background-color: ButtonFace;
 }
 
 button:active:hover,
-input[type="reset"]:active:hover,
-input[type="button"]:active:hover,
-input[type="submit"]:active:hover {
+input:is([type="reset"], [type="button"], [type="submit"]):active:hover {
 %ifdef MOZ_WIDGET_GTK
   color: -moz-gtk-buttonactivetext;
 %else
   color: ButtonText;
 %endif
 }
 
-
-button::-moz-focus-inner,
-input[type="color"]::-moz-focus-inner,
-input[type="reset"]::-moz-focus-inner,
-input[type="button"]::-moz-focus-inner,
-input[type="submit"]::-moz-focus-inner {
+::-moz-focus-inner {
   /* Note this padding only affects the -moz-focus-inner ring, not the button itself */
   padding-block: 0;
   padding-inline: 2px;
   border: 1px dotted transparent;
 }
 
-button:-moz-focusring::-moz-focus-inner,
-input[type="color"]:-moz-focusring::-moz-focus-inner,
-input[type="reset"]:-moz-focusring::-moz-focus-inner,
-input[type="button"]:-moz-focusring::-moz-focus-inner,
-input[type="submit"]:-moz-focusring::-moz-focus-inner {
+:-moz-focusring::-moz-focus-inner {
   border-color: currentColor;
 }
 
-button:disabled:active, button:disabled,
-input[type="color"]:disabled:active,
-input[type="color"]:disabled,
-input[type="reset"]:disabled:active,
-input[type="reset"]:disabled,
-input[type="button"]:disabled:active,
-input[type="button"]:disabled,
-select:disabled > button,
-select:disabled > button,
-input[type="submit"]:disabled:active,
-input[type="submit"]:disabled {
+button:is(:disabled, :disabled:active),
+input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):is(:disabled, :disabled:active),
+select:is(:disabled, :disabled:active) > button {
   /* The sum of border and padding on block-start and block-end
      must be the same here and for text inputs */
   padding-block: 0;
   padding-inline: 8px;
   border: 2px outset ThreeDLightShadow;
   cursor: unset;
 }
 
-button:disabled:active, button:disabled,
-input[type="reset"]:disabled:active,
-input[type="reset"]:disabled,
-input[type="button"]:disabled:active,
-input[type="button"]:disabled,
-select:disabled > button,
-select:disabled > button,
-input[type="submit"]:disabled:active,
-input[type="submit"]:disabled {
+button:is(:disabled, :disabled:active),
+input:is([type="reset"], [type="button"], [type="submit"]):is(:disabled, :disabled:active),
+select:is(:disabled, :disabled:active) > button {
   color: GrayText;
 }
 
  /*
   * Make form controls inherit 'unicode-bidi' transparently as required by
   *  their various anonymous descendants and pseudo-elements:
   *
   * <textarea> and <input type="text">:
@@ -760,39 +706,38 @@ input[type="submit"]:disabled {
   *  inherit into the ':-moz-button-content' pseudo-element.
   *
   * <select>:
   *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
   *  the <optgroup>'s ':before' pseudo-element, which is where the label of
   *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
   *  so they need no special rules.
   */
-textarea::-moz-text-control-editing-root,
-input::-moz-text-control-editing-root,
-input::placeholder,
-textarea::placeholder,
+::-moz-text-control-editing-root,
+::placeholder,
 *|*::-moz-button-content,
 *|*::-moz-display-comboboxcontrol-frame,
 optgroup:before {
   unicode-bidi: inherit;
   text-overflow: inherit;
 }
 
 /**
  * Set default style for invalid elements.
  */
-:not(output):-moz-ui-invalid {
+:-moz-ui-invalid {
   box-shadow: 0 0 1.5px 1px red;
 }
 
-:not(output):-moz-ui-invalid:-moz-focusring {
+:-moz-ui-invalid:-moz-focusring {
   box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
 }
 
 output:-moz-ui-invalid {
+  box-shadow: initial;
   color: red;
 }
 
 @media print {
   input, textarea, select, button {
     -moz-user-input: none !important;
   }
 
@@ -1044,20 +989,17 @@ input[type="number"] > div > div > div:h
 
 input[type="date"],
 input[type="time"] {
   overflow: hidden !important;
   font-family: -moz-fixed;
   cursor: default;
 }
 
-input[type="date"]:disabled,
-input[type="time"]:disabled,
-input[type="date"]:read-only,
-input[type="time"]:read-only {
+input:is([type="date"], [type="time"]):is(:disabled, :read-only) {
   color: GrayText;
 }
 
 :-moz-autofill, :-moz-autofill-preview {
   filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
 }
 :-moz-autofill-preview {
   color: GrayText;