DevTools: eliminate UI.Icon transforms

third_party/WebKit/Source/devtools/front_end/ui/Icon.js

Index: third_party/WebKit/Source/devtools/front_end/ui/Icon.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
index 2edea7124f9c75abea611f6a251bd0858e53acaa..51f478ccb3f31ca27bfd1e594833018c993ecbd4 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/Icon.js
@@ -48,7 +48,6 @@ UI.Icon = class extends HTMLSpanElement {
       this.style.removeProperty('background-position');
       this.style.removeProperty('width');
       this.style.removeProperty('height');
-      this.style.removeProperty('transform');
       this._toggleClasses(false);
       this._iconType = '';
       this._descriptor = null;
@@ -61,8 +60,6 @@ UI.Icon = class extends HTMLSpanElement {
       this.style.setProperty('background-position', this._propertyValue());
       this.style.setProperty('width', this._descriptor.width + 'px');
       this.style.setProperty('height', this._descriptor.height + 'px');
-      if (this._descriptor.transform)
-        this.style.setProperty('transform', this._descriptor.transform);
       this._toggleClasses(true);
     } else if (iconType) {
       throw new Error(`ERROR: failed to find icon descriptor for type: ${iconType}`);
@@ -99,8 +96,7 @@ UI.Icon.Descriptors = {
   'smallicon-green-ball': {x: -140, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
-  'smallicon-thick-left-arrow':
-      {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons', transform: 'rotate(180deg)'},
+  'smallicon-thick-left-arrow': {x: -180, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-user-command': {x: 0, y: -19, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
   'smallicon-command-result': {x: -40, y: -19, width: 10, height: 10, spritesheet: 'smallicons'},
@@ -157,8 +153,7 @@ UI.Icon.Descriptors = {
   'largeicon-resume': {x: 0, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-pause': {x: -32, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-pause-on-exceptions': {x: -256, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
-  'largeicon-play-back':
-      {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'scaleX(-1)'},
+  'largeicon-play-back': {x: -96, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-play': {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-step-over': {x: -128, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-step-out': {x: -96, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
@@ -170,53 +165,46 @@ UI.Icon.Descriptors = {
   'largeicon-visibility': {x: -96, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-refresh': {x: 0, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
-  'largeicon-dock-to-left':
-      {x: -256, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'rotate(180deg)'},
+  'largeicon-dock-to-left': {x: -224, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-settings-gear': {x: -288, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
 
   'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
-  'largeicon-show-right-sidebar':
-      {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'scaleX(-1)'},
-  'largeicon-hide-right-sidebar':
-      {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'scaleX(-1)'},
+  'largeicon-show-right-sidebar': {x: -192, y: -96, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+  'largeicon-hide-right-sidebar': {x: -192, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-show-top-sidebar': {
-    x: -160,
-    y: -72,
+    x: -288,
+    y: -96,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
-    transform: 'translate(4px, 0) rotate(90deg)'
   },
   'largeicon-hide-top-sidebar': {
-    x: -192,
-    y: -72,
+    x: -256,
+    y: -96,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
-    transform: 'translate(4px, 1px) rotate(90deg)'
   },
   'largeicon-show-bottom-sidebar': {
-    x: -160,
-    y: -72,
+    x: -224,
+    y: -144,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
-    transform: 'translate(4px, 0) rotate(-90deg)'
   },
   'largeicon-hide-bottom-sidebar': {
-    x: -192,
-    y: -72,
+    x: -256,
+    y: -120,
     width: 28,
     height: 24,
     spritesheet: 'largeicons',
     isMask: true,
-    transform: 'translate(4px, 1px) rotate(-90deg)'
   },
   'largeicon-navigator-file': {x: -224, y: -72, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},
   'largeicon-navigator-file-sync': {x: -160, y: -24, width: 32, height: 24, spritesheet: 'largeicons', isMask: true},