diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
index bb48c84d0a2ec..951a16827798b 100644
--- 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
index 43873a29a0a0b..c54e00cb3c7ff 100644
--- 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
index 8319411b08301..fe6209bb965cb 100644
--- 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
index 03c4b030883c0..dc46d36b8aabf 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -686,17 +686,19 @@
-
-
+
+
-
- [Annotation] removed
-
-
-
-
+
[Annotation] removed
+
+
+
-
+