Bug 1266100 - [ESLint] Fix ESLint issues in devtools/client/shared/widgets/Spectrum.js r=tromey
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 20 Apr 2016 11:50:44 -0400
changeset 317842 6a3291366533e40960df1f859d52734f13f3d7a3
parent 317841 fd5a45ba0257ec668f55da824e4384b8755eda32
child 317843 4feb4dd910a5a2d3061dbdd376a80975206819c6
child 317846 70bbd2e42d9df60dbb792e4e225e6bd2d67097af
push id9480
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 17:12:58 +0000
treeherdermozilla-aurora@0d6a91c76a9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstromey
bugs1266100
milestone48.0a1
Bug 1266100 - [ESLint] Fix ESLint issues in devtools/client/shared/widgets/Spectrum.js r=tromey
devtools/client/shared/widgets/Spectrum.js
--- a/devtools/client/shared/widgets/Spectrum.js
+++ b/devtools/client/shared/widgets/Spectrum.js
@@ -9,59 +9,60 @@ const EventEmitter = require("devtools/s
 /**
  * Spectrum creates a color picker widget in any container you give it.
  *
  * Simple usage example:
  *
  * const {Spectrum} = require("devtools/client/shared/widgets/Spectrum");
  * let s = new Spectrum(containerElement, [255, 126, 255, 1]);
  * s.on("changed", (event, rgba, color) => {
- *   console.log("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
+ *   console.log("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " +
+ *     rgba[3] + ")");
  * });
  * s.show();
  * s.destroy();
  *
  * Note that the color picker is hidden by default and you need to call show to
  * make it appear. This 2 stages initialization helps in cases you are creating
  * the color picker in a parent element that hasn't been appended anywhere yet
  * or that is hidden. Calling show() when the parent element is appended and
  * visible will allow spectrum to correctly initialize its various parts.
  *
  * Fires the following events:
  * - changed : When the user changes the current color
  */
 function Spectrum(parentEl, rgb) {
   EventEmitter.decorate(this);
 
-  this.element = parentEl.ownerDocument.createElement('div');
+  this.element = parentEl.ownerDocument.createElement("div");
   this.parentEl = parentEl;
 
   this.element.className = "spectrum-container";
-  this.element.innerHTML = [
-    "<div class='spectrum-top'>",
-      "<div class='spectrum-fill'></div>",
-      "<div class='spectrum-top-inner'>",
-        "<div class='spectrum-color spectrum-box'>",
-          "<div class='spectrum-sat'>",
-            "<div class='spectrum-val'>",
-              "<div class='spectrum-dragger'></div>",
-            "</div>",
-          "</div>",
-        "</div>",
-        "<div class='spectrum-hue spectrum-box'>",
-          "<div class='spectrum-slider spectrum-slider-control'></div>",
-        "</div>",
-      "</div>",
-    "</div>",
-    "<div class='spectrum-alpha spectrum-checker spectrum-box'>",
-      "<div class='spectrum-alpha-inner'>",
-        "<div class='spectrum-alpha-handle spectrum-slider-control'></div>",
-      "</div>",
-    "</div>",
-  ].join("");
+  this.element.innerHTML = `
+    <div class="spectrum-top">
+      <div class="spectrum-fill"></div>
+      <div class="spectrum-top-inner">
+        <div class="spectrum-color spectrum-box">
+          <div class="spectrum-sat">
+            <div class="spectrum-val">
+              <div class="spectrum-dragger"></div>
+            </div>
+          </div>
+        </div>
+        <div class="spectrum-hue spectrum-box">
+          <div class="spectrum-slider spectrum-slider-control"></div>
+        </div>
+      </div>
+    </div>
+    <div class="spectrum-alpha spectrum-checker spectrum-box">
+      <div class="spectrum-alpha-inner">
+        <div class="spectrum-alpha-handle spectrum-slider-control"></div>
+      </div>
+    </div>
+  `;
 
   this.onElementClick = this.onElementClick.bind(this);
   this.element.addEventListener("click", this.onElementClick, false);
 
   this.parentEl.appendChild(this.element);
 
   this.slider = this.element.querySelector(".spectrum-hue");
   this.slideHelper = this.element.querySelector(".spectrum-slider");
@@ -89,42 +90,42 @@ Spectrum.hsvToRgb = function(h, s, v, a)
 
   let i = Math.floor(h * 6);
   let f = h * 6 - i;
   let p = v * (1 - s);
   let q = v * (1 - f * s);
   let t = v * (1 - (1 - f) * s);
 
   switch(i % 6) {
-    case 0: r = v, g = t, b = p; break;
-    case 1: r = q, g = v, b = p; break;
-    case 2: r = p, g = v, b = t; break;
-    case 3: r = p, g = q, b = v; break;
-    case 4: r = t, g = p, b = v; break;
-    case 5: r = v, g = p, b = q; break;
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
   }
 
   return [r * 255, g * 255, b * 255, a];
 };
 
 Spectrum.rgbToHsv = function(r, g, b, a) {
   r = r / 255;
   g = g / 255;
   b = b / 255;
 
   let max = Math.max(r, g, b), min = Math.min(r, g, b);
   let h, s, v = max;
 
   let d = max - min;
   s = max == 0 ? 0 : d / max;
 
-  if(max == min) {
-    h = 0; // achromatic
-  }
-  else {
+  if (max == min) {
+    // achromatic
+    h = 0;
+  } else {
     switch(max) {
       case r: h = (g - b) / d + (g < b ? 6 : 0); break;
       case g: h = (b - r) / d + 2; break;
       case b: h = (r - g) / d + 4; break;
     }
     h /= 6;
   }
   return [h, s, v, a];
@@ -215,32 +216,35 @@ Spectrum.draggable = function(element, o
 };
 
 Spectrum.prototype = {
   set rgb(color) {
     this.hsv = Spectrum.rgbToHsv(color[0], color[1], color[2], color[3]);
   },
 
   get rgb() {
-    let rgb = Spectrum.hsvToRgb(this.hsv[0], this.hsv[1], this.hsv[2], this.hsv[3]);
-    return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), Math.round(rgb[3]*100)/100];
+    let rgb = Spectrum.hsvToRgb(this.hsv[0], this.hsv[1], this.hsv[2],
+      this.hsv[3]);
+    return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]),
+      Math.round(rgb[3] * 100) / 100];
   },
 
   get rgbNoSatVal() {
     let rgb = Spectrum.hsvToRgb(this.hsv[0], 1, 1);
     return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), rgb[3]];
   },
 
   get rgbCssString() {
     let rgb = this.rgb;
-    return "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " + rgb[3] + ")";
+    return "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " +
+      rgb[3] + ")";
   },
 
   show: function() {
-    this.element.classList.add('spectrum-show');
+    this.element.classList.add("spectrum-show");
 
     this.slideHeight = this.slider.offsetHeight;
     this.dragWidth = this.dragger.offsetWidth;
     this.dragHeight = this.dragger.offsetHeight;
     this.dragHelperHeight = this.dragHelper.offsetHeight;
     this.slideHelperHeight = this.slideHelper.offsetHeight;
     this.alphaSliderWidth = this.alphaSliderInner.offsetWidth;
     this.alphaSliderHelperWidth = this.alphaSliderHelper.offsetWidth;
@@ -271,64 +275,68 @@ Spectrum.prototype = {
     this.onChange();
   },
 
   onChange: function() {
     this.emit("changed", this.rgb, this.rgbCssString);
   },
 
   updateHelperLocations: function() {
-    // If the UI hasn't been shown yet then none of the dimensions will be correct
-    if (!this.element.classList.contains('spectrum-show'))
+    // If the UI hasn't been shown yet then none of the dimensions will be
+    // correct
+    if (!this.element.classList.contains("spectrum-show")) {
       return;
+    }
 
     let h = this.hsv[0];
     let s = this.hsv[1];
     let v = this.hsv[2];
 
     // Placing the color dragger
     let dragX = s * this.dragWidth;
     let dragY = this.dragHeight - (v * this.dragHeight);
-    let helperDim = this.dragHelperHeight/2;
+    let helperDim = this.dragHelperHeight / 2;
 
     dragX = Math.max(
       -helperDim,
       Math.min(this.dragWidth - helperDim, dragX - helperDim)
     );
     dragY = Math.max(
       -helperDim,
       Math.min(this.dragHeight - helperDim, dragY - helperDim)
     );
 
     this.dragHelper.style.top = dragY + "px";
     this.dragHelper.style.left = dragX + "px";
 
     // Placing the hue slider
-    let slideY = (h * this.slideHeight) - this.slideHelperHeight/2;
+    let slideY = (h * this.slideHeight) - this.slideHelperHeight / 2;
     this.slideHelper.style.top = slideY + "px";
 
     // Placing the alpha slider
-    let alphaSliderX = (this.hsv[3] * this.alphaSliderWidth) - (this.alphaSliderHelperWidth / 2);
+    let alphaSliderX = (this.hsv[3] * this.alphaSliderWidth) -
+      (this.alphaSliderHelperWidth / 2);
     this.alphaSliderHelper.style.left = alphaSliderX + "px";
   },
 
   updateUI: function() {
     this.updateHelperLocations();
 
     let rgb = this.rgb;
     let rgbNoSatVal = this.rgbNoSatVal;
 
-    let flatColor = "rgb(" + rgbNoSatVal[0] + ", " + rgbNoSatVal[1] + ", " + rgbNoSatVal[2] + ")";
-    let fullColor = "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " + rgb[3] + ")";
+    let flatColor = "rgb(" + rgbNoSatVal[0] + ", " + rgbNoSatVal[1] + ", " +
+      rgbNoSatVal[2] + ")";
 
     this.dragger.style.backgroundColor = flatColor;
 
-    var rgbNoAlpha = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
-    var rgbAlpha0 = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ", 0)";
-    var alphaGradient = "linear-gradient(to right, " + rgbAlpha0 + ", " + rgbNoAlpha + ")";
+    let rgbNoAlpha = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
+    let rgbAlpha0 = "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ", 0)";
+    let alphaGradient = "linear-gradient(to right, " + rgbAlpha0 + ", " +
+      rgbNoAlpha + ")";
     this.alphaSliderInner.style.background = alphaGradient;
   },
 
   destroy: function() {
     this.element.removeEventListener("click", this.onElementClick, false);
 
     this.parentEl.removeChild(this.element);