Enable the new rule react/no-unused-class-component-methods and fix e…

…slint errors

.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
     'react/no-did-update-set-state': 'error',
     'react/no-will-update-set-state': 'error',
     'react/no-redundant-should-component-update': 'error',
+    'react/no-unused-class-component-methods': 'error',
     'react/no-this-in-sfc': 'error',
     'react/no-typos': 'error',
     // Flow provides enough coverage over the prop types, and there can be errors
@@ -128,8 +129,8 @@ module.exports = {
   settings: {
     react: {
       pragma: 'React',
-      version: '15.0',
-      flowVersion: '0.63.1',
+      version: '17.0',
+      flowVersion: '0.96.0',
     },
     'import/resolver': {
       alias: {

src/components/app/MenuButtons/Permalink.js

@@ -26,11 +26,7 @@ type State = {|
 |};
 
 export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
-  _permalinkButton: ButtonWithPanel | null;
   _permalinkTextField: HTMLInputElement | null;
-  _takePermalinkButtonRef = (elem: ButtonWithPanel | null) => {
-    this._permalinkButton = elem;
-  };
   _takePermalinkTextFieldRef = (elem: HTMLInputElement | null) => {
     this._permalinkTextField = elem;
   };
@@ -74,7 +70,6 @@ export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
       <Localized id="MenuButtons--permalink--button" attrs={{ label: true }}>
         <ButtonWithPanel
           buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsPermalinkButtonButton"
-          ref={this._takePermalinkButtonRef}
           label="Permalink"
           initialOpen={this.props.isNewlyPublished}
           onPanelOpen={this._shortenUrlAndFocusTextFieldOnCompletion}

src/components/app/MenuButtons/Publish.js

@@ -201,21 +201,6 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
     );
   }
 
-  _closePanelAfterUpload = () => {
-    const { resetUploadState } = this.props;
-    // Only reset it after the panel animation disappears.
-    setTimeout(resetUploadState, 300);
-
-    const { body } = document;
-    if (body) {
-      // This is a hack to close the arrow panel. See the following issue on
-      // moving this to the Redux state.
-      //
-      // https://github.com/firefox-devtools/profiler/issues/1888
-      body.dispatchEvent(new MouseEvent('mousedown'));
-    }
-  };
-
   _renderUploadPanel() {
     const {
       uploadProgress,

src/components/app/ProfileDeleteButton.js

@@ -152,10 +152,6 @@ export class ProfileDeletePanel extends PureComponent<PanelProps, PanelState> {
     }
   };
 
-  onCancelDeletion = () => {
-    this.props.onProfileDeleteCanceled();
-  };
-
   preventClick(e: SyntheticMouseEvent<>) {
     e.preventDefault();
   }

src/components/flame-graph/FlameGraph.js

@@ -122,6 +122,8 @@ class FlameGraphImpl extends React.PureComponent<Props> {
     this._viewport = viewport;
   };
 
+  /* This method is called from MaybeFlameGraph. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus = () => {
     if (this._viewport) {
       this._viewport.focus();

src/components/js-tracer/index.js

@@ -40,8 +40,6 @@ type StateProps = {|
 type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 
 class JsTracerImpl extends React.PureComponent<Props> {
-  _rafGeneration: number = 0;
-
   render() {
     const { profile, jsTracerTable, showJsTracerSummary, threadsKey } =
       this.props;

src/components/shared/ButtonWithPanel/ArrowPanel.js

@@ -35,6 +35,10 @@ export class ArrowPanel extends React.PureComponent<Props, State> {
     openGeneration: 0,
   };
 
+  /* These 2 methods are called from other components.
+  /* See https://github.com/firefox-devtools/profiler/issues/1888 and
+   * https://github.com/firefox-devtools/profiler/issues/1641 */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   open() {
     if (this.state.open) {
       return;
@@ -43,6 +47,7 @@ export class ArrowPanel extends React.PureComponent<Props, State> {
     this.setState({ open: true });
   }
 
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   close() {
     this.setState((state) => {
       if (!state.open) {

src/components/shared/TreeView.js

@@ -429,6 +429,8 @@ export class TreeView<DisplayData: Object> extends React.PureComponent<
     { limit: 1 }
   );
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   scrollSelectionIntoView() {
     const { selectedNodeId, tree } = this.props;
     if (this._list && selectedNodeId !== null) {
@@ -703,6 +705,8 @@ export class TreeView<DisplayData: Object> extends React.PureComponent<
     }
   };
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus() {
     if (this._list) {
       this._list.focus();

src/components/shared/VirtualList.js

@@ -160,6 +160,8 @@ class VirtualListInner<Item> extends React.PureComponent<
     this._container = element;
   };
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   getBoundingClientRect() {
     if (this._container) {
       return this._container.getBoundingClientRect();
@@ -339,6 +341,8 @@ export class VirtualList<Item> extends React.PureComponent<
     return { visibleRangeStart, visibleRangeEnd };
   }
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   scrollItemIntoView(itemIndex: number, offsetX: CssPixels) {
     const container = this._container.current;
     if (!container) {
@@ -370,6 +374,8 @@ export class VirtualList<Item> extends React.PureComponent<
     }
   }
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus() {
     const container = this._container.current;
     if (container) {

src/components/stack-chart/Canvas.js

@@ -88,9 +88,6 @@ const FONT_SIZE = 10;
 const BORDER_OPACITY = 0.4;
 
 class StackChartCanvasImpl extends React.PureComponent<Props> {
-  _leftMarginGradient: null | CanvasGradient = null;
-  _rightMarginGradient: null | CanvasGradient = null;
-
   componentDidUpdate(prevProps) {
     // We want to scroll the selection into view when this component
     // is mounted, but using componentDidMount won't work here as the

src/components/timeline/EmptyThreadIndicator.js

@@ -38,9 +38,6 @@ type Props = {|
  * thread was shut down.
  */
 class EmptyThreadIndicatorImpl extends PureComponent<Props> {
-  _canvas: HTMLCanvasElement | null;
-  _requestedAnimationFrame: boolean | null;
-
   render() {
     const style = getIndicatorPositions(this.props);
     return (

src/components/timeline/OriginsTimeline.js

@@ -72,7 +72,9 @@ class OriginsTimelineView extends React.PureComponent<Props, State> {
   /**
    * This method collects the initially selected track's HTMLElement. This allows the timeline
    * to scroll the initially selected track into view once the page is loaded.
-   */
+   * It's not used currently but it will be used when we implement this
+   * component better. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   setInitialSelected = (el: InitialSelectedTrackReference) => {
     this.setState({ initialSelected: el });
   };

src/components/tooltip/Tooltip.js

@@ -29,8 +29,6 @@ type PositionFromMouse = 'before-mouse' | 'after-mouse';
 type TooltipPosition = PositionFromMouse | 'window-edge';
 
 export class Tooltip extends React.PureComponent<Props> {
-  _isMounted: boolean = false;
-  _isLayoutScheduled: boolean = false;
   _interiorElementRef: {| current: HTMLDivElement | null |} = React.createRef();
 
   // This keeps the previous tooltip positioning relatively to the mouse cursor.