How to use the devtools/client/shared/vendor/react.Component function in devtools

function getKeyForOS(os, action) {
  const osActions = KEYS[os] || KEYS.Linux;
  return osActions[action];
}

function formatKey(action) {
  const key = getKey(`${action}Display`) || getKey(action);
  if (isMacOS) {
    const winKey = getKeyForOS("WINNT", `${action}Display`) || getKeyForOS("WINNT", action);
    // display both Windows type and Mac specific keys
    return (0, _text.formatKeyShortcut)([key, winKey].join(" "));
  }
  return (0, _text.formatKeyShortcut)(key);
}

class CommandBar extends _react.Component {
  componentWillUnmount() {
    const shortcuts = this.context.shortcuts;
    COMMANDS.forEach(action => shortcuts.off(getKey(action)));
    if (isMacOS) {
      COMMANDS.forEach(action => shortcuts.off(getKeyForOS("WINNT", action)));
    }
  }

  componentDidMount() {
    const shortcuts = this.context.shortcuts;

    COMMANDS.forEach(action => shortcuts.on(getKey(action), (_, e) => this.handleEvent(e, action)));

    if (isMacOS) {
      // The Mac supports both the Windows Function keys
      // as well as the Mac non-Function keys

var _AccessibleImage2 = _interopRequireDefault(_AccessibleImage);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function getFilePath(item, index) {
  return item.type === "RESULT" ? `${item.sourceId}-${index || "$"}` : `${item.sourceId}-${item.line}-${item.column}-${index || "$"}`;
} /* 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 . */

function sanitizeQuery(query) {
  // no '\' at end of query
  return query.replace(/\\$/, "");
}

class ProjectSearch extends _react.Component {
  constructor(props) {
    super(props);

    this.toggleProjectTextSearch = (key, e) => {
      const { cx, closeProjectSearch, setActiveSearch } = this.props;
      if (e) {
        e.preventDefault();
      }

      if (this.isProjectSearchEnabled()) {
        return closeProjectSearch(cx);
      }

      return setActiveSearch("project");
    };

value: true
});

var _react = require("devtools/client/shared/vendor/react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("devtools/client/debugger/dist/vendors").vendored["classnames"];

var _classnames2 = _interopRequireDefault(_classnames);

var _CommandBarButton = require("../shared/Button/CommandBarButton");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class UtilsBar extends _react.Component {
  renderUtilButtons() {
    return [(0, _CommandBarButton.debugBtn)(this.props.toggleShortcutsModal, "shortcuts", "active", L10N.getStr("shortcuts.buttonName"), false)];
  }

  render() {
    return _react2.default.createElement(
      "div",
      {
        className: (0, _classnames2.default)("command-bar bottom", {
          vertical: !this.props.horizontal
        })
      },
      this.renderUtilButtons()
    );
  }
} /* This Source Code Form is subject to the terms of the Mozilla Public

var _ExceptionOption2 = _interopRequireDefault(_ExceptionOption);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// At present, the "Pause on any URL" checkbox creates an xhrBreakpoint
// of "ANY" with no path, so we can remove that before creating the list
function getExplicitXHRBreakpoints(xhrBreakpoints) {
  return xhrBreakpoints.filter(bp => bp.path !== "");
} /* 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 . */

const xhrMethods = ["ANY", "GET", "POST", "PUT", "HEAD", "DELETE", "PATCH", "OPTIONS"];

class XHRBreakpoints extends _react.Component {

  constructor(props) {
    super(props);

    this.handleNewSubmit = e => {
      e.preventDefault();
      e.stopPropagation();

      const setXHRBreakpoint = function () {
        this.props.setXHRBreakpoint(this.state.inputValue, this.state.inputMethod);
        this.hideInput();
      };

      // force update inputMethod in state for mochitest purposes
      // before setting XHR breakpoint
      this.setState(

var _selectedLocation = require("../../../utils/selected-location");

var _createEditor = require("../../../utils/editor/create-editor");

var _breakpoint = require("../../../utils/breakpoint/index");

var _selectors = require("../../../selectors/index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* 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 . */

class Breakpoints extends _react.Component {

  componentWillUnmount() {
    this.removeEditor();
  }

  getEditor() {
    if (!this.headlessEditor) {
      this.headlessEditor = (0, _createEditor.createHeadlessEditor)();
    }
    return this.headlessEditor;
  }

  removeEditor() {
    if (!this.headlessEditor) {
      return;
    }

var _actions = require("../../actions/index");

var _actions2 = _interopRequireDefault(_actions);

var _selectors = require("../../selectors/index");

var _workers = require("../../utils/workers");

var _AccessibleImage = require("../shared/AccessibleImage");

var _AccessibleImage2 = _interopRequireDefault(_AccessibleImage);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class Worker extends _react.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.onSelectThread = () => {
      const { thread } = this.props;
      this.props.selectThread(this.props.cx, thread.actor);
    }, _temp;
  }

  render() {
    const { currentThread, isPaused, thread } = this.props;

    const worker = (0, _workers.isWorker)(thread);
    const label = worker ? (0, _workers.getDisplayName)(thread) : L10N.getStr("mainThread");

    return _react2.default.createElement(

var _Breakpoint2 = _interopRequireDefault(_Breakpoint);

var _selectors = require("../../selectors/index");

var _breakpoint = require("../../utils/breakpoint/index");

var _connect = require("../../utils/connect");

var _breakpoints = require("./menus/breakpoints");

var _editor = require("./menus/editor");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class Breakpoints extends _react.Component {
  render() {
    const {
      cx,
      breakpoints,
      selectedSource,
      editor,
      breakpointActions,
      editorActions
    } = this.props;

    if (!breakpoints || selectedSource.isBlackBoxed) {
      return null;
    }

    return _react2.default.createElement(
      "div",

* License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at . */

function getShortcuts() {
  const searchAgainKey = L10N.getStr("sourceSearch.search.again.key2");
  const searchAgainPrevKey = L10N.getStr("sourceSearch.search.againPrev.key2");
  const searchKey = L10N.getStr("sourceSearch.search.key2");

  return {
    shiftSearchAgainShortcut: searchAgainPrevKey,
    searchAgainShortcut: searchAgainKey,
    searchShortcut: searchKey
  };
}

class SearchBar extends _react.Component {
  constructor(props) {
    super(props);

    this.onEscape = e => {
      this.closeSearch(e);
    };

    this.clearSearch = () => {
      const { editor: ed, query } = this.props;
      if (ed) {
        const ctx = { ed, cm: ed.codeMirror };
        (0, _editor.removeOverlay)(ctx, query);
      }
    };

    this.closeSearch = e => {

function debugBtn(onClick, type, className, tooltip) {
  return _react2.default.createElement(
    "button",
    {
      onClick: onClick,
      className: `${type} ${className}`,
      key: type,
      title: tooltip
    },
    _react2.default.createElement(_AccessibleImage2.default, { className: type, title: tooltip, "aria-label": tooltip })
  );
}

const mdnLink = "https://developer.mozilla.org/docs/Tools/Debugger/Using_the_Debugger_map_scopes_feature?utm_source=devtools&utm_medium=debugger-map-scopes";

class SecondaryPanes extends _react.Component {
  constructor(props) {
    super(props);

    this.onExpressionAdded = () => {
      this.setState({ showExpressionsInput: false });
    };

    this.onXHRAdded = () => {
      this.setState({ showXHRInput: false });
    };

    this.state = {
      showExpressionsInput: false,
      showXHRInput: false
    };
  }

var _Outline = require("./Outline");

var _Outline2 = _interopRequireDefault(_Outline);

var _SourcesTree = require("./SourcesTree");

var _SourcesTree2 = _interopRequireDefault(_SourcesTree);

var _AccessibleImage = require("../shared/AccessibleImage");

var _AccessibleImage2 = _interopRequireDefault(_AccessibleImage);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class PrimaryPanes extends _react.Component {
  constructor(props) {
    super(props);

    this.showPane = selectedPane => {
      this.props.setPrimaryPaneTab(selectedPane);
    };

    this.onAlphabetizeClick = () => {
      const alphabetizeOutline = !_prefs.prefs.alphabetizeOutline;
      _prefs.prefs.alphabetizeOutline = alphabetizeOutline;
      this.setState({ alphabetizeOutline });
    };

    this.onActivateTab = index => {
      if (index === 0) {
        this.showPane("sources");