Bug 1290142 - Lint devtools/client/performance/components; r=jsantell

MozReview-Commit-ID: E418yPtONiX

--HG--
extra : rebase_source : 53f70dcefae586f5bb95c7cc21035a0aab71930e

.eslintignore

@@ -84,7 +84,6 @@ devtools/client/jsonview/lib/**
 devtools/client/memory/**
 devtools/client/netmonitor/test/**
 devtools/client/netmonitor/har/test/**
-devtools/client/performance/components/**
 devtools/client/performance/legacy/**
 devtools/client/performance/modules/**
 devtools/client/performance/test/**

devtools/client/performance/components/jit-optimizations-item.js

@@ -1,8 +1,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/. */
-
+"use strict";
-const { Cu } = require("chrome");
 
 const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const STRINGS_URI = "chrome://devtools/locale/jit-optimizations.properties";
@@ -10,21 +9,30 @@ const L10N = new LocalizationHelper(STRINGS_URI);
 
 const { PluralForm } = require("resource://gre/modules/PluralForm.jsm");
 const { DOM: dom, PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
-const {
-  JITOptimizations, hasSuccessfulOutcome, isSuccessfulOutcome
-} = require("devtools/client/performance/modules/logic/jit");
 const Frame = createFactory(require("devtools/client/shared/components/frame"));
-const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
-const JIT_SAMPLES = L10N.getStr("jit.samples");
-const JIT_TYPES = L10N.getStr("jit.types");
-const JIT_ATTEMPTS = L10N.getStr("jit.attempts");
 const PROPNAME_MAX_LENGTH = 4;
 // If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
 // in `devtools/client/themes/jit-optimizations.css`
 const TREE_ROW_HEIGHT = 14;
 
-const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type", "observedtype"];
+const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type",
-const JITOptimizationsItem = module.exports = createClass({
+                                 "observedtype"];
+
+/* eslint-disable no-unused-vars */
+/**
+ * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
+ *        integrated as of yet.
+ */
+const {
+  JITOptimizations, hasSuccessfulOutcome, isSuccessfulOutcome
+} = require("devtools/client/performance/modules/logic/jit");
+const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
+const JIT_SAMPLES = L10N.getStr("jit.samples");
+const JIT_TYPES = L10N.getStr("jit.types");
+const JIT_ATTEMPTS = L10N.getStr("jit.attempts");
+/* eslint-enable no-unused-vars */
+
+const JITOptimizationsItem = createClass({
   displayName: "JITOptimizationsItem",
 
   propTypes: {
@@ -33,37 +41,6 @@ const JITOptimizationsItem = module.exports = createClass({
     type: PropTypes.oneOf(OPTIMIZATION_ITEM_TYPES).isRequired,
   },
 
-  render() {
-    let {
-      item,
-      depth,
-      arrow,
-      focused,
-      type,
-      frameData,
-      onViewSourceInDebugger,
-    } = this.props;
-
-    let content;
-    switch (type) {
-      case "site": content = this._renderSite(this.props); break;
-      case "attempts": content = this._renderAttempts(this.props); break;
-      case "types": content = this._renderTypes(this.props); break;
-      case "attempt": content = this._renderAttempt(this.props); break;
-      case "type": content = this._renderType(this.props); break;
-      case "observedtype": content = this._renderObservedType(this.props); break;
-    }
-
-    return dom.div(
-      {
-        className: `optimization-tree-item optimization-tree-item-${type}`,
-        style: { marginLeft: depth * TREE_ROW_HEIGHT }
-      },
-      arrow,
-      content
-    );
-  },
-
   _renderSite({ item: site, onViewSourceInDebugger, frameData }) {
     let attempts = site.data.attempts;
     let lastStrategy = attempts[attempts.length - 1].strategy;
@@ -79,7 +56,8 @@ const JITOptimizationsItem = module.exports = createClass({
       }
     }
 
-    let sampleString = PluralForm.get(site.samples, JIT_SAMPLES).replace("#1", site.samples);
+    let sampleString = PluralForm.get(site.samples, JIT_SAMPLES)
+      .replace("#1", site.samples);
     let text = dom.span(
       { className: "optimization-site-title" },
       `${lastStrategy}${propString} – (${sampleString})`
@@ -119,12 +97,14 @@ const JITOptimizationsItem = module.exports = createClass({
     return dom.span({ className: "optimization-attempt" },
       dom.span({ className: "optimization-strategy" }, strategy),
       " → ",
-      dom.span({ className: `optimization-outcome ${success ? "success" : "failure"}` }, outcome)
+      dom.span({ className: `optimization-outcome ${success ? "success" : "failure"}` },
+               outcome)
     );
   },
 
   _renderType({ item: type }) {
-    return dom.span({ className: "optimization-ion-type" }, `${type.site}:${type.mirType}`);
+    return dom.span({ className: "optimization-ion-type" },
+                    `${type.site}:${type.mirType}`);
   },
 
   _renderObservedType({ onViewSourceInDebugger, item: type }) {
@@ -145,12 +125,51 @@ const JITOptimizationsItem = module.exports = createClass({
           }
         })
       );
-    }
     // Otherwise if we just have a location, it's probably just a memory location.
-    else if (type.location) {
+    } else if (type.location) {
       children.push(`@${type.location}`);
     }
 
     return dom.span({ className: "optimization-observed-type" }, ...children);
   },
+
+  render() {
+    /* eslint-disable no-unused-vars */
+    /**
+     * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and these
+     *        undefined variables may represent intended functionality.
+     */
+    let {
+      depth,
+      arrow,
+      type,
+      // TODO - The following are currently unused.
+      item,
+      focused,
+      frameData,
+      onViewSourceInDebugger,
+    } = this.props;
+    /* eslint-enable no-unused-vars */
+
+    let content;
+    switch (type) {
+      case "site": content = this._renderSite(this.props); break;
+      case "attempts": content = this._renderAttempts(this.props); break;
+      case "types": content = this._renderTypes(this.props); break;
+      case "attempt": content = this._renderAttempt(this.props); break;
+      case "type": content = this._renderType(this.props); break;
+      case "observedtype": content = this._renderObservedType(this.props); break;
+    }
+
+    return dom.div(
+      {
+        className: `optimization-tree-item optimization-tree-item-${type}`,
+        style: { marginLeft: depth * TREE_ROW_HEIGHT }
+      },
+      arrow,
+      content
+    );
+  },
 });
+
+module.exports = JITOptimizationsItem;

devtools/client/performance/components/jit-optimizations.js

@@ -1,8 +1,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/. */
-
+"use strict";
-const { Cu } = require("chrome");
 
 const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const STRINGS_URI = "chrome://devtools/locale/jit-optimizations.properties";
@@ -13,14 +12,21 @@ const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/cl
 const Tree = createFactory(require("../../shared/components/tree"));
 const OptimizationsItem = createFactory(require("./jit-optimizations-item"));
 const FrameView = createFactory(require("../../shared/components/frame"));
-
-const onClickTooltipString = frame =>
-  L10N.getFormatStr("viewsourceindebugger", `${frame.source}:${frame.line}:${frame.column}`);
 const JIT_TITLE = L10N.getStr("jit.title");
 // If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
 // in `devtools/client/themes/jit-optimizations.css`
 const TREE_ROW_HEIGHT = 14;
 
+/* eslint-disable no-unused-vars */
+/**
+ * TODO - Re-enable this eslint rule. The JIT tool is a work in progress, and isn't fully
+ *        integrated as of yet, and this may represent intended functionality.
+ */
+const onClickTooltipString = frame =>
+  L10N.getFormatStr("viewsourceindebugger",
+                    `${frame.source}:${frame.line}:${frame.column}`);
+/* eslint-enable no-unused-vars */
+
 const optimizationAttemptModel = {
   id: PropTypes.number.isRequired,
   strategy: PropTypes.string.isRequired,
@@ -52,7 +58,7 @@ const optimizationSiteModel = {
   }).isRequired,
 };
 
-const JITOptimizations = module.exports = createClass({
+const JITOptimizations = createClass({
   displayName: "JITOptimizations",
 
   propTypes: {
@@ -62,23 +68,16 @@ const JITOptimizations = module.exports = createClass({
     autoExpandDepth: PropTypes.number,
   },
 
-  getInitialState() {
-    return {
-      expanded: new Set()
-    };
-  },
-
   getDefaultProps() {
     return {
       autoExpandDepth: 0
     };
   },
 
-  render() {
+  getInitialState() {
-    let header = this._createHeader(this.props);
+    return {
-    let tree = this._createTree(this.props);
+      expanded: new Set()
-
+    };
-    return dom.div({}, header, tree);
   },
 
   /**
@@ -118,11 +117,19 @@ const JITOptimizations = module.exports = createClass({
   },
 
   _createTree(props) {
-    let { autoExpandDepth, frameData, onViewSourceInDebugger, optimizationSites: sites } = this.props;
+    let {
+      autoExpandDepth,
+      frameData,
+      onViewSourceInDebugger,
+      optimizationSites: sites
+    } = this.props;
 
     let getSite = id => sites.find(site => site.id === id);
-    let getIonTypeForObserved = type =>
+    let getIonTypeForObserved = type => {
-      getSite(type.id).data.types.find(iontype => (iontype.typeset || []).indexOf(type) !== -1);
+      return getSite(type.id).data.types
+        .find(iontype => (iontype.typeset || [])
+        .indexOf(type) !== -1);
+    };
     let isSite = site => getSite(site.id) === site;
     let isAttempts = attempts => getSite(attempts.id).data.attempts === attempts;
     let isAttempt = attempt => getSite(attempt.id).data.attempts.indexOf(attempt) !== -1;
@@ -131,12 +138,25 @@ const JITOptimizations = module.exports = createClass({
     let isObservedType = type => getIonTypeForObserved(type);
 
     let getRowType = node => {
-      return isSite(node) ? "site" :
+      if (isSite(node)) {
-             isAttempts(node) ? "attempts" :
+        return "site";
-             isTypes(node) ? "types" :
+      }
-             isAttempt(node) ? "attempt" :
+      if (isAttempts(node)) {
-             isType(node) ? "type" :
+        return "attempts";
-             isObservedType(node) ? "observedtype" : null;
+      }
+      if (isTypes(node)) {
+        return "types";
+      }
+      if (isAttempt(node)) {
+        return "attempt";
+      }
+      if (isType(node)) {
+        return "type";
+      }
+      if (isObservedType(node)) {
+        return "observedtype";
+      }
+      return null;
     };
 
     // Creates a unique key for each node in the
@@ -157,6 +177,7 @@ const JITOptimizations = module.exports = createClass({
         let iontype = getIonTypeForObserved(node);
         return `${getKey(iontype)}-O-${iontype.typeset.indexOf(node)}`;
       }
+      return "";
     };
 
     return Tree({
@@ -184,9 +205,8 @@ const JITOptimizations = module.exports = createClass({
           return node;
         } else if (isType(node)) {
           return node.typeset || [];
-        } else {
-          return [];
         }
+        return [];
       },
       isExpanded: node => this.state.expanded.has(node),
       onExpand: node => this.setState(state => {
@@ -215,5 +235,14 @@ const JITOptimizations = module.exports = createClass({
           frameData,
         }),
     });
+  },
+
+  render() {
+    let header = this._createHeader(this.props);
+    let tree = this._createTree(this.props);
+
+    return dom.div({}, header, tree);
   }
 });
+
+module.exports = JITOptimizations;

devtools/client/performance/components/test/head.js

@@ -3,25 +3,28 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
-var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
+/* global document, SimpleTest, requestAnimationFrame, is, ok */
+/* exported Cc, Ci, Cu, Cr, Assert, Task, TargetFactory, Toolbox, browserRequire,
+   forceRender, setProps, dumpn, checkOptimizationHeader, checkOptimizationTree */
+let { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
 
-var { require } = Cu.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
+let { require } = Cu.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
-var { Assert } = require("resource://testing-common/Assert.jsm");
+let { Assert } = require("resource://testing-common/Assert.jsm");
-var { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
+let { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
-var defer = require("devtools/shared/defer");
+let defer = require("devtools/shared/defer");
-var DevToolsUtils = require("devtools/shared/DevToolsUtils");
+let DevToolsUtils = require("devtools/shared/DevToolsUtils");
-var { Task } = require("devtools/shared/task");
+let { Task } = require("devtools/shared/task");
-var { TargetFactory } = require("devtools/client/framework/target");
+let { TargetFactory } = require("devtools/client/framework/target");
-var { Toolbox } = require("devtools/client/framework/toolbox");
+let { Toolbox } = require("devtools/client/framework/toolbox");
 
 DevToolsUtils.testing = true;
-var { require: browserRequire } = BrowserLoader({
+let { require: browserRequire } = BrowserLoader({
   baseURI: "resource://devtools/client/performance/",
   window: this
 });
 
-var $ = (selector, scope = document) => scope.querySelector(selector);
+let $ = (selector, scope = document) => scope.querySelector(selector);
-var $$ = (selector, scope = document) => scope.querySelectorAll(selector);
+let $$ = (selector, scope = document) => scope.querySelectorAll(selector);
 
 function forceRender(comp) {
   return setState(comp, {})
@@ -38,13 +41,13 @@ function onNextAnimationFrame(fn) {
 }
 
 function setState(component, newState) {
-  var deferred = defer();
+  let deferred = defer();
   component.setState(newState, onNextAnimationFrame(deferred.resolve));
   return deferred.promise;
 }
 
 function setProps(component, newState) {
-  var deferred = defer();
+  let deferred = defer();
   component.setProps(newState, onNextAnimationFrame(deferred.resolve));
   return deferred.promise;
 }
@@ -112,6 +115,7 @@ let OPTS_DATA_GENERAL = [{
     }]
   }
 }];
+
 OPTS_DATA_GENERAL.forEach(site => {
   site.data.types.forEach(type => {
     if (type.typeset) {
@@ -122,7 +126,6 @@ OPTS_DATA_GENERAL.forEach(site => {
   site.data.types.id = site.id;
 });
 
-
 function checkOptimizationHeader(name, file, line) {
   is($(".optimization-header .header-function-name").textContent, name,
     "correct optimization header function name");
@@ -175,7 +178,8 @@ function checkOptimizationTree(rowData) {
           `row ${i}th: correct attempt row, attempt item`);
         is($(".optimization-outcome", row).textContent, expected.outcome,
           `row ${i}th: correct attempt row, outcome item`);
-        ok($(".optimization-outcome", row).classList.contains(expected.success ? "success" : "failure"),
+        ok($(".optimization-outcome", row)
+          .classList.contains(expected.success ? "success" : "failure"),
           `row ${i}th: correct attempt row, failure/success status`);
         break;
     }