From 37e8a8189b8c6f89f1c245ca9c8484188c7cde4f Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 22 Aug 2019 18:40:15 +0200
Subject: [PATCH] [TextLayer] Use an Array to build the total `transform`,
 rather than concatenating Strings, in `expandTextDivs`

Furthermore, it's possible to re-use the same Array for all `textDiv`s on the page.
---
 src/display/text_layer.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/display/text_layer.js b/src/display/text_layer.js
index 4ceb22aa2b7ef..33752cc5afba7 100644
--- a/src/display/text_layer.js
+++ b/src/display/text_layer.js
@@ -626,6 +626,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
         expand(this);
         this._bounds = null;
       }
+      const transformBuf = [];
 
       for (var i = 0, ii = this._textDivs.length; i < ii; i++) {
         const div = this._textDivs[i];
@@ -635,23 +636,24 @@ var renderTextLayer = (function renderTextLayerClosure() {
           continue;
         }
         if (expandDivs) {
-          let transform = '', padding = '';
+          transformBuf.length = 0;
+          let padding = '';
 
-          if (divProps.scale !== 1) {
-            transform = `scaleX(${divProps.scale})`;
-          }
           if (divProps.angle !== 0) {
-            transform = `rotate(${divProps.angle}deg) ${transform}`;
+            transformBuf.push(`rotate(${divProps.angle}deg)`);
+          }
+          if (divProps.scale !== 1) {
+            transformBuf.push(`scaleX(${divProps.scale})`);
           }
           if (divProps.paddingLeft !== 0) {
             padding +=
               ` padding-left: ${divProps.paddingLeft / divProps.scale}px;`;
-            transform +=
-              ` translateX(${-divProps.paddingLeft / divProps.scale}px)`;
+            transformBuf.push(
+              `translateX(${-divProps.paddingLeft / divProps.scale}px)`);
           }
           if (divProps.paddingTop !== 0) {
             padding += ` padding-top: ${divProps.paddingTop}px;`;
-            transform += ` translateY(${-divProps.paddingTop}px)`;
+            transformBuf.push(`translateY(${-divProps.paddingTop}px)`);
           }
           if (divProps.paddingRight !== 0) {
             padding +=
@@ -664,8 +666,8 @@ var renderTextLayer = (function renderTextLayerClosure() {
           if (padding !== '') {
             div.setAttribute('style', divProps.style + padding);
           }
-          if (transform !== '') {
-            div.style.transform = transform;
+          if (transformBuf.length) {
+            div.style.transform = transformBuf.join(' ');
           }
         } else {
           div.style.padding = null;