Replace css color rgb(...) by #...

* it's faster to generate the color code in using a table for components
* it's very likely a way faster to parse (when setting the color in the canvas)

Author: calixteman

src/core/pattern.js

@@ -205,14 +205,14 @@ Shadings.RadialAxial = (function RadialAxialClosure() {
       ratio[0] = t0 + i * step;
       fn(ratio, 0, color, 0);
       rgbColor = cs.getRgb(color, 0);
-      var cssColor = Util.makeCssRgb(rgbColor[0], rgbColor[1], rgbColor[2]);
+      var cssColor = Util.makeHexColor(rgbColor[0], rgbColor[1], rgbColor[2]);
       colorStops.push([i / NUMBER_OF_SAMPLES, cssColor]);
     }
 
     var background = "transparent";
     if (dict.has("Background")) {
       rgbColor = cs.getRgb(dict.get("Background"), 0);
-      background = Util.makeCssRgb(rgbColor[0], rgbColor[1], rgbColor[2]);
+      background = Util.makeHexColor(rgbColor[0], rgbColor[1], rgbColor[2]);
     }
 
     if (!extendStart) {

src/display/annotation_layer.js

@@ -221,7 +221,7 @@ class AnnotationElement {
       }
 
       if (data.color) {
-        container.style.borderColor = Util.makeCssRgb(
+        container.style.borderColor = Util.makeHexColor(
           data.color[0] | 0,
           data.color[1] | 0,
           data.color[2] | 0
@@ -860,7 +860,7 @@ class PopupElement {
       const r = BACKGROUND_ENLIGHT * (255 - color[0]) + color[0];
       const g = BACKGROUND_ENLIGHT * (255 - color[1]) + color[1];
       const b = BACKGROUND_ENLIGHT * (255 - color[2]) + color[2];
-      popup.style.backgroundColor = Util.makeCssRgb(r | 0, g | 0, b | 0);
+      popup.style.backgroundColor = Util.makeHexColor(r | 0, g | 0, b | 0);
     }
 
     const title = document.createElement("h1");

src/display/canvas.js

@@ -1951,12 +1951,12 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
       this.current.patternFill = true;
     },
     setStrokeRGBColor: function CanvasGraphics_setStrokeRGBColor(r, g, b) {
-      const color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeHexColor(r, g, b);
       this.ctx.strokeStyle = color;
       this.current.strokeColor = color;
     },
     setFillRGBColor: function CanvasGraphics_setFillRGBColor(r, g, b) {
-      const color = Util.makeCssRgb(r, g, b);
+      const color = Util.makeHexColor(r, g, b);
       this.ctx.fillStyle = color;
       this.current.fillColor = color;
       this.current.patternFill = false;

src/display/pattern_helper.js

@@ -571,7 +571,7 @@ const TilingPattern = (function TilingPatternClosure() {
           current.strokeColor = ctx.strokeStyle;
           break;
         case PaintType.UNCOLORED:
-          const cssColor = Util.makeCssRgb(color[0], color[1], color[2]);
+          const cssColor = Util.makeHexColor(color[0], color[1], color[2]);
           context.fillStyle = cssColor;
           context.strokeStyle = cssColor;
           // Set color needed by image masks (fixes issues 3226 and 8741).

src/display/svg.js

@@ -1049,15 +1049,15 @@ if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
     }
 
     setStrokeRGBColor(r, g, b) {
-      this.current.strokeColor = Util.makeCssRgb(r, g, b);
+      this.current.strokeColor = Util.makeHexColor(r, g, b);
     }
 
     setFillAlpha(fillAlpha) {
       this.current.fillAlpha = fillAlpha;
     }
 
     setFillRGBColor(r, g, b) {
-      this.current.fillColor = Util.makeCssRgb(r, g, b);
+      this.current.fillColor = Util.makeHexColor(r, g, b);
       this.current.tspan = this.svgFactory.createElement("svg:tspan");
       this.current.xcoords = [];
       this.current.ycoords = [];
@@ -1143,7 +1143,7 @@ if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
       this.svg = bbox;
       this.transformMatrix = matrix;
       if (paintType === 2) {
-        const cssColor = Util.makeCssRgb(...color);
+        const cssColor = Util.makeHexColor(...color);
         this.current.fillColor = cssColor;
         this.current.strokeColor = cssColor;
       }

src/shared/util.js

@@ -618,16 +618,13 @@ const IsEvalSupportedCached = {
   },
 };
 
-const rgbBuf = ["rgb(", 0, ",", 0, ",", 0, ")"];
+const hexNumbers = [...Array(256).keys()].map(n =>
+  n.toString(16).padStart(2, "0")
+);
 
 class Util {
-  // makeCssRgb() can be called thousands of times. Using ´rgbBuf` avoids
-  // creating many intermediate strings.
-  static makeCssRgb(r, g, b) {
-    rgbBuf[1] = r;
-    rgbBuf[3] = g;
-    rgbBuf[5] = b;
-    return rgbBuf.join("");
+  static makeHexColor(r, g, b) {
+    return `#${hexNumbers[r]}${hexNumbers[g]}${hexNumbers[b]}`;
   }
 
   // Concatenates two transformation matrices together and returns the result.