Target mode

Summary: Adding a toggle to enable/disable target mode

Reviewed By: jknoxville

Differential Revision: D14100535

fbshipit-source-id: 9251f2d2f9d3013650421be62719ad5fb254e804

src/plugins/layout/layout2/Inspector.js

@@ -74,6 +74,13 @@ export default class Inspector extends Component<Props> {
         this.getNodes(nodes.map(n => n.id), {});
       },
     );
+
+    this.props.client.subscribe(
+      this.call().SELECT,
+      ({path}: {path: Array<ElementID>}) => {
+        this.getAndExpandPath(path);
+      },
+    );
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -173,6 +180,14 @@ export default class Inspector extends Component<Props> {
     }
   }
 
+  getAndExpandPath(path: Array<ElementID>) {
+    return Promise.all(path.map(id => this.getChildren(id, {}, true))).then(
+      () => {
+        this.onElementSelected(path[path.length - 1]);
+      },
+    );
+  }
+
   onElementSelected = debounce((selectedKey: ElementID) => {
     this.onElementHovered(selectedKey);
     this.props.onSelect(selectedKey);

src/plugins/layout/layout2/index.js

@@ -21,6 +21,7 @@ import ToolbarIcon from './ToolbarIcon';
 
 type State = {|
   init: boolean,
+  inTargetMode: boolean,
   inAXMode: boolean,
   selectedElement: ?ElementID,
   selectedAXElement: ?ElementID,
@@ -43,6 +44,7 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
 
   state = {
     init: false,
+    inTargetMode: false,
     inAXMode: false,
     selectedElement: null,
     selectedAXElement: null,
@@ -53,9 +55,28 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
   }
 
   init() {
+    // persist searchActive state when moving between plugins to prevent multiple
+    // TouchOverlayViews since we can't edit the view heirarchy in onDisconnect
+    this.client.call('isSearchActive').then(({isSearchActive}) => {
+      this.setState({inTargetMode: isSearchActive});
+    });
+
+    // disable target mode after
+    this.client.subscribe('select', () => {
+      if (this.state.inTargetMode) {
+        this.onToggleTargetMode();
+      }
+    });
+
     this.setState({init: true});
   }
 
+  onToggleTargetMode = () => {
+    const inTargetMode = !this.state.inTargetMode;
+    this.setState({inTargetMode});
+    this.client.send('setSearchActive', {active: inTargetMode});
+  };
+
   onToggleAXMode = () => {
     this.setState({inAXMode: !this.state.inAXMode});
   };
@@ -87,6 +108,12 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
         {this.state.init && (
           <>
             <Toolbar>
+              <ToolbarIcon
+                onClick={this.onToggleTargetMode}
+                title="Toggle target mode"
+                icon="target"
+                active={this.state.inTargetMode}
+              />
               {this.realClient.query.os === 'Android' && (
                 <ToolbarIcon
                   onClick={this.onToggleAXMode}