From 697255d7cc0110c330bbc75a93b9b02742dbdeac Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Mon, 27 May 2024 12:38:31 +0200
Subject: [PATCH] Move the dialog css stuff in its own file

In order to share common parts between different dialogs, this patch
aims to slightly refactor the css in making it more generic.
This way it'll simplify adding a new dialog (we want to add a new one when
leaving an unsaved document).
---
 web/annotation_editor_layer_builder.css | 206 +---------------------
 web/dialog.css                          | 224 ++++++++++++++++++++++++
 web/pdf_viewer.css                      |   1 +
 web/viewer.html                         |   8 +-
 4 files changed, 231 insertions(+), 208 deletions(-)
 create mode 100644 web/dialog.css

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index 9761714a5..346427df9 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -693,104 +693,13 @@
   }
 }
 
-#altTextDialog {
-  --dialog-bg-color: white;
-  --dialog-border-color: white;
-  --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);
-  --focus-ring-color: #0060df;
-  --focus-ring-outline: 2px solid var(--focus-ring-color);
-
-  --textarea-border-color: #8f8f9d;
-  --textarea-bg-color: white;
-  --textarea-fg-color: var(--text-secondary-color);
-
-  --radio-bg-color: #f0f0f4;
-  --radio-checked-bg-color: #fbfbfe;
-  --radio-border-color: #8f8f9d;
-  --radio-checked-border-color: #0060df;
-
-  --button-cancel-bg-color: #f0f0f4;
-  --button-cancel-fg-color: var(--text-primary-color);
-  --button-cancel-border-color: var(--button-cancel-bg-color);
-  --button-cancel-hover-bg-color: var(--button-cancel-bg-color);
-  --button-cancel-hover-fg-color: var(--button-cancel-fg-color);
-  --button-cancel-hover-border-color: var(--button-cancel-hover-bg-color);
-
-  --button-save-bg-color: #0060df;
-  --button-save-fg-color: #fbfbfe;
-  --button-save-hover-bg-color: var(--button-save-bg-color);
-  --button-save-hover-fg-color: var(--button-save-fg-color);
-  --button-save-hover-border-color: var(--button-save-hover-bg-color);
-
-  @media (prefers-color-scheme: dark) {
-    --dialog-bg-color: #1c1b22;
-    --dialog-border-color: #1c1b22;
-    --dialog-shadow: 0 2px 14px 0 #15141a;
-    --text-primary-color: #fbfbfe;
-    --text-secondary-color: #cfcfd8;
-    --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: #0df;
-
-    --button-cancel-bg-color: #2b2a33;
-    --button-save-bg-color: #0df;
-    --button-save-fg-color: #15141a;
-  }
-
-  @media screen and (forced-colors: active) {
-    --dialog-bg-color: Canvas;
-    --dialog-border-color: CanvasText;
-    --dialog-shadow: none;
-    --text-primary-color: CanvasText;
-    --text-secondary-color: CanvasText;
-    --hover-filter: none;
-    --focus-ring-color: ButtonBorder;
-
-    --textarea-border-color: ButtonBorder;
-    --textarea-bg-color: Field;
-    --textarea-fg-color: ButtonText;
-
-    --radio-bg-color: ButtonFace;
-    --radio-checked-bg-color: ButtonFace;
-    --radio-border-color: ButtonText;
-    --radio-checked-border-color: ButtonText;
-
-    --button-cancel-bg-color: ButtonFace;
-    --button-cancel-fg-color: ButtonText;
-    --button-cancel-border-color: ButtonText;
-    --button-cancel-hover-bg-color: AccentColor;
-    --button-cancel-hover-fg-color: AccentColorText;
-
-    --button-save-bg-color: ButtonText;
-    --button-save-fg-color: ButtonFace;
-    --button-save-hover-bg-color: AccentColor;
-    --button-save-hover-fg-color: AccentColorText;
-  }
-
-  font: message-box;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 150%;
-  border-radius: 4px;
-  padding: 12px 16px;
-  border: 1px solid var(--dialog-border-color);
-  background: var(--dialog-bg-color);
-  color: var(--text-primary-color);
-  box-shadow: var(--dialog-shadow);
-
+.dialog.altText {
   &::backdrop {
     /* This is needed to avoid to darken the image the user want to describe. */
     mask: url(#alttext-manager-mask);
   }
 
+  /* See alt_text_manager.js */
   &.positioned {
     margin: 0;
   }
@@ -803,58 +712,6 @@
     align-items: flex-start;
     gap: 16px;
 
-    & *:focus-visible {
-      outline: var(--focus-ring-outline);
-      outline-offset: 2px;
-    }
-
-    & .radio {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 4px;
-
-      & .radioButton {
-        display: flex;
-        gap: 8px;
-        align-self: stretch;
-        align-items: center;
-
-        & input {
-          appearance: none;
-          box-sizing: border-box;
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          background-color: var(--radio-bg-color);
-          border: 1px solid var(--radio-border-color);
-
-          &:hover {
-            filter: var(--hover-filter);
-          }
-
-          &:checked {
-            background-color: var(--radio-checked-bg-color);
-            border: 4px solid var(--radio-checked-border-color);
-          }
-        }
-      }
-
-      & .radioLabel {
-        display: flex;
-        padding-inline-start: 24px;
-        align-items: flex-start;
-        gap: 10px;
-        align-self: stretch;
-
-        & span {
-          flex: 1 0 0;
-          font-size: 11px;
-          color: var(--text-secondary-color);
-        }
-      }
-    }
-
     & #overallDescription {
       display: flex;
       flex-direction: column;
@@ -884,27 +741,8 @@
         padding-inline: 24px 10px;
 
         textarea {
-          font: inherit;
           width: 100%;
           min-height: 75px;
-          padding: 8px;
-          resize: none;
-          margin: 0;
-          box-sizing: border-box;
-          border-radius: 4px;
-          border: 1px solid var(--textarea-border-color);
-          background: var(--textarea-bg-color);
-          color: var(--textarea-fg-color);
-
-          &:focus {
-            outline-offset: 0;
-            border-color: transparent;
-          }
-
-          &:disabled {
-            pointer-events: none;
-            opacity: 0.4;
-          }
         }
       }
     }
