From 529dbf9b6522b796d16674de4572d38868249f25 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Tue, 18 Apr 2023 15:46:51 +0200
Subject: [PATCH] Enforce double-colon notation for CSS pseudo-elements

These changes are part of https://phabricator.services.mozilla.com/D170496, and thanks to a Stylelint rule we can both enforce and fix this automatically; see also https://stylelint.io/user-guide/rules/selector-pseudo-element-colon-notation/
---
 .stylelintrc                     |  1 +
 web/annotation_layer_builder.css | 16 ++++++++--------
 web/pdf_viewer.css               |  6 +++---
 web/viewer.css                   | 20 ++++++++++----------
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index 6a2e42d5d..97077b87f 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -14,6 +14,7 @@
     "length-zero-no-unit": [true, {
       ignore: ["custom-properties"]
     }],
+    "selector-pseudo-element-colon-notation": "double",
     "shorthand-property-no-redundant-values": true,
   },
 }
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 6a6d95b44..1fbed32a5 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -192,31 +192,31 @@
   outline: var(--input-focus-outline);
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
   background-color: CanvasText;
   content: "";
   display: block;
   position: absolute;
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
   height: 80%;
   left: 45%;
   width: 1px;
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
   transform: rotate(45deg);
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
   transform: rotate(-45deg);
 }
 
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
   border-radius: 50%;
   height: 50%;
   left: 30%;
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index 0e806e41b..9f77c28b1 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -167,7 +167,7 @@
   height: 100%;
 }
 
-.pdfViewer .page.loadingIcon:after {
+.pdfViewer .page.loadingIcon::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -184,11 +184,11 @@
   contain: strict;
 }
 
-.pdfViewer .page.loading:after {
+.pdfViewer .page.loading::after {
   display: block;
 }
 
-.pdfViewer .page:not(.loading):after {
+.pdfViewer .page:not(.loading)::after {
   transition-property: none;
   display: none;
 }
diff --git a/web/viewer.css b/web/viewer.css
index 10cb26717..f7a0a2479 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -600,10 +600,10 @@ body {
     0 0 0 1px var(--doorhanger-border-color);
   border: var(--doorhanger-border-color-whcm);
 }
-.doorHanger:after,
-.doorHanger:before,
-.doorHangerRight:after,
-.doorHangerRight:before {
+.doorHanger::after,
+.doorHanger::before,
+.doorHangerRight::after,
+.doorHangerRight::before {
   bottom: 100%;
   border: 8px solid rgba(0, 0, 0, 0);
   content: " ";
@@ -613,26 +613,26 @@ body {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
-.doorHanger:after {
+.doorHanger::after {
   inset-inline-start: 10px;
   margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
-.doorHangerRight:after {
+.doorHangerRight::after {
   inset-inline-end: 10px;
   margin-inline-end: -8px;
   border-bottom-color: var(--doorhanger-bg-color);
 }
-.doorHanger:before,
-.doorHangerRight:before {
+.doorHanger::before,
+.doorHangerRight::before {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
-.doorHanger:before {
+.doorHanger::before {
   inset-inline-start: 10px;
   margin-inline-start: -9px;
 }
-.doorHangerRight:before {
+.doorHangerRight::before {
   inset-inline-end: 10px;
   margin-inline-end: -9px;
 }