Bug 1639756 - Cleanup html.css using :is(). r=jwatt
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 21 May 2020 13:24:40 +0000
changeset 531869 ff407bdf357e75aa51b10623a2d249a4dc57e863
parent 531868 b8e3a5d241c9461def0cde60d778b429bd0fecc6
child 531870 9d8f9a2cd37f88c72c7990d2a5a60d978ea2263b
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 - Cleanup html.css using :is(). r=jwatt There's some lists code that I could technically clean up a bit more, but I erred in the side of making the selectors as fast as possible with our current infrastructure. For example, this selector list: :is(ul, ol, dir, menu, dl) ul, :is(ul, ol, dir, menu, dl) ol, :is(ul, ol, dir, menu, dl) dir, :is(ul, ol, dir, menu, dl) menu, :is(ul, ol, dir, menu, dl) dl Could be reduced to: :is(ul, ol, dir, menu, dl) :is(ul, ol, dir, menu, dl) But that means that for `dl` elements we'll selector-match all the selectors inside the :is() instead of just `dl`. Maybe it doesn't matter compared with the work of going up all the parent chain, but I erred in the side of caution for most of these. Differential Revision: https://phabricator.services.mozilla.com/D76265
layout/style/res/html.css
layout/style/res/viewsource.css
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -177,67 +177,67 @@ h1 {
   display: block;
   font-size: 2em;
   font-weight: bold;
   margin-block-start: .67em;
   margin-block-end: .67em;
 }
 
 h2,
-:-moz-any(article, aside, nav, section)
+:is(article, aside, nav, section)
 h1 {
   display: block;
   font-size: 1.5em;
   font-weight: bold;
   margin-block-start: .83em;
   margin-block-end: .83em;
 }
 
 h3,
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
 h1 {
   display: block;
   font-size: 1.17em;
   font-weight: bold;
   margin-block-start: 1em;
   margin-block-end: 1em;
 }
 
 h4,
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
 h1 {
   display: block;
   font-size: 1.00em;
   font-weight: bold;
   margin-block-start: 1.33em;
   margin-block-end: 1.33em;
 }
 
 h5,
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
 h1 {
   display: block;
   font-size: 0.83em;
   font-weight: bold;
   margin-block-start: 1.67em;
   margin-block-end: 1.67em;
 }
 
 h6,
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
-:-moz-any(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
+:is(article, aside, nav, section)
 h1 {
   display: block;
   font-size: 0.67em;
   font-weight: bold;
   margin-block-start: 2.33em;
   margin-block-end: 2.33em;
 }
 
@@ -597,36 +597,36 @@ ol {
 }
 
 li {
   display: list-item;
   text-align: match-parent;
 }
 
 /* nested lists have no top/bottom margins */
-:-moz-any(ul, ol, dir, menu, dl) ul,
-:-moz-any(ul, ol, dir, menu, dl) ol,
-:-moz-any(ul, ol, dir, menu, dl) dir,
-:-moz-any(ul, ol, dir, menu, dl) menu,
-:-moz-any(ul, ol, dir, menu, dl) dl {
+:is(ul, ol, dir, menu, dl) ul,
+:is(ul, ol, dir, menu, dl) ol,
+:is(ul, ol, dir, menu, dl) dir,
+:is(ul, ol, dir, menu, dl) menu,
+:is(ul, ol, dir, menu, dl) dl {
   margin-block-start: 0;
   margin-block-end: 0;
 }
 
 /* 2 deep unordered lists use a circle */
-:-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) dir {
+:is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) dir {
   list-style-type: circle;
 }
 
 /* 3 deep (or more) unordered lists use a square */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
   list-style-type: square;
 }
 
 
 /* leafs */
 
 /* <hr> noshade and color attributes are handled completely by
  * the nsHTMLHRElement attribute mapping code
@@ -642,32 +642,34 @@ hr {
   -moz-float-edge: margin-box;
   box-sizing: content-box;
 }
 
 hr[size="1"] {
   border-style: solid none none none;
 }
 
-img:-moz-broken::before, input:-moz-broken::before,
-img:-moz-user-disabled::before, input:-moz-user-disabled::before {
+input:is(:-moz-broken, :-moz-user-disabled)::before,
+img:is(:-moz-broken, :-moz-user-disabled)::before {
   content: -moz-alt-content !important;
   unicode-bidi: isolate;
 }
 
-object:-moz-any(:-moz-broken,:-moz-user-disabled) > *|* {
+object:is(:-moz-broken,:-moz-user-disabled) > *|* {
   /*
     Inherit in the object's alignment so that if we aren't aligned explicitly
     we'll end up in the right place vertically.  See bug 36997.  Note that this
     is not !important because we _might_ be aligned explicitly.
   */
   vertical-align: inherit;
 }
 
-img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
+img:-moz-suppressed,
+input:-moz-suppressed,
+object:-moz-suppressed,
 embed:-moz-suppressed {
   /*
     Set visibility too in case the page changes display.  Note that we _may_
     want to just set visibility and not display, in general, if we find that
     display:none breaks too many layouts.  And if we decide we really do want
     people to be able to right-click blocked images, etc, we need to set
     neither one, and hack the painting code.... :(
    */
@@ -791,25 +793,23 @@ video > .caption-box {
   font: var(--cue-font-size) sans-serif;
   writing-mode: var(--cue-writing-mode, inherit);
   overflow-wrap: break-word;
   /* TODO : enable unicode-bidi, right now enable it would cause incorrect
             display direction, maybe related with bug 1558431. */
 }
 
 /* details & summary */
-details > summary:first-of-type,
-details > summary:-moz-native-anonymous {
+details > summary:is(:first-of-type, :-moz-native-anonymous) {
   display: list-item;
   counter-increment: list-item 0;
   list-style: disclosure-closed inside;
 }
 
-details[open] > summary:first-of-type,
-details[open] > summary:-moz-native-anonymous {
+details[open] > summary:is(:first-of-type, :-moz-native-anonymous) {
   list-style-type: disclosure-open;
 }
 
 details > summary:first-of-type > *|* {
   /* Cancel "list-style-position: inside" inherited from summary. */
   list-style-position: initial;
 }
 
@@ -845,17 +845,17 @@ dialog::backdrop {
 
 marquee {
   inline-size: -moz-available;
   display: inline-block;
   vertical-align: text-bottom;
   text-align: start;
 }
 
-marquee[direction="up"], marquee[direction="down"] {
+marquee:is([direction="up"], [direction="down"]) {
   block-size: 200px;
 }
 
 /* Ruby */
 
 ruby {
   display: ruby;
 }
--- a/layout/style/res/viewsource.css
+++ b/layout/style/res/viewsource.css
@@ -89,13 +89,13 @@ span[id]:before {
 }
 span:not(.error), a:not(.error) {
  unicode-bidi: embed;
 }
 span[id] {
  unicode-bidi: isolate;
 }
 .highlight .error,
-.highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
-                              .pi, .entity, .attribute-name, .attribute-value) {
+.highlight .error > :is(.start-tag, .end-tag, .comment, .cdata, .doctype,
+                        .pi, .entity, .attribute-name, .attribute-value) {
   color: red;
   font-weight: bold;
 }