Upgrade eslint and eslint plugins, enable more rules, and fix issues …

…from these rules (firefox-devtools#414)

.eslintrc.js

@@ -42,10 +42,10 @@ module.exports = {
     // possible errors
     "array-callback-return": "error",
     "consistent-return": "error",
-    // "default-case": "error", // to be enabled after fixing issues in our code
+    "default-case": "error",
     "dot-notation": "error",
     "eqeqeq": "error",
-    // "for-direction": "error", // to be enabled after we upgrade eslint
+    "for-direction": "error",
     "no-alert": "error",
     "no-caller": "error",
     "no-eval": "error",
@@ -58,8 +58,7 @@ module.exports = {
     "no-self-compare": "error",
     "no-throw-literal": "error",
     "no-unmodified-loop-condition": "error",
-    // "no-unused-expression": "error", // to be enabled after we upgrade eslint
-    // "no-use-before-define": "error", // to be enabled after fixing issues in our code
+    "no-unused-expressions": "error",
     "no-useless-call": "error",
     "no-useless-computed-key": "error",
     "no-useless-concat": "error",
@@ -70,8 +69,8 @@ module.exports = {
     "no-void": "error",
     "no-with": "error",
     "prefer-const": "error",
-    // "prefer-promise-reject-errors": "error", // to be enabled after fixing issues in our code
-    // "prefer-rest-params": "error", // to be enabled after fixing issues in our code
+    "prefer-promise-reject-errors": "error",
+    "prefer-rest-params": "error",
     "prefer-spread": "error",
   },
   "settings": {

package.json

@@ -98,13 +98,12 @@
     "babel-preset-react-hmre": "^1.1.1",
     "css-loader": "^0.28.4",
     "devtools-license-check": "^0.2.0",
-    "eslint": "^3.10.2",
-    "eslint-config-google": "^0.6.0",
-    "eslint-config-prettier": "^2.2.0",
+    "eslint": "^4.1.1",
+    "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-flowtype": "^2.34.1",
     "eslint-plugin-import": "^2.6.1",
     "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^6.4.0",
+    "eslint-plugin-react": "^7.1.0",
     "express": "^4.15.3",
     "fake-indexeddb": "^1.0.12",
     "file-loader": "^0.11.2",

src/actions/icons.js

@@ -56,7 +56,10 @@ export function iconStartLoading(icon: string): ThunkAction<Promise<void>> {
           dispatch(iconIsInError(icon));
           break;
         case 'cached':
-        // nothing to do
+          // nothing to do
+          break;
+        default:
+          throw new Error(`Unknown icon load result ${result}`);
       }
     });
   };

src/components/app/Home.js

@@ -251,7 +251,7 @@ class Home extends PureComponent {
             <InstallButton name="Gecko Profiler" xpiURL={LEGACY_ADDON_URL}>
               Gecko Profiler Add-on
             </InstallButton>. Then use the button added to the browser, or use
-            the following shortcuts to record a profile. The button's icon is
+            the following shortcuts to record a profile. The button’s icon is
             blue when a profile is recording. Hit <kbd>Capture Profile</kbd> to
             load the data into perf.html.
           </p>

src/components/app/Root.js

@@ -93,6 +93,8 @@ class ProfileViewWhenReadyImpl extends PureComponent {
       case 'from-url':
         retrieveProfileFromUrl(profileURL);
         break;
+      default:
+        throw new Error(`Unknown datasource ${dataSource}`);
     }
   }
 

src/components/calltree/ProfileCallTreeContextMenu.js

@@ -24,6 +24,7 @@ type Props = {
 };
 
 class ProfileCallTreeContextMenu extends PureComponent {
+  props: Props;
   constructor(props: Props) {
     super(props);
     (this: any).handleClick = this.handleClick.bind(this);
@@ -63,14 +64,19 @@ class ProfileCallTreeContextMenu extends PureComponent {
     copy(stack);
   }
 
-  handleClick(event: SyntheticEvent, data: { type: string }): void {
+  handleClick(
+    event: SyntheticEvent,
+    data: { type: 'copyFunctionName' | 'copyStack' }
+  ): void {
     switch (data.type) {
       case 'copyFunctionName':
         this.copyFunctionName();
         break;
       case 'copyStack':
         this.copyStack();
         break;
+      default:
+        throw new Error(`Unknown type ${data.type}`);
     }
   }
 

src/components/header/ThreadStackGraph.js

@@ -14,30 +14,31 @@ class ThreadStackGraph extends PureComponent {
     this._requestedAnimationFrame = false;
     this._onMouseUp = this._onMouseUp.bind(this);
     this._onMarkerSelected = this._onMarkerSelected.bind(this);
+    this._canvas = null;
   }
 
   _scheduleDraw() {
     if (!this._requestedAnimationFrame) {
       this._requestedAnimationFrame = true;
       window.requestAnimationFrame(() => {
         this._requestedAnimationFrame = false;
-        if (this.refs.canvas) {
+        if (this._canvas) {
           timeCode('ThreadStackGraph render', () => {
-            this.drawCanvas(this.refs.canvas);
+            this.drawCanvas(this._canvas);
           });
         }
       });
     }
   }
 
   componentDidMount() {
-    const win = this.refs.canvas.ownerDocument.defaultView;
+    const win = this._canvas.ownerDocument.defaultView;
     win.addEventListener('resize', this._resizeListener);
     this.forceUpdate(); // for initial size
   }
 
   componentWillUnmount() {
-    const win = this.refs.canvas.ownerDocument.defaultView;
+    const win = this._canvas.ownerDocument.defaultView;
     win.removeEventListener('resize', this._resizeListener);
   }
 
@@ -121,7 +122,7 @@ class ThreadStackGraph extends PureComponent {
   _onMouseUp(e) {
     if (this.props.onClick) {
       const { rangeStart, rangeEnd } = this.props;
-      const r = this.refs.canvas.getBoundingClientRect();
+      const r = this._canvas.getBoundingClientRect();
 
       const x = e.pageX - r.left;
       const time = rangeStart + x / r.width * (rangeEnd - rangeStart);
@@ -145,7 +146,7 @@ class ThreadStackGraph extends PureComponent {
             `${this.props.className}Canvas`,
             'threadStackGraphCanvas'
           )}
-          ref="canvas"
+          ref={ref => (this._canvas = ref)}
           onMouseUp={this._onMouseUp}
         />
       </div>

src/components/markers/ProfileMarkersView.js

@@ -99,14 +99,15 @@ class ProfileMarkersView extends PureComponent {
     this._expandedNodeIds = [];
     this._onExpandedNodeIdsChange = () => {};
     this._onSelectionChange = this._onSelectionChange.bind(this);
+    this._treeView = null;
   }
 
   componentDidMount() {
     this.focus();
   }
 
   focus() {
-    this.refs.treeView.focus();
+    this._treeView.focus();
   }
 
   _onSelectionChange(selectedMarker) {
@@ -127,7 +128,7 @@ class ProfileMarkersView extends PureComponent {
           onExpandedNodesChange={this._onExpandedNodeIdsChange}
           selectedNodeId={selectedMarker}
           expandedNodeIds={this._expandedNodeIds}
-          ref="treeView"
+          ref={ref => (this._treeView = ref)}
         />
       </div>
     );

src/components/summary/SummarizeLineGraph.js

@@ -87,11 +87,13 @@ class SummarizeLineGraph extends PureComponent {
           x2="0%"
           y2="100%"
         >
-          <stop offset="10%" stopColor="#e11800" /> // Red
-          <stop offset="60%" stopColor="#56b300" /> // Dark Green
-          <stop offset="85%" stopColor="#c8f983" /> // Light Green
-          <stop offset="95%" stopColor="rgba(200, 249, 131, 0)" /> //
-          Transparent
+          <stop offset="10%" stopColor="#e11800" /* Red */ />
+          <stop offset="60%" stopColor="#56b300" /* Dark Green */ />
+          <stop offset="85%" stopColor="#c8f983" /* Light Green */ />
+          <stop
+            offset="95%"
+            stopColor="rgba(200, 249, 131, 0)" /* Transparent */
+          />
         </linearGradient>;
   }
 

src/components/timeline/TimelineMarkerCanvas.js

@@ -320,7 +320,9 @@ class TimelineMarkerCanvas extends PureComponent {
       switch (data.type) {
         case 'UserTiming': {
           tooltipName = data.name;
+          break;
         }
+        default:
       }
     }
 

src/components/timeline/TimelineViewport.js

@@ -574,6 +574,7 @@ function getNormalizedScrollDelta(
       return delta * pageHeight;
     case DOM_DELTA_LINE:
       return delta * SCROLL_LINE_SIZE;
+    default:
   }
   // Scroll by pixel.
   return delta;

src/profile-logic/marker-timing.js

@@ -129,6 +129,7 @@ function computeMarkerLabel(data: MarkerPayload): string {
     switch (data.type) {
       case 'UserTiming':
         return (data: UserTimingMarkerPayload).name;
+      default:
     }
   }
 

src/profile-logic/profile-data.js

@@ -198,8 +198,9 @@ export function filterThreadByImplementation(
         thread,
         funcIndex => funcTable.isJS[funcIndex]
       );
+    default:
+      return thread;
   }
-  return thread;
 }
 
 function _filterThreadByFunc(
@@ -937,8 +938,11 @@ export function getFriendlyThreadName(
         case 'plugin':
           label = 'Plugin';
           break;
+        default:
+        // should we throw here ?
       }
       break;
+    default:
   }
 
   if (!label) {

src/profile-logic/profile-store.js

@@ -14,13 +14,17 @@ export function uploadBinaryProfileData(
         resolve(xhr.responseText);
       } else {
         reject(
-          `xhr onload with status != 200, xhr.statusText: ${xhr.statusText}`
+          new Error(
+            `xhr onload with status != 200, xhr.statusText: ${xhr.statusText}`
+          )
         );
       }
     };
 
     xhr.onerror = () => {
-      reject(`xhr onerror was called, xhr.statusText: ${xhr.statusText}`);
+      reject(
+        new Error(`xhr onerror was called, xhr.statusText: ${xhr.statusText}`)
+      );
     };
 
     xhr.upload.onprogress = e => {

src/reducers/flame-chart.js

@@ -18,16 +18,18 @@ function categoryColorStrategy(
   switch (action.type) {
     case 'CHANGE_FLAME_CHART_COLOR_STRATEGY':
       return action.getCategory;
+    default:
+      return state;
   }
-  return state;
 }
 
 function labelingStrategy(state: GetLabel = getFunctionName, action: Action) {
   switch (action.type) {
     case 'CHANGE_FLAME_CHART_LABELING_STRATEGY':
       return action.getLabel;
+    default:
+      return state;
   }
-  return state;
 }
 
 export default combineReducers({ categoryColorStrategy, labelingStrategy });

src/reducers/timeline-view.js

@@ -27,8 +27,9 @@ function isFlameChartExpanded(
       newState.set(action.threadIndex, action.isExpanded);
       return newState;
     }
+    default:
+      return state;
   }
-  return state;
 }
 
 function areMarkersExpanded(
@@ -41,17 +42,19 @@ function areMarkersExpanded(
       newState.set(action.threadIndex, action.isExpanded);
       return newState;
     }
+    default:
+      return state;
   }
-  return state;
 }
 
 function hasZoomedViaMousewheel(state: boolean = false, action: Action) {
   switch (action.type) {
     case 'HAS_ZOOMED_VIA_MOUSEWHEEL': {
       return true;
     }
+    default:
+      return state;
   }
-  return state;
 }
 
 export default combineReducers({

src/test/fixtures/fake-symbol-store.js

@@ -19,7 +19,7 @@ export class FakeSymbolStore {
     if (lib.debugName in this._symbolTables) {
       return Promise.resolve(this._symbolTables[lib.debugName].addrs);
     }
-    return Promise.reject();
+    return Promise.reject(new Error());
   }
 
   getSymbolsForAddressesInLib(requestedAddressesIndices, lib) {
@@ -29,6 +29,6 @@ export class FakeSymbolStore {
         requestedAddressesIndices.map(index => syms[index])
       );
     }
-    return Promise.reject();
+    return Promise.reject(new Error());
   }
 }

src/url-handling.js

@@ -91,6 +91,7 @@ export function urlFromState(urlState: URLState) {
         ? null
         : undefined;
       break;
+    default:
   }
   const qString = queryString.stringify(query);
   return pathname + (qString ? '?' + qString : '');
@@ -106,9 +107,9 @@ function toDataSourceEnum(str: string): DataSource {
     case 'public':
     case 'from-url':
       return str;
+    default:
+      throw new Error(`Unexpected data source ${str}`);
   }
-
-  throw new Error('unexpected data source');
 }
 
 /**