Bug 1508369 - clean up browser CSS to pass basic stylelint rules, r=desktop-theme-reviewers,webcompat-reviewers,extension-reviewers,devtools-reviewers,nchevobbe,denschub,dao

Differential Revision: https://phabricator.services.mozilla.com/D177476

Author: gijsk

browser/base/content/browser.css

@@ -43,11 +43,6 @@ body {
   min-height: 0;
 }
 
-.browserContainer {
-  /* .browserContainer only contains the devtools when docked horizontally */
-  min-height: 0;
-}
-
 /* We set large flex on both containers to allow the devtools toolbox to
  * set a flex value itself. We don't want the toolbox to actually take up free
  * space, but we do want it to collapse when the window shrinks, and with
@@ -60,6 +55,9 @@ body {
   flex: 10000 10000;
   /* To contain the status panel */
   position: relative;
+
+  /* .browserContainer only contains the devtools when docked horizontally */
+  min-height: 0;
 }
 
 .browserStack {

browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_font.css

@@ -2,6 +2,7 @@
   font-family: testFont;
   src: url(http://example.com/browser/devtools/client/fontinspector/test/browser_font.woff);
 }
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
 body {
   font-family: Arial;
 }

browser/components/extensions/extension.css

@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* stylelint-disable property-no-vendor-prefix */
-/* stylelint-disable property-no-vendor-prefix */
 
 /* Global */
 html,
@@ -31,7 +30,6 @@ body * {
   text-align: left;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 /* Buttons */
 button.browser-style,
 select.browser-style {
@@ -346,7 +344,6 @@ textarea.browser-style:invalid:not(:focus) {
     0 0 0 4px rgba(251, 0, 34, 0.3);
 }
 
-/* stylelint-disable property-no-vendor-prefix */
 .panel-section {
   display: flex;
   flex-direction: row;

browser/components/firefoxview/moz-tab-row.css

@@ -10,7 +10,6 @@
   display: grid;
   grid-template-columns: subgrid;
   grid-column: span 6;
-  border-radius: 4px;
   align-items: stretch;
   border-radius: 4px;
 }

browser/components/protections/content/protections.css

@@ -292,12 +292,11 @@ a.hidden,
   -moz-context-properties: fill;
   fill: var(--gear-icon-fill);
   background: url("chrome://global/skin/icons/settings.svg") no-repeat 0;
-  font-size: 0.75em;
   cursor: pointer;
   width: max-content;
   color: var(--in-content-deemphasized-text);
   margin-block: 6px 0;
-  font-size: 12px;
+  font-size: 0.8em;
   padding-block: 4px;
   padding-inline: 24px 4px;
 }

browser/components/screenshots/overlay/overlay.css

@@ -141,7 +141,6 @@
 }
 
 :-moz-native-anonymous .screenshots-button {
-  appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -154,7 +153,7 @@
   min-width: 36px;
   z-index: 6;
   margin-inline: 4px;
-  font-family: "Segoe UI";
+  font-family: "Segoe UI", sans-serif;
 
   /* Below styles are copied from common-shared.css */
   appearance: none;

browser/extensions/webcompat/about-compat/aboutCompat.css

@@ -108,7 +108,6 @@
     z-index: 2;
     display: inline-block;
     text-align: left;
-    font-weight: bold;
     border-block: 2px solid transparent;
     font-size: 1em;
     font-weight: bold;

browser/themes/linux/places/organizer.css

@@ -83,7 +83,6 @@
 }
 
 #placesMenu > menu::after {
-  content: "";
   display: flex;
   width: 12px;
   height: 12px;

browser/themes/shared/tabs.css

@@ -7,8 +7,6 @@
 :root {
   --tab-min-height: 36px;
   --inline-tab-padding: 8px;
-  /* Value for --in-content-page-background in in-content/common.inc.css */
-  --tabpanel-background-color: #f9f9fa;
   --tab-border-radius: 4px;
   --tab-shadow-max-size: 6px;
   --tab-block-margin: 4px;

browser/themes/shared/toolbarbutton-icons.css

@@ -340,6 +340,8 @@ toolbar[brighttext]:-moz-lwtheme {
   from {
     transform: translateX(0);
   }
+  /* Bug 1831300 is on file for this. */
+  /* stylelint-disable-next-line keyframe-block-no-duplicate-selectors */
   from {
     transform: translateX(-832px);
   }

browser/themes/shared/urlbar-searchbar.css

@@ -607,7 +607,6 @@
 
 #urlbar-zoom-button {
   appearance: none;
-  color: inherit;
   font-size: .8em;
   padding: 3px 7px;
   border-radius: var(--urlbar-icon-border-radius);

devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css

@@ -108,7 +108,6 @@
 }
 
 .network-monitor .custom-header {
-  border-bottom-width: 1px;
   border-style: solid;
   border-width: 0;
   flex: none;

devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css

@@ -215,7 +215,6 @@
 }
 
 .network-monitor .http-custom-header {
-  border-bottom-width: 1px;
   border-style: solid;
   border-width: 0;
   flex: none;

devtools/client/shared/components/SmartTrace.css

@@ -147,7 +147,6 @@
 
 .group .img.arrow {
     mask: url("chrome://devtools/content/debugger/images/arrow.svg");
-    mask-size: auto;
     margin-inline-end: 4px;
     background-color: var(--theme-icon-dimmed-color);
     width: 10px;

devtools/client/themes/perf.css

@@ -184,7 +184,6 @@ a.perf-photon-button:focus {
   min-width: 186px;
   padding-block: 3px;
   padding-inline: 5px;
-  border: 1px solid transparent;
 
   /* Presentational: */
   appearance: none;

devtools/client/themes/webconsole.css

@@ -498,7 +498,6 @@
 
 .message.network .message-body .status {
   flex: none;
-  cursor: default;
   margin-left: 1ch;
   cursor: default;
 }

devtools/server/actors/highlighters.css

@@ -715,7 +715,6 @@
   user-select: none;
 
   color: var(--text-color);
-  border-radius: 2px;
   box-shadow: var(--toolbar-box-shadow);
   background-color: var(--toolbar-background);
   border: 1px solid var(--toolbar-border);
@@ -729,7 +728,6 @@
   margin: 8px 4px 6px 6px;
   width: 16px;
   height: 16px;
-  mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: 16px 16px;
@@ -767,7 +765,6 @@
 }
 
 :-moz-native-anonymous button.paused-dbg-resume-button {
-  margin-right: 6px;
   margin-right: 6px;
   mask-image: url(chrome://devtools/content/shared/images/resume.svg);
   padding: 0;
@@ -782,8 +779,6 @@
 :-moz-native-anonymous .paused-dbg-reason {
   padding: 3px 16px;
   margin: 8px 0px;
-  line-height: 20px;
-  font-size: 18px;
   font: var(--highlighter-font-family);
   font-size: var(--highlighter-font-size);
 }
@@ -825,7 +820,6 @@
   gap: 8px;
 
   padding: 8px 16px;
-  font-size: 24px;
 
   color: var(--text-color);
   box-shadow: var(--toolbar-box-shadow);

gfx/layers/layerviewer/tree.css

@@ -13,7 +13,6 @@ html, body {
 .layerHover > .layerPreview::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
-  background-color: inherit;
   content: "";
   background-color: rgba(0,0,0,0.2);
   box-shadow: -2px 2px 0 #FFF;
@@ -31,7 +30,6 @@ html, body {
 
 .layerHover > .layerPreview {
   animation: layerHoverAnimation 200ms;
-  animation-transform-origin: 50% 50%;
   background: gold !important;
   box-shadow: 10px 10px 5px #888888;
   border-color: blue !important;

layout/style/res/html.css

@@ -395,7 +395,7 @@ table[rules][rules="groups"] > thead,
 table[rules][rules="groups"] > tbody {
   border-block-start-width: thin;
   border-block-end-width: thin;
-  border-block-start-style: solid;
+  /* Note: `-end` is missing, see https://bugzilla.mozilla.org/show_bug.cgi?id=1832101 */
   border-block-start-style: solid;
 }
 

toolkit/components/aboutmemory/content/aboutMemory.css

@@ -16,7 +16,6 @@ html {
 
 body {
   padding: 0 2em;
-  margin: 0;
   min-width: 45em;
   margin: auto;
 }

toolkit/content/widgets/message-bar.css

@@ -186,7 +186,7 @@
   display: block;
   width: 2px;
   position: absolute;
-  background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
+  background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
   top: 0;
   inset-inline-start: 0;
   height: 100%;

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -358,7 +358,6 @@ addon-card[expanded] .update-postponed-bar + .addon-card-message {
 
 .theme-enable-button {
   min-width: auto;
-  height: auto;
   font-size: 13px;
   min-height: auto;
   height: 24px;

toolkit/themes/mobile/global/aboutMemory.css

@@ -16,7 +16,6 @@ html {
 
 body {
   padding: 0 2em;
-  margin: 0;
   min-width: 45em;
   margin: auto;
 }

toolkit/themes/osx/global/menu.css

@@ -113,6 +113,7 @@ menubar > menu[_moz-menuactive="true"][open="true"] {
 /* menu/menuitems in popups */
 
 menupopup {
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
   font: -moz-pull-down-menu;
 }
 

toolkit/themes/osx/global/splitter.css

@@ -32,7 +32,6 @@ splitter[state="collapsed"][substate="before"]:-moz-locale-dir(rtl) {
 
 splitter[orient="vertical"] {
   cursor: ns-resize;
-  min-width: 0px;
   min-height: 9px;
   min-width: 9px;
 }

toolkit/themes/shared/aboutCache.css

@@ -24,7 +24,7 @@ th {
 }
 
 td {
-  font-family: -moz-fixed;
+  font-family: monospace;
   word-wrap: break-word;
 }
 

toolkit/themes/shared/aboutCacheEntry.css

@@ -19,7 +19,7 @@ th {
 
 td {
   display: block;
-  font-family: -moz-fixed;
+  font-family: monospace;
   white-space: pre-wrap;
 }
 

toolkit/themes/shared/tree.css

@@ -294,6 +294,9 @@ html|input.tree-input {
   }
 }
 
+/* Stylelint doesn't cope with the Level 4 media query here.
+ * Filed as https://github.com/stylelint/stylelint/issues/6834 */
+/* stylelint-disable-next-line media-feature-name-no-unknown */
 @media (-moz-platform: macos) and (not (prefers-contrast)) {
     /* We show a `SelectedItem` background on selected rows, so we do not need the
        dotted outline in that case. For users who have Full Keyboard Access

tools/tryselect/selectors/chooser/static/style.css

@@ -41,7 +41,6 @@ body {
   padding-bottom: 10px;
   margin-bottom: 0;
   user-select: none;
-  user-select: none;
   vertical-align: middle;
 }