Bug 1654684 - Add sheet-indicator and preview navigation to the print preview. r=mstriemer,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D96737

UltraBlame original commit: 5a0333ca8a19b1bd0ca0080e07fcccbfcef42db7

Author: marco-c

browser/base/content/browser.css

@@ -1422,6 +1422,19 @@ toolbarpaletteitem > toolbaritem {
   font-size: large;
 }
 
+printpreview-pagination {
+  opacity: 0;
+  transition: opacity 100ms 500ms;
+}
+printpreview-pagination:focus-within,
+.previewStack:hover > printpreview-pagination {
+  opacity: 1;
+  transition: opacity 100ms;
+}
+.previewStack[rendering=true] > printpreview-pagination {
+  opacity: 0;
+}
+
 @media (prefers-color-scheme: dark) {
   .previewStack {
     background-color: #2A2A2E;

toolkit/actors/PrintingChild.jsm

@@ -20,6 +20,12 @@ ChromeUtils.defineModuleGetter(
   "resource://gre/modules/ReaderMode.jsm"
 );
 
+ChromeUtils.defineModuleGetter(
+  this,
+  "DeferredTask",
+  "resource://gre/modules/DeferredTask.jsm"
+);
+
 let gPrintPreviewInitializingInfo = null;
 
 let gPendingPreviewsMap = new Map();
@@ -87,6 +93,17 @@ class PrintingChild extends JSWindowActorChild {
         this.updatePageCount();
         break;
       }
+
+      case "scroll":
+        if (!this._scrollTask) {
+          this._scrollTask = new DeferredTask(
+            () => this.updateCurrentPage(),
+            16,
+            16
+          );
+        }
+        this._scrollTask.arm();
+        break;
     }
   }
 
@@ -420,6 +437,14 @@ class PrintingChild extends JSWindowActorChild {
     });
   }
 
+  updateCurrentPage() {
+    let cv = this.docShell.contentViewer;
+    cv.QueryInterface(Ci.nsIWebBrowserPrint);
+    this.sendAsyncMessage("Printing:Preview:CurrentPage", {
+      currentPage: cv.printPreviewCurrentPageNumber,
+    });
+  }
+
   navigate(navType, pageNum) {
     let cv = this.docShell.contentViewer;
     cv.QueryInterface(Ci.nsIWebBrowserPrint);

toolkit/actors/PrintingParent.jsm

@@ -33,10 +33,15 @@ class PrintingParent extends JSWindowActorParent {
       return undefined;
     }
 
-    let listener = PrintUtils._webProgressPP.value;
+    let listener = PrintUtils._webProgressPP?.value;
     let data = message.data;
 
     switch (message.name) {
+      case "Printing:Preview:CurrentPage": {
+        browser.setAttribute("current-page", message.data.currentPage);
+        break;
+      }
+
       case "Printing:Preview:Entered": {
 
 

toolkit/components/printing/content/print.js

@@ -672,6 +672,7 @@ var PrintEventHandler = {
         detail: { sheetCount, totalPages: totalPageCount },
       })
     );
+    this.previewBrowser.setAttribute("sheet-count", sheetCount);
 
     this._hideRenderingIndicator();
 

toolkit/components/printing/content/printPagination.css

@@ -0,0 +1,132 @@
+
+
+
+
+:host {
+  
+  --blue-50: #0a84ff;
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --shadow-30: 0 4px 16px var(--grey-90-a10);
+  --border-active-shadow: var(--blue-50);
+  --border-active-color: ButtonShadow;
+}
+
+:host {
+  display: block;
+  position: absolute;
+  bottom: 24px;
+  inset-inline-start: 50%;
+  translate: -50%;
+}
+:host(:-moz-locale-dir(rtl)) {
+  translate: 50%;
+}
+
+.container {
+  margin-inline: auto;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  box-shadow: var(--shadow-30);
+  color: var(--toolbar-color);
+  background-color: var(--toolbar-bgcolor);
+  border-radius: 6px;
+  border-style: none;
+}
+
+.toolbarButton,
+.toolbarCenter {
+  align-self: stretch;
+  flex: 0 0 auto;
+  padding: var(--toolbarbutton-outer-padding);
+  border: none;
+  border-inline-end: 1px solid ThreeDShadow;
+  border-block: 1px solid ThreeDShadow;
+  color: inherit;
+  background-color: transparent;
+}
+.startItem {
+  border-inline-start: 1px solid ThreeDShadow;
+  border-start-start-radius: 6px;
+  border-end-start-radius: 6px;
+}
+.endItem {
+  border-start-end-radius: 6px;
+  border-end-end-radius: 6px;
+}
+
+.toolbarButton {
+  min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+  min-height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
+}
+
+.toolbarButton::after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+  text-align: center;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 12px;
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
+  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.toolbarButton:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+.toolbarButton:hover:active {
+  background-color: var(--toolbarbutton-active-background);
+}
+.toolbarButton::-moz-focus-inner {
+  border: none;
+}
+.toolbarButton:focus {
+  z-index: 1;
+}
+
+.toolbarButton:-moz-focusring {
+  outline: 2px solid var(--border-active-shadow);
+}
+.toolbarButton.startItem:-moz-focusring,
+.toolbarButton.endItem:-moz-locale-dir(rtl):-moz-focusring {
+  -moz-outline-radius: 8px;
+  -moz-outline-radius-topright: 0;
+  -moz-outline-radius-bottomright: 0;
+}
+.toolbarButton.endItem:-moz-focusring,
+.toolbarButton.startItem:-moz-locale-dir(rtl):-moz-focusring {
+  -moz-outline-radius: 8px;
+  -moz-outline-radius-topleft: 0;
+  -moz-outline-radius-bottomleft: 0;
+}
+
+.toolbarCenter {
+  flex-shrink: 0;
+  
+  min-width: calc(8px + 3ch);
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#navigateHome::after,
+#navigateEnd::after {
+  background-image: url("chrome://global/skin/icons/chevron.svg");
+}
+
+#navigatePrevious::after,
+#navigateNext::after {
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#navigatePrevious:-moz-locale-dir(rtl)::after,
+#navigateEnd:-moz-locale-dir(rtl)::after,
+#navigateHome:-moz-locale-dir(ltr)::after,
+#navigateNext:-moz-locale-dir(ltr)::after {
+  transform: scaleX(-1);
+}