Dim owners that have been filtered from the tree in rendered-by list

bvaughn · May 9, 2019 · 17516b7 · 17516b7
1 parent 0722a5a
commit 17516b7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/devtools/store.js b/src/devtools/store.js
@@ -377,6 +377,10 @@ export default class Store extends EventEmitter {
     this.emit('isProfiling');
   }
 
+  containsElement(id: number): boolean {
+    return this._idToElement.get(id) != null;
+  }
+
   getElementAtIndex(index: number): Element | null {
     if (index < 0 || index >= this.numElements) {
       console.warn(

diff --git a/src/devtools/views/Components/SelectedElement.css b/src/devtools/views/Components/SelectedElement.css
@@ -87,3 +87,8 @@
 .CannotSuspendWarningMessage {
   font-size: var(--font-size-sans-large);
 }
+
+.NotInStore {
+  color: var(--color-dim);
+  cursor: default;
+}
diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js
@@ -306,6 +306,7 @@ function InspectedElementView({
               key={owner.id}
               displayName={owner.displayName}
               id={owner.id}
+              isInStore={store.containsElement(owner.id)}
             />
           ))}
         </div>
@@ -314,7 +315,9 @@ function InspectedElementView({
   );
 }
 
-function OwnerView({ displayName, id }: { displayName: string, id: number }) {
+type OwnerViewProps = {| displayName: string, id: number, isInStore: boolean |};
+
+function OwnerView({ displayName, id, isInStore }: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
 
   const handleClick = useCallback(
@@ -329,7 +332,8 @@ function OwnerView({ displayName, id }: { displayName: string, id: number }) {
   return (
     <button
       key={id}
-      className={styles.Owner}
+      className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
+      disabled={!isInStore}
       onClick={handleClick}
       title={displayName}
     >