Initial commit 🎉

fbshipit-source-id: b6fc29740c6875d2e78953b8a7123890a67930f2
Co-authored-by: Sebastian McKenzie <sebmck@fb.com>
Co-authored-by: John Knox <jknox@fb.com>
Co-authored-by: Emil Sjölander <emilsj@fb.com>
Co-authored-by: Pritesh Nandgaonkar <prit91@fb.com>

src/chrome/SonarTitleBar.js

@@ -0,0 +1,157 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {
+  colors,
+  Button,
+  ButtonGroup,
+  FlexRow,
+  FlexBox,
+  Component,
+  Spacer,
+  Glyph,
+  GK,
+} from 'sonar';
+import {
+  loadsDynamicPlugins,
+  dynamicPluginPath,
+} from '../utils/dynamicPluginLoading.js';
+import {connect} from 'react-redux';
+import {
+  toggleBugDialogVisible,
+  toggleLeftSidebarVisible,
+  toggleRightSidebarVisible,
+  togglePluginManagerVisible,
+} from '../reducers/application.js';
+import DevicesButton from './DevicesButton.js';
+import Version from './Version.js';
+import AutoUpdateVersion from './AutoUpdateVersion.js';
+import config from '../fb-stubs/config.js';
+
+const TitleBar = FlexRow.extends(
+  {
+    background: props =>
+      props.focused
+        ? `linear-gradient(to bottom, ${
+            colors.macOSTitleBarBackgroundTop
+          } 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
+        : colors.macOSTitleBarBackgroundBlur,
+    borderBottom: props =>
+      `1px solid ${
+        props.focused
+          ? colors.macOSTitleBarBorder
+          : colors.macOSTitleBarBorderBlur
+      }`,
+    height: 38,
+    flexShrink: 0,
+    width: '100%',
+    alignItems: 'center',
+    paddingLeft: 80,
+    paddingRight: 10,
+    justifyContent: 'space-between',
+    // $FlowFixMe
+    WebkitAppRegion: 'drag',
+  },
+  {
+    ignoreAttributes: ['focused'],
+  },
+);
+
+const Icon = FlexBox.extends({
+  marginRight: 3,
+});
+
+type Props = {|
+  windowIsFocused: boolean,
+  leftSidebarVisible: boolean,
+  rightSidebarVisible: boolean,
+  rightSidebarAvailable: boolean,
+  pluginManagerVisible: boolean,
+  toggleBugDialogVisible: (visible?: boolean) => void,
+  toggleLeftSidebarVisible: (visible?: boolean) => void,
+  toggleRightSidebarVisible: (visible?: boolean) => void,
+  togglePluginManagerVisible: (visible?: boolean) => void,
+|};
+
+class SonarTitleBar extends Component<Props> {
+  render() {
+    return (
+      <TitleBar focused={this.props.windowIsFocused} className="toolbar">
+        <DevicesButton />
+        <Spacer />
+        {loadsDynamicPlugins() && (
+          <Icon
+            title={`Plugins are loaded dynamically from ${dynamicPluginPath() ||
+              ''}`}>
+            <Glyph color={colors.light30} name="flash-default" size={16} />
+          </Icon>
+        )}
+        {process.platform === 'darwin' ? <AutoUpdateVersion /> : <Version />}
+        {config.bugReportButtonVisible && (
+          <Button
+            compact={true}
+            onClick={() => this.props.toggleBugDialogVisible()}
+            title="Report Bug"
+            icon="bug"
+          />
+        )}
+        {GK.get('sonar_dynamic_plugins') && (
+          <Button
+            compact={true}
+            onClick={() => this.props.toggleBugDialogVisible()}
+            selected={this.props.pluginManagerVisible}
+            title="Plugin Manager"
+            icon="apps"
+          />
+        )}
+        <ButtonGroup>
+          <Button
+            compact={true}
+            selected={this.props.leftSidebarVisible}
+            onClick={() => this.props.toggleLeftSidebarVisible()}
+            icon="icons/sidebar_left.svg"
+            iconSize={20}
+            title="Toggle Plugins"
+          />
+          <Button
+            compact={true}
+            selected={this.props.rightSidebarVisible}
+            onClick={() => this.props.toggleRightSidebarVisible()}
+            icon="icons/sidebar_right.svg"
+            iconSize={20}
+            title="Toggle Details"
+            disabled={!this.props.rightSidebarAvailable}
+          />
+        </ButtonGroup>
+      </TitleBar>
+    );
+  }
+}
+
+export default connect(
+  ({
+    application: {
+      windowIsFocused,
+      leftSidebarVisible,
+      rightSidebarVisible,
+      rightSidebarAvailable,
+      pluginManagerVisible,
+    },
+  }) => ({
+    windowIsFocused,
+    leftSidebarVisible,
+    rightSidebarVisible,
+    rightSidebarAvailable,
+    pluginManagerVisible,
+  }),
+  {
+    toggleBugDialogVisible,
+    toggleLeftSidebarVisible,
+    toggleRightSidebarVisible,
+    togglePluginManagerVisible,
+  },
+)(SonarTitleBar);