Bug 1242898 - Clean devtools/client/animationinspector of eslint errors; r=me

MozReview-Commit-ID: 8kRnACID8A6

.eslintignore

@@ -81,7 +81,6 @@ browser/extensions/loop/**
 
 # devtools/ exclusions
 devtools/*.js
-devtools/client/animationinspector/**
 devtools/client/canvasdebugger/**
 devtools/client/commandline/**
 devtools/client/debugger/**

devtools/client/animationinspector/animation-controller.js

@@ -3,7 +3,12 @@
 /* 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/. */
+
+/* animation-panel.js is loaded in the same scope but we don't use
+   import-globals-from to avoid infinite loops since animation-panel.js already
+   imports globals from animation-controller.js */
 /* globals AnimationsPanel */
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
 
 "use strict";
 
@@ -15,10 +20,8 @@ Cu.import("resource://gre/modules/Console.jsm");
 Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
 
 loader.lazyRequireGetter(this, "promise");
-loader.lazyRequireGetter(this, "EventEmitter",
-                               "devtools/shared/event-emitter");
-loader.lazyRequireGetter(this, "AnimationsFront",
-                               "devtools/server/actors/animation", true);
+loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
+loader.lazyRequireGetter(this, "AnimationsFront", "devtools/server/actors/animation", true);
 
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);

devtools/client/animationinspector/animation-panel.js

@@ -3,6 +3,7 @@
 /* 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/. */
+
 /* import-globals-from animation-controller.js */
 /* globals document */
 
