Fix l10n and some CSS improvements

This commit fixes the l10n bug as well as improves l10n by making button titles and such also properly localized. It adds some misc CSS improvements including linting the CSS file in order to fix formatting.
mozilla · Oct 16, 2024 · 9a90258 · 9a90258
1 parent 4cf4815
commit 9a90258
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 172 deletions.
diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
@@ -496,6 +496,10 @@ pdfjs-editor-alt-text-settings-close-button = Close
 
 # Variables:
 #   $type (String) - the type of annotation that was just removed with an optional quantity.
-pdfjs-editor-undo-bar-text = { $type } removed
-pdfjs-editor-undo-bar-undo-button = Undo
-pdfjs-editor-undo-bar-close-button = Close
+pdfjs-editor-undo-bar-message = { $type } removed
+pdfjs-editor-undo-bar-undo-button =
+    .title = Undo
+pdfjs-editor-undo-bar-undo-button-label = Undo
+pdfjs-editor-undo-bar-close-button =
+    .title = Close
+pdfjs-editor-undo-bar-close-button-label = Close
diff --git a/web/editor_undo_bar.js b/web/editor_undo_bar.js
@@ -14,29 +14,33 @@
  */
 
 class EditorUndoBar {
-  #container;
-
-  #undoButton;
+  #boundHide = this.#hide.bind(this);
 
   #closeButton;
 
+  #container;
+
   #controller = null;
 
-  #boundHide = this.#hide.bind(this);
+  #message;
 
-  constructor({ container, undoButton, closeButton }) {
+  #undoButton;
+
+  constructor({ container, message, undoButton, closeButton }) {
     this.#container = container;
+    this.#message = message;
     this.#undoButton = undoButton;
     this.#closeButton = closeButton;
   }
 
   show(action, type) {
     this.#hide();
-    this.#container.setAttribute("data-l10n-args", JSON.stringify({ type }));
+    this.#message.setAttribute("data-l10n-args", JSON.stringify({ type }));
     this.#container.hidden = false;
 
     this.#controller = new AbortController();
     const opts = { signal: this.#controller.signal };
+
     this.#undoButton.addEventListener(
       "click",
       () => {

diff --git a/web/message_bar.css b/web/message_bar.css
@@ -14,161 +14,161 @@
  */
 
 .messageBar {
-	--closing-button-icon: url(images/messageBar_closingButton.svg);
-	--message-bar-close-button-color: var(--text-primary-color);
-	--message-bar-close-button-color-hover: var(--text-primary-color);
-	--message-bar-close-button-border-radius: 4px;
-	--message-bar-close-button-border: none;
-	--message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
-	--message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
-	--message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
-
-	@media (prefers-color-scheme: dark) {
-		--message-bar-close-button-hover-bg-color: rgb(251 251 254 / 0.14);
-		--message-bar-close-button-active-bg-color: rgb(251 251 254 / 0.21);
-		--message-bar-close-button-focus-bg-color: rgb(251 251 254 / 0.07);
-	}
-
-	@media screen and (forced-colors: active) {
-		--message-bar-close-button-color: ButtonText;
-		--message-bar-close-button-border: 1px solid ButtonText;
-		--message-bar-close-button-hover-bg-color: ButtonText;
-		--message-bar-close-button-active-bg-color: ButtonText;
-		--message-bar-close-button-focus-bg-color: ButtonText;
-		--message-bar-close-button-color-hover: HighlightText;
-	}
-
-	display: flex;
-	position: relative;
-	padding: 12px 8px 12px 0;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-	align-self: stretch;
-
-	border-radius: 4px;
-
-	border: 1px solid var(--message-bar-border-color);
-	background: var(--message-bar-bg-color);
-	color: var(--message-bar-fg-color);
-
-	> div {
-		display: flex;
-		padding-inline-start: 16px;
-		align-items: flex-start;
-		gap: 8px;
-		align-self: stretch;
-		padding-inline-end: 32px;
-
-		&::before {
-			content: "";
-			display: inline-block;
-			width: 16px;
-			height: 16px;
-			mask-image: var(--message-bar-icon);
-			mask-size: cover;
-			background-color: var(--message-bar-icon-color);
-		}
-
-		> div {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 8px;
-			flex: 1 0 0;
-
-			.title {
-				font-size: 13px;
-				font-weight: 590;
-			}
-
-			.description {
-				font-size: 13px;
-			}
-		}
-	}
-
-	.closeButton {
-		position: absolute;
-		width: 32px;
-		height: 32px;
-		inset-inline-end: 8px;
-		inset-block-start: 8px;
-		background: none;
-		border-radius: var(--message-bar-close-button-border-radius);
-		border: var(--message-bar-close-button-border);
-
-		&::before {
-			content: "";
-			display: inline-block;
-			width: 16px;
-			height: 16px;
-			mask-image: var(--closing-button-icon);
-			mask-size: cover;
-			background-color: var(--message-bar-close-button-color);
-		}
-
-		&:is(:hover, :active, :focus)::before {
-			background-color: var(--message-bar-close-button-color-hover);
-		}
-
-		&:hover {
-			background-color: var(--message-bar-close-button-hover-bg-color);
-		}
-
-		&:active {
-			background-color: var(--message-bar-close-button-active-bg-color);
-		}
-
-		&:focus {
-			background-color: var(--message-bar-close-button-focus-bg-color);
-		}
-
-		> span {
-			display: inline-block;
-			width: 0;
-			height: 0;
-			overflow: hidden;
-		}
-	}
+  --closing-button-icon: url(images/messageBar_closingButton.svg);
+  --message-bar-close-button-color: var(--text-primary-color);
+  --message-bar-close-button-color-hover: var(--text-primary-color);
+  --message-bar-close-button-border-radius: 4px;
+  --message-bar-close-button-border: none;
+  --message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
+  --message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
+  --message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
+
+  @media (prefers-color-scheme: dark) {
+    --message-bar-close-button-hover-bg-color: rgb(251 251 254 / 0.14);
+    --message-bar-close-button-active-bg-color: rgb(251 251 254 / 0.21);
+    --message-bar-close-button-focus-bg-color: rgb(251 251 254 / 0.07);
+  }
+
+  @media screen and (forced-colors: active) {
+    --message-bar-close-button-color: ButtonText;
+    --message-bar-close-button-border: 1px solid ButtonText;
+    --message-bar-close-button-hover-bg-color: ButtonText;
+    --message-bar-close-button-active-bg-color: ButtonText;
+    --message-bar-close-button-focus-bg-color: ButtonText;
+    --message-bar-close-button-color-hover: HighlightText;
+  }
+
+  display: flex;
+  position: relative;
+  padding: 12px 8px 12px 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+
+  border-radius: 4px;
+
+  border: 1px solid var(--message-bar-border-color);
+  background: var(--message-bar-bg-color);
+  color: var(--message-bar-fg-color);
+
+  > div {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      mask-image: var(--message-bar-icon);
+      mask-size: cover;
+      background-color: var(--message-bar-icon-color);
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      flex: 1 0 0;
+
+      .title {
+        font-size: 13px;
+        font-weight: 590;
+      }
+
+      .description {
+        font-size: 13px;
+      }
+    }
+  }
+
+  .closeButton {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    inset-inline-end: 8px;
+    inset-block-start: 8px;
+    background: none;
+    border-radius: var(--message-bar-close-button-border-radius);
+    border: var(--message-bar-close-button-border);
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      mask-image: var(--closing-button-icon);
+      mask-size: cover;
+      background-color: var(--message-bar-close-button-color);
+    }
+
+    &:is(:hover, :active, :focus)::before {
+      background-color: var(--message-bar-close-button-color-hover);
+    }
+
+    &:hover {
+      background-color: var(--message-bar-close-button-hover-bg-color);
+    }
+
+    &:active {
+      background-color: var(--message-bar-close-button-active-bg-color);
+    }
+
+    &:focus {
+      background-color: var(--message-bar-close-button-focus-bg-color);
+    }
+
+    > span {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+  }
 }
 
 #editorUndoBar {
-	--message-bar-icon: url(images/secondaryToolbarButton-documentProperties.svg);
-	--message-bar-icon-color: #0060df;
-	--message-bar-bg-color: #deeafc;
-	--message-bar-fg-color: #15141a;
-	--text-primary-color: #15141a;
-	--message-bar-border-color: rgb(0 0 0 / 0.08);
-
-	padding: 8px 8px 8px 0;
-
-	#editorUndoBarUndoButton {
-		background: rgba(21, 20, 26, 0.14);
-		border-radius: 4px;
-		font-weight: 590;
-		line-height: 19.5px;
-		color: #15141a;
-		border: none;
-		padding: 8px 16px;
-	}
-
-	> div {
-		align-items: center;
-	}
-
-	#editorUndoBarCloseButton {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin: 2px;
-	}
-}
-
-#toastContainer {
-	position: fixed;
-	bottom: 100px;
-	left: 50%;
-	transform: translateX(-50%);
+  /* positioning */
+  position: fixed;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  --message-bar-icon: url(images/secondaryToolbarButton-documentProperties.svg);
+  --message-bar-icon-color: #0060df;
+  --message-bar-bg-color: #deeafc;
+  --message-bar-fg-color: #15141a;
+  --text-primary-color: #15141a;
+  --message-bar-border-color: rgb(0 0 0 / 0.08);
+
+  font-family: sans-serif;
+  padding: 8px 8px 8px 0;
+
+  #editorUndoBarUndoButton {
+    background: rgb(0 0 0 / 0.08);
+    border-radius: 4px;
+    font-weight: 590;
+    line-height: 19.5px;
+    color: #15141a;
+    border: none;
+    padding: 4px 16px;
+    &:focus {
+      outline: 2px solid #0060df;
+    }
+  }
+
+  > div {
+    align-items: center;
+  }
+
+  #editorUndoBarCloseButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
diff --git a/web/viewer.html b/web/viewer.html
@@ -686,17 +686,19 @@
 <!--#endif-->
       </div>  <!-- dialogContainer -->
 
