From 53f3f2d40fb0438d290307bcecf67e0079b6bd70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Mon, 18 Feb 2019 04:53:54 -0800
Subject: [PATCH] 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 | 15 ++++++++++++++
 src/plugins/layout/layout2/index.js     | 27 +++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/src/plugins/layout/layout2/Inspector.js b/src/plugins/layout/layout2/Inspector.js
index 28e2c3967..440d6795b 100644
--- a/src/plugins/layout/layout2/Inspector.js
+++ b/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);
diff --git a/src/plugins/layout/layout2/index.js b/src/plugins/layout/layout2/index.js
index 93329228d..34c0244d1 100644
--- a/src/plugins/layout/layout2/index.js
+++ b/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}