@@ -915,46 +753,6 @@
       align-items: flex-start;
       gap: 8px;
       align-self: stretch;
-
-      button {
-        border-radius: 4px;
-        border: 1px solid;
-        font: menu;
-        font-weight: 600;
-        padding: 4px 16px;
-        width: auto;
-        height: 32px;
-
-        &:hover {
-          cursor: pointer;
-          filter: var(--hover-filter);
-        }
-
-        &#altTextCancel {
-          color: var(--button-cancel-fg-color);
-          background-color: var(--button-cancel-bg-color);
-          border-color: var(--button-cancel-border-color);
-
-          &:hover {
-            color: var(--button-cancel-hover-fg-color);
-            background-color: var(--button-cancel-hover-bg-color);
-            border-color: var(--button-cancel-hover-border-color);
-          }
-        }
-
-        &#altTextSave {
-          color: var(--button-save-hover-fg-color);
-          background-color: var(--button-save-hover-bg-color);
-          border-color: var(--button-save-hover-border-color);
-          opacity: 1;
-
-          &:hover {
-            color: var(--button-save-hover-fg-color);
-            background-color: var(--button-save-hover-bg-color);
-            border-color: var(--button-save-hover-border-color);
-          }
-        }
-      }
     }
   }
 }
diff --git a/web/dialog.css b/web/dialog.css
new file mode 100644
index 000000000..13a78900f
--- /dev/null
+++ b/web/dialog.css
@@ -0,0 +1,224 @@
+/* Copyright 2022 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dialog {
+  --dialog-bg-color: white;
+  --dialog-border-color: white;
+  --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);
+  --focus-ring-color: #0060df;
+  --focus-ring-outline: 2px solid var(--focus-ring-color);
+
+  --textarea-border-color: #8f8f9d;
+  --textarea-bg-color: white;
+  --textarea-fg-color: var(--text-secondary-color);
+
+  --radio-bg-color: #f0f0f4;
+  --radio-checked-bg-color: #fbfbfe;
+  --radio-border-color: #8f8f9d;
+  --radio-checked-border-color: #0060df;
+
+  --button-secondary-bg-color: #f0f0f4;
+  --button-secondary-fg-color: var(--text-primary-color);
+  --button-secondary-border-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-bg-color: var(--button-secondary-bg-color);
+  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
+  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
+
+  --button-primary-bg-color: #0060df;
+  --button-primary-fg-color: #fbfbfe;
+  --button-primary-hover-bg-color: var(--button-primary-bg-color);
+  --button-primary-hover-fg-color: var(--button-primary-fg-color);
+  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
+
+  @media (prefers-color-scheme: dark) {
+    --dialog-bg-color: #1c1b22;
+    --dialog-border-color: #1c1b22;
+    --dialog-shadow: 0 2px 14px 0 #15141a;
+    --text-primary-color: #fbfbfe;
+    --text-secondary-color: #cfcfd8;
+    --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: #0df;
+
+    --button-secondary-bg-color: #2b2a33;
+    --button-primary-bg-color: #0df;
+    --button-primary-fg-color: #15141a;
+  }
+
+  @media screen and (forced-colors: active) {
+    --dialog-bg-color: Canvas;
+    --dialog-border-color: CanvasText;
+    --dialog-shadow: none;
+    --text-primary-color: CanvasText;
+    --text-secondary-color: CanvasText;
+    --hover-filter: none;
+    --focus-ring-color: ButtonBorder;
+
+    --textarea-border-color: ButtonBorder;
+    --textarea-bg-color: Field;
+    --textarea-fg-color: ButtonText;
+
+    --radio-bg-color: ButtonFace;
+    --radio-checked-bg-color: ButtonFace;
+    --radio-border-color: ButtonText;
+    --radio-checked-border-color: ButtonText;
+
+    --button-secondary-bg-color: ButtonFace;
+    --button-secondary-fg-color: ButtonText;
+    --button-secondary-border-color: ButtonText;
+    --button-secondary-hover-bg-color: AccentColor;
+    --button-secondary-hover-fg-color: AccentColorText;
+
+    --button-primary-bg-color: ButtonText;
+    --button-primary-fg-color: ButtonFace;
+    --button-primary-hover-bg-color: AccentColor;
+    --button-primary-hover-fg-color: AccentColorText;
+  }
+
+  font: message-box;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 150%;
+  border-radius: 4px;
+  padding: 12px 16px;
+  border: 1px solid var(--dialog-border-color);
+  background: var(--dialog-bg-color);
+  color: var(--text-primary-color);
+  box-shadow: var(--dialog-shadow);
+
+  .mainContainer {
+    *:focus-visible {
+      outline: var(--focus-ring-outline);
+      outline-offset: 2px;
+    }
+
+    .radio {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+
+      > .radioButton {
+        display: flex;
+        gap: 8px;
+        align-self: stretch;
+        align-items: center;
+
+        input {
+          appearance: none;
+          box-sizing: border-box;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background-color: var(--radio-bg-color);
+          border: 1px solid var(--radio-border-color);
+
+          &:hover {
+            filter: var(--hover-filter);
+          }
+
+          &:checked {
+            background-color: var(--radio-checked-bg-color);
+            border: 4px solid var(--radio-checked-border-color);
+          }
+        }
+      }
+
+      > .radioLabel {
+        display: flex;
+        padding-inline-start: 24px;
+        align-items: flex-start;
+        gap: 10px;
+        align-self: stretch;
+
+        > span {
+          flex: 1 0 0;
+          font-size: 11px;
+          color: var(--text-secondary-color);
+        }
+      }
+    }
+
+    button {
+      border-radius: 4px;
+      border: 1px solid;
+      font: menu;
+      font-weight: 600;
+      padding: 4px 16px;
+      width: auto;
+      height: 32px;
+
+      &:hover {
+        cursor: pointer;
+        filter: var(--hover-filter);
+      }
+
+      &.secondaryButton {
+        color: var(--button-secondary-fg-color);
+        background-color: var(--button-secondary-bg-color);
+        border-color: var(--button-secondary-border-color);
+
+        &:hover {
+          color: var(--button-secondary-hover-fg-color);
+          background-color: var(--button-secondary-hover-bg-color);
+          border-color: var(--button-secondary-hover-border-color);
+        }
+      }
+
+      &.primaryButton {
+        color: var(--button-primary-hover-fg-color);
+        background-color: var(--button-primary-hover-bg-color);
+        border-color: var(--button-primary-hover-border-color);
+        opacity: 1;
+
+        &:hover {
+          color: var(--button-primary-hover-fg-color);
+          background-color: var(--button-primary-hover-bg-color);
+          border-color: var(--button-primary-hover-border-color);
+        }
+      }
+    }
+
+    textarea {
+      font: inherit;
+      padding: 8px;
+      resize: none;
+      margin: 0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      border: 1px solid var(--textarea-border-color);
+      background: var(--textarea-bg-color);
+      color: var(--textarea-fg-color);
+
+      &:focus {
+        outline-offset: 0;
+        border-color: transparent;
+      }
+
+      &:disabled {
+        pointer-events: none;
+        opacity: 0.4;
+      }
+    }
+  }
+}
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index fb91352ae..e6b9cf729 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import url(dialog.css);
 @import url(text_layer_builder.css);
 @import url(annotation_layer_builder.css);
 @import url(xfa_layer_builder.css);
diff --git a/web/viewer.html b/web/viewer.html
index 963818a1d..092238219 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -507,8 +507,8 @@ See https://github.com/adobe-type-tools/cmap-resources
             <button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
           </div>
         </dialog>
-        <dialog id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
-          <div id="altTextContainer">
+        <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
+          <div id="altTextContainer" class="mainContainer">
             <div id="overallDescription">
               <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an option</span>
               <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
@@ -545,8 +545,8 @@ See https://github.com/adobe-type-tools/cmap-resources
               </div>
             </div>
             <div id="buttons">
-              <button id="altTextCancel" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
-              <button id="altTextSave" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
+              <button id="altTextCancel" class="secondaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
+              <button id="altTextSave" class="primaryButton" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
             </div>
           </div>
         </dialog>