createSourcesEditorPanel() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createSourcesEditorPanel() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 380–418

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

    return;
  }

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

  const sourcesPanel = chrome.devtools.panels.sources;
  if (!sourcesPanel || !sourcesPanel.createSidebarPane) {
    // Firefox doesn't currently support extending the source panel.
    return;
  }

  sourcesPanel.createSidebarPane('Code Editor ⚛', createdPane => {
    editorPane = createdPane;

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

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

        render();
        portal.injectStyles(cloneStyleTags);

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