createElementsInspectPanel() — react Function Reference

Architecture documentation for the createElementsInspectPanel() function in index.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createElementsInspectPanel() — react Function Reference

Dependency Diagram

graph TD
  6dd961d3_298e_39d3_c501_0143d429fc2f["createElementsInspectPanel()"]
  b5e42467_7633_e234_1d51_a93bfc4818c7["index.js"]
  6dd961d3_298e_39d3_c501_0143d429fc2f -->|defined in| b5e42467_7633_e234_1d51_a93bfc4818c7
  fcc10411_2c67_c71c_4b48_a0e0e4d6e62b["mountReactDevTools()"]
  fcc10411_2c67_c71c_4b48_a0e0e4d6e62b -->|calls| 6dd961d3_298e_39d3_c501_0143d429fc2f
  a17b972e_da5c_8363_37f8_381173484aff["ensureInitialHTMLIsCleared()"]
  6dd961d3_298e_39d3_c501_0143d429fc2f -->|calls| a17b972e_da5c_8363_37f8_381173484aff
  style 6dd961d3_298e_39d3_c501_0143d429fc2f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 298–342

function createElementsInspectPanel() {
  if (inspectedElementPortalContainer) {
    // Panel is created and user opened it at least once
    ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
    render();

    return;
  }

  if (inspectedElementPane) {
    // Panel is created, but wasn't opened yet, so no document is present for it
    return;
  }

  const elementsPanel = chrome.devtools.panels.elements;
  if (__IS_FIREFOX__ || !elementsPanel || !elementsPanel.createSidebarPane) {
    // Firefox will not pass the window to the onShown listener despite setPage
    // being called.
    // See https://bugzilla.mozilla.org/show_bug.cgi?id=2010549

    // May not be supported in some browsers.
    // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel/createSidebarPane#browser_compatibility
    return;
  }

  elementsPanel.createSidebarPane('React Element ⚛', createdPane => {
    inspectedElementPane = createdPane;

    createdPane.setPage('panel.html');
    createdPane.setHeight('75px');

    createdPane.onShown.addListener(portal => {
      inspectedElementPortalContainer = portal.container;
      if (inspectedElementPortalContainer != null && render) {
        ensureInitialHTMLIsCleared(inspectedElementPortalContainer);
        bridge.send('syncSelectionFromBuiltinElementsPanel');

        render();
        portal.injectStyles(cloneStyleTags);

        logEvent({event_name: 'selected-inspected-element-pane'});
      }
    });
  });
}