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.

Author: Snuffleupagus

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;