inspect() — react Function Reference

Architecture documentation for the inspect() function in Overlay.js from the react codebase.

Function javascript BabelCompiler Validation calls 4 called by 1

Entity Profile

BabelCompiler→ Validation→ inspect() — react Function Reference

Dependency Diagram

graph TD
  ca452625_274e_0064_ef00_337501859e94["inspect()"]
  76519fd3_f246_fb28_c5c7_e3e31c4d0bc6["Overlay"]
  ca452625_274e_0064_ef00_337501859e94 -->|defined in| 76519fd3_f246_fb28_c5c7_e3e31c4d0bc6
  31e1f969_8742_8047_dfe7_213492768ac3["showOverlayWeb()"]
  31e1f969_8742_8047_dfe7_213492768ac3 -->|calls| ca452625_274e_0064_ef00_337501859e94
  9e063716_c791_abaa_dcb9_deeb564103d2["update()"]
  ca452625_274e_0064_ef00_337501859e94 -->|calls| 9e063716_c791_abaa_dcb9_deeb564103d2
  efd600ea_16fe_ceff_8507_560b279c8d93["updateText()"]
  ca452625_274e_0064_ef00_337501859e94 -->|calls| efd600ea_16fe_ceff_8507_560b279c8d93
  ab13de00_6746_2dd9_e898_ab5ca4196895["updatePosition()"]
  ca452625_274e_0064_ef00_337501859e94 -->|calls| ab13de00_6746_2dd9_e898_ab5ca4196895
  9a7dd298_b7c7_4c0b_f647_f4a765da2a7b["remove()"]
  ca452625_274e_0064_ef00_337501859e94 -->|calls| 9a7dd298_b7c7_4c0b_f647_f4a765da2a7b
  style ca452625_274e_0064_ef00_337501859e94 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js lines 190–270

  inspect(nodes: $ReadOnlyArray<HTMLElement | Text>, name?: ?string) {
    // We can't get the size of text nodes or comment nodes. React as of v15
    // heavily uses comment nodes to delimit text.
    // TODO: We actually can measure text nodes. We should.
    const elements: $ReadOnlyArray<HTMLElement> = (nodes.filter(
      node => node.nodeType === Node.ELEMENT_NODE,
    ): any);

    while (this.rects.length > elements.length) {
      const rect = this.rects.pop();
      // $FlowFixMe[incompatible-use]
      rect.remove();
    }
    if (elements.length === 0) {
      return;
    }

    while (this.rects.length < elements.length) {
      this.rects.push(new OverlayRect(this.window.document, this.container));
    }

    const outerBox = {
      top: Number.POSITIVE_INFINITY,
      right: Number.NEGATIVE_INFINITY,
      bottom: Number.NEGATIVE_INFINITY,
      left: Number.POSITIVE_INFINITY,
    };
    elements.forEach((element, index) => {
      const box = getNestedBoundingClientRect(element, this.window);
      const dims = getElementDimensions(element);

      outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
      outerBox.right = Math.max(
        outerBox.right,
        box.left + box.width + dims.marginRight,
      );
      outerBox.bottom = Math.max(
        outerBox.bottom,
        box.top + box.height + dims.marginBottom,
      );
      outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);

      const rect = this.rects[index];
      rect.update(box, dims);
    });

    if (!name) {
      name = elements[0].nodeName.toLowerCase();

      const node = elements[0];
      const ownerName = this.agent.getComponentNameForHostInstance(node);
      if (ownerName) {
        name += ' (in ' + ownerName + ')';
      }
    }

    this.tip.updateText(
      name,
      outerBox.right - outerBox.left,
      outerBox.bottom - outerBox.top,
    );
    const tipBounds = getNestedBoundingClientRect(
      this.tipBoundsWindow.document.documentElement,
      this.window,
    );

    this.tip.updatePosition(
      {
        top: outerBox.top,
        left: outerBox.left,
        height: outerBox.bottom - outerBox.top,
        width: outerBox.right - outerBox.left,
      },
      {
        top: tipBounds.top + this.tipBoundsWindow.scrollY,
        left: tipBounds.left + this.tipBoundsWindow.scrollX,
        height: this.tipBoundsWindow.innerHeight,
        width: this.tipBoundsWindow.innerWidth,
      },
    );
  }