Bug 1577282 - Part 1: Move the requires before the constants and format the markup. r=Maliha
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 29 Aug 2019 14:40:52 +0000
changeset 551166 0bff78d1b4663da55d1499529c40916387c54d10
parent 551165 0bd14a48e5b8ba743292f475cc597d27783d30d5
child 551167 075e1be3e7ff66a4d759919a1e1317786347ae1b
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMaliha
bugs1577282
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1577282 - Part 1: Move the requires before the constants and format the markup. r=Maliha Differential Revision: https://phabricator.services.mozilla.com/D43978
devtools/client/shared/widgets/Spectrum.js
--- a/devtools/client/shared/widgets/Spectrum.js
+++ b/devtools/client/shared/widgets/Spectrum.js
@@ -1,16 +1,37 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const { MultiLocalizationHelper } = require("devtools/shared/l10n");
+
+loader.lazyRequireGetter(this, "colorUtils", "devtools/shared/css/color", true);
+loader.lazyRequireGetter(
+  this,
+  "labColors",
+  "devtools/shared/css/color-db",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getTextProperties",
+  "devtools/shared/accessibility",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getContrastRatioAgainstBackground",
+  "devtools/shared/accessibility",
+  true
+);
+
 const L10N = new MultiLocalizationHelper(
   "devtools/shared/locales/en-US/accessibility.properties",
   "devtools/client/locales/en-US/accessibility.properties",
   "devtools/client/locales/en-US/inspector.properties"
 );
 const ARROW_KEYS = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
 const [ArrowUp, ArrowRight, ArrowDown, ArrowLeft] = ARROW_KEYS;
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
@@ -22,36 +43,16 @@ const SLIDER = {
   },
   alpha: {
     MIN: "0",
     MAX: "1",
     STEP: "0.01",
   },
 };
 
-loader.lazyRequireGetter(this, "colorUtils", "devtools/shared/css/color", true);
-loader.lazyRequireGetter(
-  this,
-  "labColors",
-  "devtools/shared/css/color-db",
-  true
-);
-loader.lazyRequireGetter(
-  this,
-  "getTextProperties",
-  "devtools/shared/accessibility",
-  true
-);
-loader.lazyRequireGetter(
-  this,
-  "getContrastRatioAgainstBackground",
-  "devtools/shared/accessibility",
-  true
-);
-
 /**
  * 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", (rgba, color) => {
@@ -76,23 +77,21 @@ function Spectrum(parentEl, rgb) {
   this.document = parentEl.ownerDocument;
   this.element = parentEl.ownerDocument.createElementNS(XHTML_NS, "div");
   this.parentEl = parentEl;
 
   this.element.className = "spectrum-container";
   // eslint-disable-next-line no-unsanitized/property
   this.element.innerHTML = `
     <section class="spectrum-color-picker">
-      <div
-        class="spectrum-color spectrum-box"
-        tabindex="0"
-        role="slider"
-        title="${L10N.getStr("colorPickerTooltip.spectrumDraggerTitle")}"
-        aria-describedby="spectrum-dragger"
-      >
+      <div class="spectrum-color spectrum-box"
+           tabindex="0"
+           role="slider"
+           title="${L10N.getStr("colorPickerTooltip.spectrumDraggerTitle")}"
+           aria-describedby="spectrum-dragger">
         <div class="spectrum-sat">
           <div class="spectrum-val">
             <div class="spectrum-dragger" id="spectrum-dragger"></div>
           </div>
         </div>
       </div>
     </section>
     <section class="spectrum-controls">