Disable view-source button in standalone mode if no project roots are provided

Author: Brian Vaughn

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

@@ -85,7 +85,6 @@ function reload() {
     root.render(
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
-        isBrowserMode: false,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
@@ -172,7 +171,10 @@ function initialize(socket: WebSocket) {
     socket.close();
   });
 
-  store = new Store(bridge, { supportsNativeInspection: false });
+  store = new Store(bridge, {
+    supportsNativeInspection: false,
+    supportsViewSource: projectRoots.length > 0,
+  });
 
   log('Connected');
   reload();

src/devtools/store.js

@@ -49,6 +49,7 @@ type Config = {|
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
   supportsProfiling?: boolean,
+  supportsViewSource?: boolean,
 |};
 
 export type Capabilities = {|
@@ -124,6 +125,7 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = false;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
+  _supportsViewSource: boolean = true;
 
   // Total number of visible elements (within all roots).
   // Used for windowing purposes.
@@ -155,13 +157,15 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
+        supportsViewSource,
       } = config;
       if (supportsCaptureScreenshots) {
         this._supportsCaptureScreenshots = true;
         this._captureScreenshots =
           localStorageGetItem(LOCAL_STORAGE_CAPTURE_SCREENSHOTS_KEY) === 'true';
       }
       this._supportsNativeInspection = supportsNativeInspection !== false;
+      this._supportsViewSource = supportsViewSource !== false;
       if (supportsProfiling) {
         this._supportsProfiling = true;
       }
@@ -361,6 +365,10 @@ export default class Store extends EventEmitter<{|
     return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
   }
 
+  get supportsViewSource(): boolean {
+    return this._supportsViewSource;
+  }
+
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }

src/devtools/views/Components/Components.js

@@ -13,7 +13,7 @@ import { SettingsModalContextController } from 'src/devtools/views/Settings/Sett
 
 import styles from './Components.css';
 
-function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
+function Components(_: {||}) {
   // TODO Flex wrappers below should be user resizable.
   return (
     <SettingsModalContextController>
@@ -26,7 +26,7 @@ function Components({ isBrowserMode }: {| isBrowserMode?: boolean |}) {
             <div className={styles.SelectedElementWrapper}>
               <NativeStyleContextController>
                 <Suspense fallback={<Loading />}>
-                  <SelectedElement isBrowserMode={isBrowserMode} />
+                  <SelectedElement />
                 </Suspense>
               </NativeStyleContextController>
             </div>

src/devtools/views/Components/SelectedElement.js

@@ -30,11 +30,9 @@ import type { GetInspectedElementPath } from './InspectedElementContext';
 import type { Element, InspectedElement } from './types';
 import type { ElementType } from 'src/types';
 
-export type Props = {|
-  isBrowserMode?: boolean,
-|};
+export type Props = {||};
 
-export default function SelectedElement({ isBrowserMode }: Props) {
+export default function SelectedElement(_: Props) {
   const { inspectedElementID } = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const { isFileLocationRequired, viewElementSourceFunction } = useContext(
@@ -188,7 +186,7 @@ export default function SelectedElement({ isBrowserMode }: Props) {
             <ButtonIcon type="suspend" />
           </Toggle>
         )}
-        {isBrowserMode && (
+        {store.supportsNativeInspection && (
           <Button
             className={styles.IconButton}
             onClick={highlightElement}
@@ -204,14 +202,16 @@ export default function SelectedElement({ isBrowserMode }: Props) {
         >
           <ButtonIcon type="log-data" />
         </Button>
-        <Button
-          className={styles.IconButton}
-          disabled={!canViewSource}
-          onClick={viewSource}
-          title="View source for this element"
-        >
-          <ButtonIcon type="view-source" />
-        </Button>
+        {store.supportsViewSource && (
+          <Button
+            className={styles.IconButton}
+            disabled={!canViewSource}
+            onClick={viewSource}
+            title="View source for this element"
+          >
+            <ButtonIcon type="view-source" />
+          </Button>
+        )}
       </div>
 
       {inspectedElement === null && (

src/devtools/views/DevTools.js

@@ -37,7 +37,6 @@ export type Props = {|
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   defaultTab?: TabID,
-  isBrowserMode?: boolean,
   showTabBar?: boolean,
   store: Store,
   warnIfLegacyBackendDetected?: boolean,
@@ -78,7 +77,6 @@ export default function DevTools({
   browserTheme = 'light',
   defaultTab = 'components',
   componentsPortalContainer,
-  isBrowserMode = true,
   overrideTab,
   profilerPortalContainer,
   settingsPortalContainer,
@@ -135,10 +133,7 @@ export default function DevTools({
                       className={styles.TabContent}
                       hidden={tab !== 'components'}
                     >
-                      <Components
-                        isBrowserMode={isBrowserMode}
-                        portalContainer={componentsPortalContainer}
-                      />
+                      <Components portalContainer={componentsPortalContainer} />
                     </div>
                     <div
                       className={styles.TabContent}