createComponentsPanel() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createComponentsPanel() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 255–296

function createComponentsPanel() {
  if (componentsPortalContainer) {
    // Panel is created and user opened it at least once
    ensureInitialHTMLIsCleared(componentsPortalContainer);
    render('components');

    return;
  }

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

  chrome.devtools.panels.create(
    __IS_CHROME__ || __IS_EDGE__ ? 'Components ⚛' : 'Components',
    __IS_EDGE__ ? 'icons/production.svg' : '',
    'panel.html',
    createdPanel => {
      componentsPanel = createdPanel;

      createdPanel.onShown.addListener(portal => {
        componentsPortalContainer = portal.container;
        if (componentsPortalContainer != null && render) {
          ensureInitialHTMLIsCleared(componentsPortalContainer);

          render('components');
          portal.injectStyles(cloneStyleTags);

          logEvent({event_name: 'selected-components-tab'});
        }
      });

      createdPanel.onShown.addListener(() => {
        bridge.emit('extensionComponentsPanelShown');
      });
      createdPanel.onHidden.addListener(() => {
        bridge.emit('extensionComponentsPanelHidden');
      });
    },
  );
}