toolbar

Summary: When there wasn't enough space for the text toolbar, the text was wrapped into multiple lines. Now it's truncated.

Reviewed By: jknoxville

Differential Revision: D14209813

fbshipit-source-id: 1971cd791daf345639993ed0632d718374a5f91b

src/plugins/layout/layout2/InspectorSidebar.js

@@ -18,6 +18,7 @@ import {
   FlexCenter,
   styled,
   colors,
+  SidebarExtensions,
 } from 'flipper';
 import {Component} from 'react';
 
@@ -92,7 +93,6 @@ type Props = {|
   client: PluginClient,
   realClient: Client,
   logger: Logger,
-  extensions?: Array<Function>,
 |};
 
 type State = {|
@@ -124,14 +124,14 @@ export default class Sidebar extends Component<Props, State> {
   }
 
   render() {
-    const {element, extensions} = this.props;
+    const {element} = this.props;
     if (!element || !element.data) {
       return <NoData grow>No data</NoData>;
     }
 
     const sections: Array<any> =
-      (extensions &&
-        extensions.map(ext =>
+      (SidebarExtensions &&
+        SidebarExtensions.map(ext =>
           ext(
             this.props.client,
             this.props.realClient,

src/plugins/layout/layout2/index.js

@@ -16,7 +16,7 @@ import {
   Link,
   Glyph,
   DetailSidebar,
-  SidebarExtensions,
+  styled,
 } from 'flipper';
 import Inspector from './Inspector';
 import ToolbarIcon from './ToolbarIcon';
@@ -42,6 +42,14 @@ export type PersistedState = {|
   AXelements: ElementMap,
 |};
 
+const BetaBar = styled(Toolbar)({
+  display: 'block',
+  overflow: 'hidden',
+  lineHeight: '15px',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
 export default class Layout extends FlipperPlugin<State, void, PersistedState> {
   static defaultPersistedState = {
     rootElement: null,
@@ -205,20 +213,19 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
                 element={element}
                 onValueChanged={this.onDataValueChanged}
                 logger={this.props.logger}
-                extensions={SidebarExtensions}
               />
             </DetailSidebar>
           </>
         )}
         {/* TODO: Remove this when rolling out publicly */}
-        <Toolbar position="bottom" compact>
+        <BetaBar position="bottom" compact>
           <Glyph name="beta" color="#8157C7" />&nbsp;
           <strong>Version 2.0:</strong>&nbsp; Provide feedback about this plugin
           in our&nbsp;
           <Link href="https://fb.workplace.com/groups/246035322947653/">
             feedback group
           </Link>.
-        </Toolbar>
+        </BetaBar>
       </FlexColumn>
     );
   }