@@ -140,11 +141,12 @@ var AnimationsPanel = {
     gToolbox.off("picker-started", this.onPickerStarted);
     gToolbox.off("picker-stopped", this.onPickerStopped);
 
-    this.toggleAllButtonEl.removeEventListener("click", this.onToggleAllClicked);
-    this.playTimelineButtonEl.removeEventListener(
-      "click", this.onTimelinePlayClicked);
-    this.rewindTimelineButtonEl.removeEventListener(
-      "click", this.onTimelineRewindClicked);
+    this.toggleAllButtonEl.removeEventListener("click",
+      this.onToggleAllClicked);
+    this.playTimelineButtonEl.removeEventListener("click",
+      this.onTimelinePlayClicked);
+    this.rewindTimelineButtonEl.removeEventListener("click",
+      this.onTimelineRewindClicked);
 
     document.removeEventListener("keydown", this.onKeyDown, false);
 

devtools/client/animationinspector/components/animation-details.js

@@ -1,12 +1,16 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {Cu} = require("chrome");
 const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
-const {
-  createNode,
-  TimeScale
-} = require("devtools/client/animationinspector/utils");
+const {createNode, TimeScale} = require("devtools/client/animationinspector/utils");
 const {Keyframes} = require("devtools/client/animationinspector/components/keyframes");
+
 /**
  * UI component responsible for displaying detailed information for a given
  * animation.

devtools/client/animationinspector/components/animation-target-node.js

@@ -1,10 +1,15 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {Cu} = require("chrome");
 Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
 const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
-const {DomNodePreview} = require(
-  "devtools/client/inspector/shared/dom-node-preview");
+const {DomNodePreview} = require("devtools/client/inspector/shared/dom-node-preview");
 
 // Map dom node fronts by animation fronts so we don't have to get them from the
 // walker every time the timeline is refreshed.

devtools/client/animationinspector/components/animation-time-block.js

@@ -1,11 +1,14 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {Cu} = require("chrome");
 Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
-const {
-  createNode,
-  TimeScale
-} = require("devtools/client/animationinspector/utils");
+const {createNode, TimeScale} = require("devtools/client/animationinspector/utils");
 
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
@@ -52,7 +55,7 @@ AnimationTimeBlock.prototype = {
     let {x, iterationW, delayX, delayW, negativeDelayW} =
       TimeScale.getAnimationDimensions(animation);
 
-    let iterations = createNode({
+    createNode({
       parent: this.containerEl,
       attributes: {
         "class": "iterations" + (state.iterationCount ? "" : " infinite"),

devtools/client/animationinspector/components/animation-timeline.js

@@ -1,3 +1,9 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {
@@ -81,7 +87,8 @@ AnimationsTimeline.prototype = {
         "class": "scrubber-handle"
       }
     });
-    this.scrubberHandleEl.addEventListener("mousedown", this.onScrubberMouseDown);
+    this.scrubberHandleEl.addEventListener("mousedown",
+      this.onScrubberMouseDown);
 
     this.timeHeaderEl = createNode({
       parent: this.rootWrapperEl,
@@ -89,7 +96,8 @@ AnimationsTimeline.prototype = {
         "class": "time-header track-container"
       }
     });
-    this.timeHeaderEl.addEventListener("mousedown", this.onScrubberMouseDown);
+    this.timeHeaderEl.addEventListener("mousedown",
+      this.onScrubberMouseDown);
 
     this.animationsEl = createNode({
       parent: this.rootWrapperEl,
@@ -99,14 +107,16 @@ AnimationsTimeline.prototype = {
       }
     });
 
-    this.win.addEventListener("resize", this.onWindowResize);
+    this.win.addEventListener("resize",
+      this.onWindowResize);
   },
 
   destroy: function() {
     this.stopAnimatingScrubber();
     this.unrender();
 
-    this.win.removeEventListener("resize", this.onWindowResize);
+    this.win.removeEventListener("resize",
+      this.onWindowResize);
     this.timeHeaderEl.removeEventListener("mousedown",
       this.onScrubberMouseDown);
     this.scrubberHandleEl.removeEventListener("mousedown",
@@ -414,7 +424,8 @@ AnimationsTimeline.prototype = {
   drawHeaderAndBackground: function() {
     let width = this.timeHeaderEl.offsetWidth;
     let animationDuration = TimeScale.maxEndTime - TimeScale.minStartTime;
-    let minTimeInterval = TIME_GRADUATION_MIN_SPACING * animationDuration / width;
+    let minTimeInterval = TIME_GRADUATION_MIN_SPACING *
+                          animationDuration / width;
     let intervalLength = findOptimalTimeInterval(minTimeInterval);
     let intervalWidth = intervalLength * width / animationDuration;
 

devtools/client/animationinspector/components/keyframes.js

@@ -1,3 +1,9 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {Cu} = require("chrome");

devtools/client/animationinspector/components/rate-selector.js

@@ -1,3 +1,9 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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 {Cu} = require("chrome");

devtools/client/animationinspector/test/browser_animation_panel_exists.js

@@ -10,10 +10,14 @@ add_task(function*() {
   yield addTab("data:text/html;charset=utf-8,welcome to the animation panel");
   let {panel, controller} = yield openAnimationInspector();
 
-  ok(controller, "The animation controller exists");
-  ok(controller.animationsFront, "The animation controller has been initialized");
-
-  ok(panel, "The animation panel exists");
-  ok(panel.playersEl, "The animation panel has been initialized");
-  ok(panel.animationsTimelineComponent, "The animation panel has been initialized");
+  ok(controller,
+     "The animation controller exists");
+  ok(controller.animationsFront,
+     "The animation controller has been initialized");
+  ok(panel,
+     "The animation panel exists");
+  ok(panel.playersEl,
+     "The animation panel has been initialized");
+  ok(panel.animationsTimelineComponent,
+     "The animation panel has been initialized");
 });

devtools/client/animationinspector/test/browser_animation_participate_in_inspector_update.js

@@ -14,7 +14,8 @@ add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel, controller} = yield openAnimationInspector();
 
-  info("Listen for the players-updated, ui-updated and inspector-updated events");
+  info("Listen for the players-updated, ui-updated and " +
+       "inspector-updated events");
   let receivedEvents = [];
   controller.once(controller.PLAYERS_UPDATED_EVENT, () => {
     receivedEvents.push(controller.PLAYERS_UPDATED_EVENT);

devtools/client/animationinspector/test/browser_animation_timeline_header.js

@@ -8,11 +8,10 @@ requestLongerTimeout(2);
 
 // Check that the timeline shows correct time graduations in the header.
 
-const {
-  findOptimalTimeInterval,
-  TimeScale
-} = require("devtools/client/animationinspector/utils");
-// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in animation-timeline.js
+const {findOptimalTimeInterval, TimeScale} = require("devtools/client/animationinspector/utils");
+
+// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
+// animation-timeline.js
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(function*() {

devtools/client/animationinspector/test/browser_animation_timeline_pause_button.js

@@ -99,11 +99,12 @@ function waitForOutOfBoundScrubber({win, scrubberEl}) {
 
 function waitForScrubberStopped(timeline) {
   return new Promise(resolve => {
-    timeline.on("timeline-data-changed", function onTimelineData(e, {isMoving}) {
-      if (!isMoving) {
-        timeline.off("timeline-data-changed", onTimelineData);
-        resolve();
-      }
-    });
+    timeline.on("timeline-data-changed",
+      function onTimelineData(e, {isMoving}) {
+        if (!isMoving) {
+          timeline.off("timeline-data-changed", onTimelineData);
+          resolve();
+        }
+      });
   });
 }

devtools/client/animationinspector/test/browser_animation_timeline_rewind_button.js

@@ -16,6 +16,7 @@ add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
 
   let {panel, controller} = yield openAnimationInspector();
+  let players = controller.animationPlayers;
   let btn = panel.rewindTimelineButtonEl;
 
   ok(btn, "The rewind button exists");
@@ -26,9 +27,9 @@ add_task(function*() {
   info("Check that the scrubber has stopped moving");
   yield assertScrubberMoving(panel, false);
 
-  ok(controller.animationPlayers.every(({state}) => state.currentTime === 0),
+  ok(players.every(({state}) => state.currentTime === 0),
      "All animations' currentTimes have been set to 0");
-  ok(controller.animationPlayers.every(({state}) => state.playState === "paused"),
+  ok(players.every(({state}) => state.playState === "paused"),
      "All animations have been paused");
 
   info("Play the animations again");
@@ -43,8 +44,8 @@ add_task(function*() {
   info("Check that the scrubber has stopped moving");
   yield assertScrubberMoving(panel, false);
 
-  ok(controller.animationPlayers.every(({state}) => state.currentTime === 0),
+  ok(players.every(({state}) => state.currentTime === 0),
      "All animations' currentTimes have been set to 0");
-  ok(controller.animationPlayers.every(({state}) => state.playState === "paused"),
+  ok(players.every(({state}) => state.playState === "paused"),
      "All animations have been paused");
 });

devtools/client/animationinspector/test/doc_frame_script.js

@@ -1,6 +1,7 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals addMessageListener, sendAsyncMessage */
 
 "use strict";
 
@@ -11,7 +12,8 @@
  * @param {Object} data
  * - {String} selector The CSS selector to get the node (can be a "super"
  *   selector).
- * - {Number} animationIndex The index of the node's animationPlayers to play or pause
+ * - {Number} animationIndex The index of the node's animationPlayers to play
+ *   or pause
  * - {Boolean} pause True to pause the animation, false to play.
  */
 addMessageListener("Test:ToggleAnimationPlayer", function(msg) {
@@ -103,18 +105,18 @@ addMessageListener("Test:GetAnimationPlayerState", function(msg) {
  * @param {String} superSelector.
  * @return {DOMNode} The node, or null if not found.
  */
-function superQuerySelector(superSelector, root=content.document) {
+function superQuerySelector(superSelector, root = content.document) {
   let frameIndex = superSelector.indexOf("||");
   if (frameIndex === -1) {
     return root.querySelector(superSelector);
-  } else {
-    let rootSelector = superSelector.substring(0, frameIndex).trim();
-    let childSelector = superSelector.substring(frameIndex+2).trim();
-    root = root.querySelector(rootSelector);
-    if (!root || !root.contentWindow) {
-      return null;
-    }
-
-    return superQuerySelector(childSelector, root.contentWindow.document);
   }
+
+  let rootSelector = superSelector.substring(0, frameIndex).trim();
+  let childSelector = superSelector.substring(frameIndex + 2).trim();
+  root = root.querySelector(rootSelector);
+  if (!root || !root.contentWindow) {
+    return null;
+  }
+
+  return superQuerySelector(childSelector, root.contentWindow.document);
 }

devtools/client/animationinspector/test/doc_modify_playbackRate.html

@@ -22,6 +22,8 @@
   <div></div>
   <div class="rate"></div>
   <script>
+    "use strict";
+
     var el = document.querySelector(".rate");
     var ani = el.getAnimations()[0];
     ani.playbackRate = 2;

devtools/client/animationinspector/test/doc_multiple_animation_types.html

@@ -42,13 +42,15 @@
   <div class="ball css-transition"></div>
 
   <script>
-    setTimeout(function(){
+    "use strict";
+
+    setTimeout(function() {
       document.querySelector(".css-transition").style.backgroundColor = "yellow";
     }, 0);
 
     document.querySelector(".script-animation").animate([
-      {  opacity: 1, offset: 0 },
-      {  opacity: .1, offset: 1 }
+      {opacity: 1, offset: 0},
+      {opacity: .1, offset: 1}
     ], {
       duration: 10000,
       fill: "forwards"

devtools/client/animationinspector/test/doc_negative_animation.html

@@ -45,6 +45,8 @@
   <div class="zero"></div>
   <div class="positive"></div>
   <script>
+    "use strict";
+
     var negative = document.querySelector(".negative");
     var zero = document.querySelector(".zero");
     var positive = document.querySelector(".positive");

devtools/client/animationinspector/test/head.js

@@ -1,6 +1,7 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
 
 "use strict";
 
@@ -114,7 +115,7 @@ function getNodeFront(selector, {walker}) {
  *        to highlight the node upon selection
  * @return {Promise} Resolves when the inspector is updated with the new node
  */
-var selectNode = Task.async(function*(data, inspector, reason="test") {
+var selectNode = Task.async(function*(data, inspector, reason = "test") {
   info("Selecting the node for '" + data + "'");
   let nodeFront = data;
   if (!data._form) {
@@ -258,7 +259,7 @@ function hasSideBarTab(inspector, id) {
  * @param {Boolean} useCapture Optional, for add/removeEventListener
  * @return A promise that resolves when the event has been handled
  */
-function once(target, eventName, useCapture=false) {
+function once(target, eventName, useCapture = false) {
   info("Waiting for event: '" + eventName + "' on " + target + ".");
 
   let deferred = promise.defer();
@@ -312,7 +313,8 @@ function waitForContentMessage(name) {
  * @return {Promise} Resolves to the response data if a response is expected,
  * immediately resolves otherwise
  */
-function executeInContent(name, data={}, objects={}, expectResponse=true) {
+function executeInContent(name, data = {}, objects = {},
+                          expectResponse = true) {
   info("Sending message " + name + " to content");
   let mm = gBrowser.selectedBrowser.messageManager;
 
@@ -327,7 +329,8 @@ function executeInContent(name, data={}, objects={}, expectResponse=true) {
 /**
  * Get the current playState of an animation player on a given node.
  */
-var getAnimationPlayerState = Task.async(function*(selector, animationIndex=0) {
+var getAnimationPlayerState = Task.async(function*(selector,
+                                                   animationIndex = 0) {
   let playState = yield executeInContent("Test:GetAnimationPlayerState",
                                          {selector, animationIndex});
   return playState;
@@ -366,7 +369,6 @@ var waitForAllAnimationTargets = Task.async(function*(panel) {
  */
 function* assertScrubberMoving(panel, isMoving) {
   let timeline = panel.animationsTimelineComponent;
-  let scrubberEl = timeline.scrubberEl;
 
   if (isMoving) {
     // If we expect the scrubber to move, just wait for a couple of
@@ -446,8 +448,8 @@ function* changeTimelinePlaybackRate(panel, rate) {
 
   // Simulate a mousemove outside of the rate selector area to avoid subsequent
   // tests from failing because of unwanted mouseover events.
-  EventUtils.synthesizeMouseAtCenter(win.document.querySelector("#timeline-toolbar"),
-                                     {type: "mousemove"}, win);
+  EventUtils.synthesizeMouseAtCenter(
+    win.document.querySelector("#timeline-toolbar"), {type: "mousemove"}, win);
 }
 
 /**
@@ -519,6 +521,8 @@ function getKeyframeComponent(panel, animationIndex, propertyName) {
  * @return {DOMNode} The keyframe element.
  */
 function getKeyframeEl(panel, animationIndex, propertyName, keyframeIndex) {
-  let keyframeComponent = getKeyframeComponent(panel, animationIndex, propertyName);
-  return keyframeComponent.keyframesEl.querySelectorAll(".frame")[keyframeIndex];
+  let keyframeComponent = getKeyframeComponent(panel, animationIndex,
+                                               propertyName);
+  return keyframeComponent.keyframesEl
+                          .querySelectorAll(".frame")[keyframeIndex];
 }

devtools/client/animationinspector/test/unit/test_formatStopwatchTime.js

@@ -9,7 +9,6 @@ var Cu = Components.utils;
 const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 const {formatStopwatchTime} = require("devtools/client/animationinspector/utils");
 
-
 const TEST_DATA = [{
   desc: "Formatting 0",
   time: 0,

devtools/client/animationinspector/utils.js

@@ -8,10 +8,8 @@
 
 const {Cu} = require("chrome");
 Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
-const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
 var {loader} = Cu.import("resource://devtools/shared/Loader.jsm");
-loader.lazyRequireGetter(this, "EventEmitter",
-                               "devtools/shared/event-emitter");
+loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
 
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
@@ -67,7 +65,8 @@ exports.createNode = createNode;
  * Given a data-scale, draw the background for a graph (vertical lines) into a
  * canvas and set that canvas as an image-element with an ID that can be used
  * from CSS.
- * @param {Document} document The document where the image-element should be set.
+ * @param {Document} document The document where the image-element should be
+ * set.
  * @param {String} id The ID for the image-element.
  * @param {Number} graphWidth The width of the graph.
  * @param {Number} intervalWidth The width of one interval
@@ -162,10 +161,10 @@ function formatStopwatchTime(time) {
 
   let pad = (nb, max) => {
     if (nb < max) {
-      return new Array((max+"").length - (nb+"").length + 1).join("0") + nb;
+      return new Array((max + "").length - (nb + "").length + 1).join("0") + nb;
     }
     return nb;
-  }
+  };
 
   minutes = pad(minutes, 10);
   seconds = pad(seconds, 10);