From 5cbd44b628bca16b866a580432e8c8cc21a6fb5e Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Wed, 5 Feb 2020 22:02:13 +0100
Subject: [PATCH] Replace most remaining `Element.setAttribute("style", ...)`
 usage with `Element.style = ...` instead

This should hopefully be useful in environments where restrictive CSPs are in effect.
In most cases the replacement is entirely straighforward, and there's only a couple of special cases:
 - For the `src/display/font_loader.js` and `web/pdf_outline_viewer.js `cases, since the elements aren't appended to the document yet, it shouldn't matter if the style properties are set one-by-one rather than all at once.
 - For the `web/debugger.js` case, there's really no need to set the `padding` inline at all and the definition was simply moved to `web/viewer.css` instead.

*Please note:* There's still *a single* case left, in `web/toolbar.js` for setting the width of the zoom dropdown, which is left intact for now.
The reasons are that this particular case shouldn't matter for users of the general PDF.js library, and that it'd make a lot more sense to just try and re-factor that very old code anyway (thus fixing the `setAttribute` usage in the process).
---
 src/display/font_loader.js | 11 +++++------
 web/debugger.js            |  6 +-----
 web/pdf_outline_viewer.js  |  9 ++-------
 web/secondary_toolbar.js   |  6 ++----
 web/ui_utils.js            |  5 +----
 web/viewer.css             |  3 +++
 6 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/display/font_loader.js b/src/display/font_loader.js
index ba9421aa8..b44f77f33 100644
--- a/src/display/font_loader.js
+++ b/src/display/font_loader.js
@@ -341,12 +341,11 @@ if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
       names.push(loadTestFontId);
 
       const div = document.createElement("div");
-      div.setAttribute(
-        "style",
-        "visibility: hidden;" +
-          "width: 10px; height: 10px;" +
-          "position: absolute; top: 0px; left: 0px;"
-      );
+      div.style.visibility = "hidden";
+      div.style.width = div.style.height = "10px";
+      div.style.position = "absolute";
+      div.style.top = div.style.left = "0px";
+
       for (i = 0, ii = names.length; i < ii; ++i) {
         const span = document.createElement("span");
         span.textContent = "Hi";
diff --git a/web/debugger.js b/web/debugger.js
index 3208f7bd4..12ebce779 100644
--- a/web/debugger.js
+++ b/web/debugger.js
@@ -67,7 +67,6 @@ var FontInspector = (function FontInspectorClosure() {
     manager: null,
     init: function init(pdfjsLib) {
       var panel = this.panel;
-      panel.setAttribute("style", "padding: 5px;");
       var tmp = document.createElement("button");
       tmp.addEventListener("click", resetSelection);
       tmp.textContent = "Refresh";
@@ -178,7 +177,6 @@ var StepperManager = (function StepperManagerClosure() {
     manager: null,
     init: function init(pdfjsLib) {
       var self = this;
-      this.panel.setAttribute("style", "padding: 5px;");
       stepperControls = document.createElement("div");
       stepperChooser = document.createElement("select");
       stepperChooser.addEventListener("change", function(event) {
@@ -468,9 +466,7 @@ var Stats = (function Stats() {
     name: "Stats",
     panel: null,
     manager: null,
-    init(pdfjsLib) {
-      this.panel.setAttribute("style", "padding: 5px;");
-    },
+    init(pdfjsLib) {},
     enabled: false,
     active: false,
     // Stats specific functions.
diff --git a/web/pdf_outline_viewer.js b/web/pdf_outline_viewer.js
index bf2f058c5..a50cb977e 100644
--- a/web/pdf_outline_viewer.js
+++ b/web/pdf_outline_viewer.js
@@ -94,16 +94,11 @@ class PDFOutlineViewer {
    * @private
    */
   _setStyles(element, { bold, italic }) {
-    let styleStr = "";
     if (bold) {
-      styleStr += "font-weight: bold;";
+      element.style.fontWeight = "bold";
     }
     if (italic) {
-      styleStr += "font-style: italic;";
-    }
-
-    if (styleStr) {
-      element.setAttribute("style", styleStr);
+      element.style.fontStyle = "italic";
     }
   }
 
diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
index 24048416a..32bc4601f 100644
--- a/web/secondary_toolbar.js
+++ b/web/secondary_toolbar.js
@@ -340,10 +340,8 @@ class SecondaryToolbar {
     if (this.containerHeight === this.previousContainerHeight) {
       return;
     }
-    this.toolbarButtonContainer.setAttribute(
-      "style",
-      "max-height: " + (this.containerHeight - SCROLLBAR_PADDING) + "px;"
-    );
+    this.toolbarButtonContainer.style.maxHeight = `${this.containerHeight -
+      SCROLLBAR_PADDING}px`;
 
     this.previousContainerHeight = this.containerHeight;
   }
diff --git a/web/ui_utils.js b/web/ui_utils.js
index db12afa12..648b65302 100644
--- a/web/ui_utils.js
+++ b/web/ui_utils.js
@@ -890,10 +890,7 @@ class ProgressBar {
     const container = viewer.parentNode;
     const scrollbarWidth = container.offsetWidth - viewer.offsetWidth;
     if (scrollbarWidth > 0) {
-      this.bar.setAttribute(
-        "style",
-        "width: calc(100% - " + scrollbarWidth + "px);"
-      );
+      this.bar.style.width = `calc(100% - ${scrollbarWidth}px)`;
     }
   }
 
diff --git a/web/viewer.css b/web/viewer.css
index 3d9fa9fe3..268834e2d 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1483,6 +1483,9 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   right: 0;
   top: 27px;
 }
+#PDFBug .panels > div {
+  padding: 5px;
+}
 #PDFBug button.active {
   font-weight: bold;
 }