fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs

packages/react-devtools-core/src/backend.js

@@ -22,7 +22,7 @@ import {
 } from './cachedSettings';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
-import type {ComponentFilter} from 'react-devtools-shared/src/types';
+import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types';
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 

packages/react-devtools-core/src/standalone.js

@@ -33,7 +33,7 @@ import {
 import {localStorageSetItem} from 'react-devtools-shared/src/storage';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
 
 installHook(window);
 

packages/react-devtools-inline/src/backend.js

@@ -8,7 +8,7 @@ import {installHook} from 'react-devtools-shared/src/hook';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
-import type {Wall} from 'react-devtools-shared/src/types';
+import type {Wall} from 'react-devtools-shared/src/frontend/types';
 
 function startActivation(contentWindow: any, bridge: BackendBridge) {
  const onSavedPreferences = (data: $FlowFixMe) => {

packages/react-devtools-inline/src/frontend.js

@@ -13,7 +13,7 @@ import {
  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 
-import type {Wall} from 'react-devtools-shared/src/types';
+import type {Wall} from 'react-devtools-shared/src/frontend/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 

packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

@@ -30,12 +30,7 @@ describe('InspectedElementContext', () => {
  ): Promise<Object> {
  const rendererID = ((store.getRendererIDForElement(id): any): number);
  const promise = backendAPI
- .inspectElement({
- bridge,
- id,
- path,
- rendererID,
- })
+ .inspectElement(bridge, false, id, path, rendererID)
  .then(data =>
  backendAPI.convertInspectedElementBackendToFrontend(data.value),
  );

packages/react-devtools-shared/src/__tests__/ownersListContext-test.js

@@ -8,7 +8,7 @@
  */
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 

packages/react-devtools-shared/src/__tests__/profilerStore-test.js

@@ -187,7 +187,7 @@ describe('ProfilerStore', () => {
  utils.act(() => {
  const {
  ElementTypeHostComponent,
- } = require('react-devtools-shared/src/types');
+ } = require('react-devtools-shared/src/frontend/types');
  store.componentFilters = [
  utils.createElementTypeFilter(ElementTypeHostComponent),
  ];

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -36,7 +36,7 @@ describe('Store component filters', () => {
  store.recordChangeDescriptions = true;
 
  React = require('react');
- Types = require('react-devtools-shared/src/types');
+ Types = require('react-devtools-shared/src/frontend/types');
  utils = require('./utils');
 
  legacyRender = utils.legacyRender;

packages/react-devtools-shared/src/__tests__/utils.js

@@ -12,7 +12,7 @@ import typeof ReactTestRenderer from 'react-test-renderer';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 import type {ProfilingDataFrontend} from 'react-devtools-shared/src/devtools/views/Profiler/types';
-import type {ElementType} from 'react-devtools-shared/src/types';
+import type {ElementType} from 'react-devtools-shared/src/frontend/types';
 
 export function act(
  callback: Function,
@@ -86,7 +86,7 @@ export function createDisplayNameFilter(
  source: string,
  isEnabled: boolean = true,
 ) {
- const Types = require('react-devtools-shared/src/types');
+ const Types = require('react-devtools-shared/src/frontend/types');
  let isValid = true;
  try {
  new RegExp(source); // eslint-disable-line no-new
@@ -102,7 +102,7 @@ export function createDisplayNameFilter(
 }
 
 export function createHOCFilter(isEnabled: boolean = true) {
- const Types = require('react-devtools-shared/src/types');
+ const Types = require('react-devtools-shared/src/frontend/types');
  return {
  type: Types.ComponentFilterHOC,
  isEnabled,
@@ -114,7 +114,7 @@ export function createElementTypeFilter(
  elementType: ElementType,
  isEnabled: boolean = true,
 ) {
- const Types = require('react-devtools-shared/src/types');
+ const Types = require('react-devtools-shared/src/frontend/types');
  return {
  type: Types.ComponentFilterElementType,
  isEnabled,
@@ -126,7 +126,7 @@ export function createLocationFilter(
  source: string,
  isEnabled: boolean = true,
 ) {
- const Types = require('react-devtools-shared/src/types');
+ const Types = require('react-devtools-shared/src/frontend/types');
  let isValid = true;
  try {
  new RegExp(source); // eslint-disable-line no-new

packages/react-devtools-shared/src/backend/StyleX/utils.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {StyleXPlugin} from 'react-devtools-shared/src/types';
+import type {StyleXPlugin} from 'react-devtools-shared/src/frontend/types';
 import isArray from 'react-devtools-shared/src/isArray';
 
 const cachedStyleNameToValueMap: Map<string, string> = new Map();

packages/react-devtools-shared/src/backend/agent.js

@@ -42,7 +42,7 @@ import type {
 import type {
  ComponentFilter,
  BrowserTheme,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 import {isSynchronousXHRSupported} from './utils';
 
 const debug = (methodName: string, ...args: Array<string>) => {

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -13,7 +13,7 @@ import {
  ElementTypeRoot,
  ElementTypeHostComponent,
  ElementTypeOtherOrUnknown,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
 import {
  cleanForBridge,
@@ -50,7 +50,7 @@ import type {
 import type {
  ComponentFilter,
  ElementType,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 import type {InspectedElement, SerializedElement} from '../types';
 
 export type InternalInstance = Object;

packages/react-devtools-shared/src/backend/renderer.js

@@ -25,7 +25,7 @@ import {
  ElementTypeSuspenseList,
  ElementTypeTracingMarker,
  StrictMode,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 import {
  deletePathInObject,
  getDisplayName,
@@ -121,7 +121,7 @@ import type {
  ComponentFilter,
  ElementType,
  Plugins,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => symbol | number;

packages/react-devtools-shared/src/backend/types.js

@@ -21,14 +21,14 @@ import type {
  ComponentFilter,
  ElementType,
  Plugins,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 import type {
  ResolveNativeStyle,
  SetupNativeStyleEditor,
 } from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 import type {InitBackend} from 'react-devtools-shared/src/backend';
 import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
-import type {BrowserTheme} from 'react-devtools-shared/src/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type Agent from './agent';
 

packages/react-devtools-shared/src/backend/utils.js

@@ -12,7 +12,7 @@ import {compareVersions} from 'compare-versions';
 import {dehydrate} from '../hydration';
 import isArray from 'shared/isArray';
 
-import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {DehydratedData} from 'react-devtools-shared/src/frontend/types';
 
 // TODO: update this to the first React version that has a corresponding DevTools backend
 const FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER = '999.9.9';

packages/react-devtools-shared/src/backendAPI.js

@@ -24,7 +24,8 @@ import type {
 import type {
  DehydratedData,
  InspectedElement as InspectedElementFrontend,
-} from 'react-devtools-shared/src/devtools/views/Components/types';
+} from 'react-devtools-shared/src/frontend/types';
+import type {InspectedElementPath} from 'react-devtools-shared/src/frontend/types';
 
 export function clearErrorsAndWarnings({
  bridge,
@@ -86,25 +87,21 @@ export function copyInspectedElementPath({
  });
 }
 
-export function inspectElement({
- bridge,
- forceFullData,
- id,
- path,
- rendererID,
-}: {
+export function inspectElement(
  bridge: FrontendBridge,
  forceFullData: boolean,
  id: number,
- path: Array<string | number> | null,
+ path: InspectedElementPath | null,
  rendererID: number,
-}): Promise<InspectedElementPayload> {
+ shouldListenToPauseEvents: boolean = false,
+): Promise<InspectedElementPayload> {
  const requestID = requestCounter++;
  const promise = getPromiseForRequestID<InspectedElementPayload>(
  requestID,
  'inspectedElement',
  bridge,
  `Timed out while inspecting element ${id}.`,
+ shouldListenToPauseEvents,
  );
 
  bridge.send('inspectElement', {
@@ -148,16 +145,29 @@ function getPromiseForRequestID<T>(
  eventType: $Keys<BackendEvents>,
  bridge: FrontendBridge,
  timeoutMessage: string,
+ shouldListenToPauseEvents: boolean = false,
 ): Promise<T> {
  return new Promise((resolve, reject) => {
  const cleanup = () => {
  bridge.removeListener(eventType, onInspectedElement);
- bridge.removeListener('shutdown', onDisconnect);
- bridge.removeListener('pauseElementPolling', onDisconnect);
+ bridge.removeListener('shutdown', onShutdown);
+
+ if (shouldListenToPauseEvents) {
+ bridge.removeListener('pauseElementPolling', onDisconnect);
+ }
 
  clearTimeout(timeoutID);
  };
 
+ const onShutdown = () => {
+ cleanup();
+ reject(
+ new Error(
+ 'Failed to inspect element. Try again or restart React DevTools.',
+ ),
+ );
+ };
+
  const onDisconnect = () => {
  cleanup();
  reject(new ElementPollingCancellationError());
@@ -176,8 +186,11 @@ function getPromiseForRequestID<T>(
  };
 
  bridge.addListener(eventType, onInspectedElement);
- bridge.addListener('shutdown', onDisconnect);
- bridge.addListener('pauseElementPolling', onDisconnect);
+ bridge.addListener('shutdown', onShutdown);
+
+ if (shouldListenToPauseEvents) {
+ bridge.addListener('pauseElementPolling', onDisconnect);
+ }
 
  const timeoutID = setTimeout(onTimeout, TIMEOUT_DELAY);
  });
@@ -277,7 +290,7 @@ export function convertInspectedElementBackendToFrontend(
 
 export function hydrateHelper(
  dehydratedData: DehydratedData | null,
- path?: Array<string | number>,
+ path: ?InspectedElementPath,
 ): Object | null {
  if (dehydratedData !== null) {
  const {cleaned, data, unserializable} = dehydratedData;

packages/react-devtools-shared/src/bridge.js

@@ -9,7 +9,7 @@
 
 import EventEmitter from './events';
 
-import type {ComponentFilter, Wall} from './types';
+import type {ComponentFilter, Wall} from './frontend/types';
 import type {
  InspectedElementPayload,
  OwnersList,

packages/react-devtools-shared/src/devtools/store.js

@@ -21,7 +21,7 @@ import {
  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import {ElementTypeRoot} from '../types';
+import {ElementTypeRoot} from '../frontend/types';
 import {
  getSavedComponentFilters,
  setSavedComponentFilters,
@@ -37,10 +37,13 @@ import {
  BRIDGE_PROTOCOL,
  currentBridgeProtocol,
 } from 'react-devtools-shared/src/bridge';
-import {StrictMode} from 'react-devtools-shared/src/types';
+import {StrictMode} from 'react-devtools-shared/src/frontend/types';
 
-import type {Element} from './views/Components/types';
-import type {ComponentFilter, ElementType} from '../types';
+import type {
+ Element,
+ ComponentFilter,
+ ElementType,
+} from 'react-devtools-shared/src/frontend/types';
 import type {
  FrontendBridge,
  BridgeProtocol,

packages/react-devtools-shared/src/devtools/utils.js

@@ -9,7 +9,7 @@
 
 import JSON5 from 'json5';
 
-import type {Element} from './views/Components/types';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
 import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 

packages/react-devtools-shared/src/devtools/views/Components/Badge.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 import {Fragment} from 'react';
 import styles from './Badge.css';
 
-import type {ElementType} from 'react-devtools-shared/src/types';
+import type {ElementType} from 'react-devtools-shared/src/frontend/types';
 
 type Props = {
  className?: string,

packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js

@@ -13,7 +13,7 @@ import {StoreContext} from '../context';
 import {
  ComponentFilterElementType,
  ElementTypeSuspense,
-} from 'react-devtools-shared/src/types';
+} from 'react-devtools-shared/src/frontend/types';
 
 export default function CannotSuspendWarningMessage(): React.Node {
  const store = useContext(StoreContext);

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -20,7 +20,7 @@ import {useSubscription} from '../hooks';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {ItemData} from './Tree';
-import type {Element as ElementType} from './types';
+import type {Element as ElementType} from 'react-devtools-shared/src/frontend/types';
 
 import styles from './Element.css';
 import Icon from '../Icon';

packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js

@@ -10,7 +10,7 @@
 import * as React from 'react';
 import styles from './HocBadges.css';
 
-import type {Element} from './types';
+import type {Element} from 'react-devtools-shared/src/frontend/types';
 
 type Props = {
  element: Element,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -17,7 +17,7 @@ import Icon from '../Icon';
 import {ModalDialogContext} from '../ModalDialog';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import Toggle from '../Toggle';
-import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
+import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
 import CannotSuspendWarningMessage from './CannotSuspendWarningMessage';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
@@ -26,7 +26,7 @@ import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
 
 import styles from './InspectedElement.css';
 
-import type {InspectedElement} from './types';
+import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
 
 export type Props = {};