STASHING

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

@@ -145,19 +145,21 @@ export function connectToDevTools(options: ?ConnectOptions) {
       bridge.send('overrideComponentFilters', savedComponentFilters);
     }
 
+    // TODO (npm-packages) Warn if "isBackendStorageAPISupported"
     const agent = new Agent(bridge);
     agent.addListener('shutdown', () => {
       // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
       // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
       hook.emit('shutdown');
     });
 
+    initBackend(hook, agent, window);
+
     // Setup React Native style editor if the environment supports it.
+console.log('[backend] resolveNativeStyle?', !!resolveNativeStyle)
     if (resolveNativeStyle !== null) {
       setupNativeStyleEditor(bridge, agent, resolveNativeStyle);
     }
-
-    initBackend(hook, agent, window);
   };
 
   function handleClose() {

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

@@ -14,7 +14,7 @@ const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
-  mode: __DEV__ ? 'development' : 'production',
+  mode: 'development', // TODO TESTING __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
     backend: './src/backend.js',

src/backend/NativeStyleEditor/setupNativeStyleEditor.js

@@ -21,7 +21,7 @@ export default function setupNativeStyleEditor(
     'NativeStyleEditor_GetStyle',
     ({ id, rendererID }: {| id: number, rendererID: RendererID |}) => {
       const data = agent.getInstanceAndStyle({ id, rendererID });
-      if (!data || data.style) {
+      if (!data || data.style === null) {
         return null;
       }
       bridge.emit('NativeStyleEditor_Style', {
@@ -80,6 +80,9 @@ export default function setupNativeStyleEditor(
       );
     }
   );
+
+console.log('[setupNativeStyleEditor] sending isNativeStyleEditorSupported:true')
+  bridge.send('isNativeStyleEditorSupported', true);
 }
 
 const EMPTY_BOX_STYLE = {
@@ -100,7 +103,7 @@ function measureStyle(
 ) {
   const data = agent.getInstanceAndStyle({ id, rendererID });
   if (!data || !data.style) {
-    bridge.send('rn-style:measure', {});
+    bridge.send('NativeStyleEditor_Measure', {});
     return;
   }
 
@@ -115,7 +118,7 @@ function measureStyle(
   }
 
   if (!instance || typeof instance.measure !== 'function') {
-    bridge.send('rn-style:measure', { style: resolvedStyle });
+    bridge.send('NativeStyleEditor_Measure', { style: resolvedStyle });
     return;
   }
 
@@ -124,13 +127,13 @@ function measureStyle(
     // RN Android sometimes returns undefined here. Don't send measurements in this case.
     // https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-304611817
     if (typeof x !== 'number') {
-      bridge.send('rn-style:measure', { style: resolvedStyle });
+      bridge.send('NativeStyleEditor_Measure', { style: resolvedStyle });
       return;
     }
     const margin = resolveBoxStyle('margin', resolvedStyle) || EMPTY_BOX_STYLE;
     const padding =
       resolveBoxStyle('padding', resolvedStyle) || EMPTY_BOX_STYLE;
-    bridge.send('rn-style:measure', {
+    bridge.send('NativeStyleEditor_Measure', {
       style: resolvedStyle,
       measuredLayout: {
         x,

src/bridge.js

@@ -106,6 +106,7 @@ export default class Bridge extends EventEmitter<{|
   viewElementSource: [ElementAndRendererID],
 
   // React Native style editor plug-in.
+  isNativeStyleEditorSupported: [true],
   NativeStyleEditor_GetStyle: [ElementAndRendererID],
   NativeStyleEditor_Measure: [ElementAndRendererID],
   NativeStyleEditor_RenameAttribute: [NativeStyleEditor_RenameAttributeParams],

src/devtools/store.js

@@ -67,6 +67,7 @@ export default class Store extends EventEmitter<{|
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
+  supportsNativeStyleEditor: [],
   supportsProfiling: [],
   supportsReloadAndProfile: [],
 |}> {
@@ -87,6 +88,9 @@ export default class Store extends EventEmitter<{|
   // The InspectedElementContext also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
+  // Should the React Native style editor panel be shown?
+  _isNativeStyleEditorSupported: boolean = false;
+
   // Can the backend use the Storage API (e.g. localStorage)?
   // If not, features like reload-and-profile will not work correctly and must be disabled.
   _isBackendStorageAPISupported: boolean = false;
@@ -176,6 +180,10 @@ export default class Store extends EventEmitter<{|
       'isBackendStorageAPISupported',
       this.onBridgeStorageSupported
     );
+    bridge.addListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported
+    );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
   }
@@ -333,6 +341,10 @@ export default class Store extends EventEmitter<{|
     return this._supportsNativeInspection;
   }
 
+  get supportsNativeStyleEditor(): boolean {
+    return this._isNativeStyleEditorSupported;
+  }
+
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
@@ -678,6 +690,13 @@ export default class Store extends EventEmitter<{|
     }
   };
 
+  onBridgeNativeStyleEditorSupported = (isNativeStyleEditorSupported: boolean) => {
+console.log('[bridge] onBridgeNativeStyleEditorSupported()', isNativeStyleEditorSupported)
+    this._isNativeStyleEditorSupported = isNativeStyleEditorSupported;
+
+    this.emit('supportsNativeStyleEditor');
+  };
+
   onBridgeOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');

src/devtools/views/Components/NativeStyleEditor/NativeStyleEditor.js

@@ -0,0 +1,35 @@
+// @flow
+
+import React, { useContext, useMemo } from 'react';
+import { StoreContext } from '../../context';
+import { useSubscription } from '../../hooks';
+import styles from './NativeStyleEditor.css';
+
+import type { ElementType } from 'src/types';
+
+type Props = {|
+|};
+
+export default function NativeStyleEditor({  }: Props) {
+  const store = useContext(StoreContext);
+
+  const subscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.isNativeStyleEditorSupported,
+      subscribe: (callback: Function) => {
+        store.addListener('isNativeStyleEditorSupported', callback);
+        return () => {
+          store.removeListener('isNativeStyleEditorSupported', callback);
+        };
+      },
+    }),
+    [store]
+  );
+  const isNativeStyleEditorSupported = useSubscription<boolean, Store>(subscription);
+
+  if (!store.isNativeStyleEditorSupported) {
+    return null;
+  }
+
+  return <p>NativeStyleEditor</p>;
+}

src/devtools/views/Components/SelectedElement.js

@@ -12,6 +12,7 @@ import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
+import NativeStyleEditor from './NativeStyleEditor/NativeStyleEditor';
 import Toggle from '../Toggle';
 import Badge from './Badge';
 import {
@@ -350,6 +351,8 @@ function InspectedElementView({
         />
       )}
 
+      <NativeStyleEditor />
+
       {ownerID === null && owners !== null && owners.length > 0 && (
         <div className={styles.Owners}>
           <div className={styles.OwnersHeader}>rendered by</div>