Commit 93791884 authored by Hubert Boma Manilla's avatar Hubert Boma Manilla
Browse files

Bug 1835779 - [devtools] Load the Blackbox lines component only when needed r=ochameau 

1) Lets only load the `BlackboxLines` component when
- The selected source is on the ignore list
- The source is wholly or partially blackboxed

2) `BlackboxLines` should not longer be a connected component, lets pass the
values down from the parent.

This should fix the prefomance regression in Bug 1832019

Differential Revision: https://phabricator.services.mozilla.com/D179426
parent 7eafd6ec

devtools/client/debugger/src/components/Editor/BlackboxLines.js

+5 −30
Original line number Diff line number Diff line
@@ -2,26 +2,19 @@ 
 * 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 { connect } from "../../utils/connect";

import PropTypes from "prop-types";

import { Component } from "react";

import { toEditorLine, fromEditorLine } from "../../utils/editor";

import { isLineBlackboxed } from "../../utils/source";

import {

  getBlackBoxRanges,

  getSelectedSource,

  isSourceMapIgnoreListEnabled,

  isSourceOnSourceMapIgnoreList,

} from "../../selectors";

import { isWasm } from "../../utils/wasm";



// This renders blackbox line highlighting in the editor

class BlackboxLines extends Component {

  static get propTypes() {

    return {

      editor: PropTypes.object,

      selectedSource: PropTypes.object,

      blackboxedRangesForSelectedSource: PropTypes.object,

      editor: PropTypes.object.isRequired,

      selectedSource: PropTypes.object.isRequired,

      blackboxedRangesForSelectedSource: PropTypes.array,

      isSourceOnIgnoreList: PropTypes.bool,

    };

  }
@@ -35,12 +28,7 @@ class BlackboxLines extends Component { 
      return;

    }



    // When `blackboxedRangesForSelectedSource` is undefined, the source isn't blackboxed

    if (!blackboxedRangesForSelectedSource) {

      return;

    }



    // But when `blackboxedRangesForSelectedSource` is defined and the array is empty,

    // When `blackboxedRangesForSelectedSource` is defined and the array is empty,

    // the whole source was blackboxed.

    if (!blackboxedRangesForSelectedSource.length) {

      this.setAllBlackboxLines(editor);
@@ -147,17 +135,4 @@ class BlackboxLines extends Component { 
  }

}



const mapStateToProps = state => {

  const selectedSource = getSelectedSource(state);

  return {

    selectedSource,

    blackboxedRangesForSelectedSource: selectedSource

      ? getBlackBoxRanges(state)[selectedSource.url]

      : undefined,

    isSourceOnIgnoreList:

      isSourceMapIgnoreListEnabled(state) &&

      isSourceOnSourceMapIgnoreList(state, selectedSource),

  };

};



export default connect(mapStateToProps)(BlackboxLines);
 
export default BlackboxLines;

devtools/client/debugger/src/components/Editor/index.js

+13 −1
Original line number Diff line number Diff line
@@ -670,6 +670,9 @@ class Editor extends PureComponent { 
      inlinePreviewEnabled,

      editorWrappingEnabled,

      highlightedLineRange,

      blackboxedRanges,

      isSourceOnIgnoreList,

      selectedSourceIsBlackBoxed,

    } = this.props;

    const { editor, contextMenu } = this.state;
@@ -688,7 +691,16 @@ class Editor extends PureComponent { 
        {highlightedLineRange ? (

          <HighlightLines editor={editor} range={highlightedLineRange} />

        ) : null}

        <BlackboxLines editor={editor} />

        {isSourceOnIgnoreList || selectedSourceIsBlackBoxed ? (

          <BlackboxLines

            editor={editor}

            selectedSource={selectedSource}

            isSourceOnIgnoreList={isSourceOnIgnoreList}

            blackboxedRangesForSelectedSource={

              blackboxedRanges[selectedSource.url]

            }

          />

        ) : null}

        <Exceptions />

        <EditorMenu

          editor={editor}