Enable some Stylelint color-related rules to slightly reduce file sizes

- Use a consistent format for all alpha-values (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/alpha-value-notation - Use modern and slightly shorter color notation, since [according to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility) that should be supported "everywhere" nowadays; see https://stylelint.io/user-guide/rules/color-function-notation/ - Use "short" hexadecimal colors whenever possible; see https://stylelint.io/user-guide/rules/color-hex-length/ - Help avoid adding broken hexadecimal colors (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/color-no-invalid-hex/
mozilla · Oct 5, 2023 · 4277205 · 4277205
1 parent a60f90a
commit 4277205
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 174 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -6,7 +6,11 @@
   "rules": {
     "prettier/prettier": true,
 
+    "alpha-value-notation": "number",
     "block-no-empty": true,
+    "color-function-notation": "modern",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-property-value-disallowed-list": {

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
@@ -26,12 +26,12 @@ html {
 }
 
 header {
-  background-color: rgba(244, 244, 244, 1);
+  background-color: rgb(244 244 244 / 1);
 }
 
 header h1 {
-  border-bottom: 1px solid rgba(216, 216, 216, 1);
-  color: rgba(133, 133, 133, 1);
+  border-bottom: 1px solid rgb(216 216 216 / 1);
+  color: rgb(133 133 133 / 1);
   font-size: 23px;
   font-style: italic;
   font-weight: normal;
@@ -44,7 +44,7 @@ header h1 {
 
 body {
   background: url(images/document_bg.png);
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
   font-family: sans-serif;
   font-size: 10px;
   height: 100%;
@@ -71,7 +71,7 @@ footer {
   left: 0;
   right: 0;
   z-index: 1;
-  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
+  box-shadow: 0 -0.2rem 0.5rem rgb(50 50 50 / 0.75);
 }
 
 .toolbarButton {
@@ -81,7 +81,7 @@ footer {
   border-width: 0;
   background-position: center center;
   background-repeat: no-repeat;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
 }
 
 .toolbarButton.pageUp {
@@ -110,9 +110,9 @@ footer {
   left: 36%;
   text-align: center;
   border: 0;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
   font-size: 1.2rem;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
   background-image: url(images/div_line_left.png),
     url(images/div_line_right.png);
   background-repeat: no-repeat;
@@ -190,8 +190,8 @@ canvas {
 
   position: relative;
   height: 0.6rem;
-  background-color: rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
+  background-color: rgb(51 51 51 / 1);
+  border-bottom: 1px solid rgb(51 51 51 / 1);
 }
 
 #loadingBar .progress {
@@ -201,7 +201,7 @@ canvas {
   transform: scaleX(var(--progressBar-percent));
   transform-origin: 0 0;
   height: 100%;
-  background-color: rgba(221, 221, 221, 1);
+  background-color: rgb(221 221 221 / 1);
   overflow: hidden;
   transition: transform 200ms;
 }
@@ -220,7 +220,7 @@ canvas {
 
 #loadingBar.indeterminate .progress {
   transform: none;
-  background-color: rgba(153, 153, 153, 1);
+  background-color: rgb(153 153 153 / 1);
   transition: none;
 }
 
@@ -232,18 +232,18 @@ canvas {
   width: 5rem;
   background-image: linear-gradient(
     to right,
-    rgba(153, 153, 153, 1) 0%,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(153, 153, 153, 1) 100%
+    rgb(153 153 153 / 1) 0%,
+    rgb(255 255 255 / 1) 50%,
+    rgb(153 153 153 / 1) 100%
   );
   background-size: 100% 100%;
   background-repeat: no-repeat;
   animation: progressIndeterminate 2s linear infinite;
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
-  color: rgba(255, 255, 255, 1);
+  background: none repeat scroll 0 0 rgb(255 85 85 / 1);
+  color: rgb(255 255 255 / 1);
   left: 0;
   position: absolute;
   right: 0;
@@ -262,8 +262,8 @@ canvas {
 }
 
 #errorMoreInfo {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 1);
+  color: rgb(0 0 0 / 1);
   padding: 0.3rem;
   margin: 0.3rem;
   width: 98%;

diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
@@ -37,8 +37,8 @@
   .fileAttachmentAnnotation:not(.hasFillAlpha)
   .popupTriggerArea {
   opacity: 0.2;
-  background: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
 .annotationLayer .fileAttachmentAnnotation.hasFillAlpha {
   outline: 2px solid yellow;
@@ -49,7 +49,7 @@
 }
 
 .annotationLayer .linkAnnotation.hasBorder {
-  background-color: rgba(255, 255, 0, 0.2);
+  background-color: rgb(255 255 0 / 0.2);
 }
 
 .annotationLayer .popupTriggerArea::after {

diff --git a/test/text_layer_test.css b/test/text_layer_test.css
@@ -26,8 +26,8 @@
   position: absolute;
   white-space: pre;
   transform-origin: 0% 0%;
-  border: solid 1px rgba(255, 0, 0, 0.5);
-  background-color: rgba(255, 255, 32, 0.1);
+  border: solid 1px rgb(255 0 0 / 0.5);
+  background-color: rgb(255 255 32 / 0.1);
   box-sizing: border-box;
 }
 

diff --git a/test/xfa_layer_builder_overrides.css b/test/xfa_layer_builder_overrides.css
@@ -15,6 +15,6 @@
 
 .xfaLink {
   opacity: 0.2;
-  background: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -45,18 +45,18 @@
   --alt-text-opacity: 0.8;
   --alt-text-add-image: url(images/altText_add.svg);
   --alt-text-done-image: url(images/altText_done.svg);
-  --alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity));
+  --alt-text-bg-color: rgb(43 42 51 / var(--alt-text-opacity));
   --alt-text-fg-color: #fbfbfe;
   --alt-text-border-color: var(--alt-text-bg-color);
-  --alt-text-hover-bg-color: rgba(82, 82, 94, var(--alt-text-opacity));
+  --alt-text-hover-bg-color: rgb(82 82 94 / var(--alt-text-opacity));
   --alt-text-hover-fg-color: var(--alt-text-fg-color);
   --alt-text-hover-border-color: var(--alt-text-hover-bg-color);
-  --alt-text-active-bg-color: rgba(91, 91, 102, var(--alt-text-opacity));
+  --alt-text-active-bg-color: rgb(91 91 102 / var(--alt-text-opacity));
   --alt-text-active-fg-color: var(--alt-text-fg-color);
   --alt-text-active-border-color: var(--alt-text-hover-bg-color);
   --alt-text-focus-outline-color: #0060df;
   --alt-text-focus-border-color: #f0f0f4;
-  --alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5);
+  --alt-text-shadow: 0 2px 6px 0 rgb(28 27 34 / 0.5);
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -558,7 +558,7 @@
       --alt-text-tooltip-bg: #f0f0f4;
       --alt-text-tooltip-fg: #15141a;
       --alt-text-tooltip-border: #8f8f9d;
-      --alt-text-tooltip-shadow: 0px 2px 6px 0px rgba(58, 57, 68, 0.2);
+      --alt-text-tooltip-shadow: 0px 2px 6px 0px rgb(58 57 68 / 0.2);
 
       @media (prefers-color-scheme: dark) {
         --alt-text-tooltip-bg: #1c1b22;
@@ -600,7 +600,7 @@
 #altTextDialog {
   --dialog-bg-color: white;
   --dialog-border-color: white;
-  --dialog-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2);
+  --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
   --text-primary-color: #15141a;
   --text-secondary-color: #5b5b66;
   --hover-filter: brightness(0.9);
@@ -635,17 +635,17 @@
     --dialog-shadow: 0 2px 14px 0 #15141a;
     --text-primary-color: #fbfbfe;
     --text-secondary-color: #cfcfd8;
-    --focus-ring-color: #00ddff;
+    --focus-ring-color: #0df;
     --hover-filter: brightness(1.4);
 
     --textarea-bg-color: #42414d;
 
     --radio-bg-color: #2b2a33;
     --radio-checked-bg-color: #15141a;
-    --radio-checked-border-color: #00ddff;
+    --radio-checked-border-color: #0df;
 
     --button-cancel-bg-color: #2b2a33;
-    --button-save-bg-color: #00ddff;
+    --button-save-bg-color: #0df;
     --button-save-fg-color: #15141a;
   }
 

diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
@@ -123,12 +123,12 @@
   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
   > a:hover {
   opacity: 0.2;
-  background-color: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background-color: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
 
 .annotationLayer .linkAnnotation.hasBorder:hover {
-  background-color: rgba(255, 255, 0, 0.2);
+  background-color: rgb(255 255 0 / 0.2);
 }
 
 .annotationLayer .hasBorder {
@@ -291,11 +291,11 @@
 }
 
 .annotationLayer .popup {
-  background-color: rgba(255, 255, 153, 1);
+  background-color: rgb(255 255 153 / 1);
   box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
-    rgba(136, 136, 136, 1);
+    rgb(136 136 136 / 1);
   border-radius: calc(2px * var(--scale-factor));
-  outline: 1.5px solid rgb(255, 255, 74);
+  outline: 1.5px solid rgb(255 255 74);
   padding: calc(6px * var(--scale-factor));
   cursor: pointer;
   font: message-box;
@@ -327,7 +327,7 @@
 }
 
 .annotationLayer .popupContent {
-  border-top: 1px solid rgba(51, 51, 51, 1);
+  border-top: 1px solid rgb(51 51 51 / 1);
   margin-top: calc(2px * var(--scale-factor));
   padding-top: calc(2px * var(--scale-factor));
 }

diff --git a/web/debugger.css b/web/debugger.css
@@ -22,8 +22,8 @@
   font: message-box;
 }
 #PDFBug {
-  background-color: rgba(255, 255, 255, 1);
-  border: 1px solid rgba(102, 102, 102, 1);
+  background-color: rgb(255 255 255 / 1);
+  border: 1px solid rgb(102 102 102 / 1);
   position: fixed;
   top: 32px;
   right: 0;
@@ -33,8 +33,8 @@
   width: var(--panel-width);
 }
 #PDFBug .controls {
-  background: rgba(238, 238, 238, 1);
-  border-bottom: 1px solid rgba(102, 102, 102, 1);
+  background: rgb(238 238 238 / 1);
+  border-bottom: 1px solid rgb(102 102 102 / 1);
   padding: 3px;
 }
 #PDFBug .panels {
@@ -50,7 +50,7 @@
 }
 .debuggerShowText,
 .debuggerHideText:hover {
-  background-color: rgba(255, 255, 0, 1);
+  background-color: rgb(255 255 0 / 1);
 }
 #PDFBug .stats {
   font-family: courier;
@@ -82,30 +82,30 @@
 }
 
 #viewer.textLayer-visible .canvasWrapper {
-  background-color: rgba(128, 255, 128, 1);
+  background-color: rgb(128 255 128 / 1);
 }
 
 #viewer.textLayer-visible .canvasWrapper canvas {
   mix-blend-mode: screen;
 }
 
 #viewer.textLayer-visible .textLayer span {
-  background-color: rgba(255, 255, 0, 0.1);
-  color: rgba(0, 0, 0, 1);
-  border: solid 1px rgba(255, 0, 0, 0.5);
+  background-color: rgb(255 255 0 / 0.1);
+  color: rgb(0 0 0 / 1);
+  border: solid 1px rgb(255 0 0 / 0.5);
   box-sizing: border-box;
 }
 
 #viewer.textLayer-visible .textLayer span[aria-owns] {
-  background-color: rgba(255, 0, 0, 0.3);
+  background-color: rgb(255 0 0 / 0.3);
 }
 
 #viewer.textLayer-hover .textLayer span:hover {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 1);
+  color: rgb(0 0 0 / 1);
 }
 
 #viewer.textLayer-shadow .textLayer span {
-  background-color: rgba(255, 255, 255, 0.6);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 0.6);
+  color: rgb(0 0 0 / 1);
 }
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
@@ -79,7 +79,7 @@
   overflow: visible;
   border: var(--page-border);
   background-clip: content-box;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: rgb(255 255 255 / 1);
 }
 
 .pdfViewer .dummyPage {

diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
@@ -14,8 +14,8 @@
  */
 
 :root {
-  --highlight-bg-color: rgba(180, 0, 170, 1);
-  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+  --highlight-bg-color: rgb(180 0 170 / 1);
+  --highlight-selected-bg-color: rgb(0 100 0 / 1);
 }
 
 @media screen and (forced-colors: active) {