-      <div id="toastContainer">
-        <div id="editorUndoBar" class="messageBar" hidden>
+      <div id="editorUndoBar" class="messageBar" hidden>
+        <div>
           <div>
-            <div>
-              <span class="description" data-l10n-id="pdfjs-editor-undo-bar-text" data-l10n-args='{"type": "annotation"}'>[Annotation] removed</span>
-            </div>
-            <button id="editorUndoBarUndoButton" class="undoButton" type="button" tabindex="0" title="Undo"><span data-l10n-id="pdfjs-editor-undo-bar-undo-button">Undo</span></button>
-            <button id="editorUndoBarCloseButton" class="closeButton" type="button" tabindex="0" title="Close"><span data-l10n-id="pdfjs-editor-undo-bar-close-button">Close</span></button>
-          </div>
+            <span id="editorUndoBarMessage" class="description" data-l10n-id="pdfjs-editor-undo-bar-message" data-l10n-args='{ "type": "Annotation" }'>[Annotation] removed</span>
+          </div>
+          <button id="editorUndoBarUndoButton" class="undoButton" type="button" tabindex="0" title="Undo" data-l10n-id="pdfjs-editor-undo-bar-undo-button">
+            <span data-l10n-id="pdfjs-editor-undo-bar-undo-button-label">Undo</span>
+          </button>
+          <button id="editorUndoBarCloseButton" class="closeButton" type="button" tabindex="0" title="Close" data-l10n-id="pdfjs-editor-undo-bar-close-button">
+            <span data-l10n-id="pdfjs-editor-undo-bar-close-button-label">Close</span>
+          </button>
         </div>
-      </div> <!-- toastContainer -->
+      </div> <!-- editorUndoBar -->
 
     </div> <!-- outerContainer -->
     <div id="printContainer"></div>