From 3dd8b9cccfc59f597e24c827f861b746dd5ef727 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 13 May 2022 12:07:05 +0200
Subject: [PATCH 1/2] Ensure that setting the width of the zoom dropdown works
 correctly (PR 14028 follow-up)

We need to wait for UI rendering to start *before* getting the CSS variable values, since otherwise the values will be `NaN`.
This is only an issue if the viewer is completely hidden during loading, e.g. in a `display: none` iframe-element.
---
 web/toolbar.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 599024dbd..93a39a56d 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -170,7 +170,7 @@ class Toolbar {
 
     this.eventBus._on("localized", () => {
       this._wasLocalized = true;
-      this._adjustScaleWidth();
+      this.#adjustScaleWidth();
       this._updateUIState(true);
     });
   }
@@ -237,9 +237,8 @@ class Toolbar {
   /**
    * Increase the width of the zoom dropdown DOM element if, and only if, it's
    * too narrow to fit the *longest* of the localized strings.
-   * @private
    */
-  async _adjustScaleWidth() {
+  async #adjustScaleWidth() {
     const { items, l10n } = this;
 
     const predefinedValuesPromise = Promise.all([
@@ -248,6 +247,7 @@ class Toolbar {
       l10n.get("page_scale_fit"),
       l10n.get("page_scale_width"),
     ]);
+    await animationStarted;
 
     const style = getComputedStyle(items.scaleSelect),
       scaleSelectContainerWidth = parseInt(
@@ -262,8 +262,6 @@ class Toolbar {
     // The temporary canvas is used to measure text length in the DOM.
     let canvas = document.createElement("canvas");
     let ctx = canvas.getContext("2d", { alpha: false });
-
-    await animationStarted;
     ctx.font = `${style.fontSize} ${style.fontFamily}`;
 
     let maxWidth = 0;

From efe3cb2982855116952628758a6424328c2dd826 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Fri, 13 May 2022 17:12:03 +0200
Subject: [PATCH 2/2] Remove unnecessary clean-up in
 `Toolbar.#adjustScaleWidth`

While zeroing the temporary `canvas` makes sense, manually clearing the canvas and its context doesn't really accomplish anything since those are tied to the scope of the method.
---
 web/toolbar.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 93a39a56d..c0916fc76 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -260,8 +260,8 @@ class Toolbar {
       );
 
     // The temporary canvas is used to measure text length in the DOM.
-    let canvas = document.createElement("canvas");
-    let ctx = canvas.getContext("2d", { alpha: false });
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d", { alpha: false });
     ctx.font = `${style.fontSize} ${style.fontFamily}`;
 
     let maxWidth = 0;
@@ -281,7 +281,6 @@ class Toolbar {
     // immediately, which can greatly reduce memory consumption.
     canvas.width = 0;
     canvas.height = 0;
-    canvas = ctx = null;
   }
 }