Display class name of view if available

Summary: This commit provides the navigation plugin with more value, showing the ViewController of the rendered view.This allows the user to quickly start working on that view controller once they have the name. This works on nearly all views in the iOS app.

Reviewed By: passy

Differential Revision: D17071558

fbshipit-source-id: 22a22d4a0991e9f20bc85eb106a98a42214d4d0c

src/plugins/navigation/components/NavigationInfoBox.js

@@ -13,6 +13,7 @@ import {IconButton, FavoriteButton} from './';
 type Props = {|
   isBookmarked: boolean,
   uri: ?string,
+  className: ?string,
   onNavigate: (query: string) => void,
   onFavorite: (query: string) => void,
 |};
@@ -53,17 +54,19 @@ const NavigationInfoBoxContainer = styled('div')({
 });
 
 export default (props: Props) => {
-  const {uri, isBookmarked} = props;
+  const {uri, isBookmarked, className} = props;
-  if (uri == null) {
+  if (uri == null && className == null) {
     return (
       <NavigationInfoBoxContainer>
         <div className="nav-info-text">View has no URI information</div>
       </NavigationInfoBoxContainer>
     );
   } else {
-    const parameters = parseURIParameters(uri);
+    const parameters = uri != null ? parseURIParameters(uri) : null;
     return (
       <NavigationInfoBoxContainer>
+        {uri != null ? (
+          <>
             <div className="icon-container">
               <FavoriteButton
                 highlighted={isBookmarked}
@@ -78,7 +81,7 @@ export default (props: Props) => {
             </div>
             <div className="nav-info-text bold">uri:</div>
             <div className="nav-info-text selectable">{uri}</div>
-        {parameters.size > 0 ? (
+            {parameters != null && parameters.size > 0 ? (
               <>
                 <div className="nav-info-text bold">parameters:</div>
                 {Array.from(parameters, ([key, value]) => (
@@ -89,6 +92,14 @@ export default (props: Props) => {
                 ))}
               </>
             ) : null}
+          </>
+        ) : null}
+        {className != null ? (
+          <>
+            <div className="nav-info-text bold">Class Name:</div>
+            <div className="nav-info-text selectable">{className}</div>
+          </>
+        ) : null}
       </NavigationInfoBoxContainer>
     );
   }

src/plugins/navigation/components/Timeline.js

@@ -56,7 +56,7 @@ export default (props: Props) => {
       {events.map((event: NavigationEvent, idx) => {
         return (
           <NavigationEventContainer>
-            {event.uri != null ? (
+            {event.uri != null || event.className != null ? (
               <ScreenshotContainer>
                 {event.screenshot != null ? (
                   <img src={event.screenshot} />
@@ -72,6 +72,7 @@ export default (props: Props) => {
               isBookmarked={
                 event.uri != null ? bookmarks.has(event.uri) : false
               }
+              className={event.className}
               uri={event.uri}
               onNavigate={onNavigate}
               onFavorite={onFavorite}

src/plugins/navigation/flow-types.js

@@ -27,6 +27,7 @@ export type PersistedState = {|
 export type NavigationEvent = {|
   date: ?Date,
   uri: ?URI,
+  className: ?string,
   screenshot: ?string,
 |};
 

src/plugins/navigation/index.js

@@ -75,14 +75,17 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
       let {persistedState} = this.props;
       const {setPersistedState} = this.props;
       const navigationEvent: NavigationEvent = {
-        uri: payload.uri === undefined ? null : payload.uri,
+        uri: payload.uri === undefined ? null : decodeURIComponent(payload.uri),
         date: payload.date || new Date(),
+        className: payload.class === undefined ? null : payload.class,
         screenshot: null,
       };
       setPersistedState({
         ...persistedState,
         currentURI:
-          payload.uri == null ? persistedState.currentURI : payload.uri,
+          payload.uri == null
+            ? persistedState.currentURI
+            : decodeURIComponent(payload.uri),
         navigationEvents: [navigationEvent, ...persistedState.navigationEvents],
       });
       // Wait for view to render and then take a screenshot