Make FilterNavigatorBar scrollable

Author: arai-a

src/components/app/Details.tsx

@@ -47,9 +47,25 @@ type DispatchProps = {
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
 
+type State = {
+  // The scroll position of the FilterNavigatorBar, shared among
+  // the call tree, the frame graph, and the stack chart.
+  readonly filterScrollPos: number;
+};
+
 const SMALL_SCREEN_WIDTH = 768;
 
-class ProfileViewerImpl extends PureComponent<Props> {
+class ProfileViewerImpl extends PureComponent<Props, State> {
+  override state = {
+    filterScrollPos: 0,
+  };
+
+  _setFilterScrollPos = (pos: number) => {
+    this.setState({
+      filterScrollPos: pos,
+    });
+  };
+
   _onSelectTab = (selectedTab: string) => {
     const { changeSelectedTab } = this.props;
     const tabSlug = toValidTabSlug(selectedTab);
@@ -75,6 +91,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
 
   override render() {
     const { visibleTabs, selectedTab, isSidebarOpen } = this.props;
+    const { filterScrollPos } = this.state;
     const hasSidebar = selectSidebar(selectedTab) !== null;
     return (
       <div className="Details">
@@ -121,9 +138,24 @@ class ProfileViewerImpl extends PureComponent<Props> {
           >
             {
               {
-                calltree: <ProfileCallTreeView />,
-                'flame-graph': <FlameGraph />,
-                'stack-chart': <StackChart />,
+                calltree: (
+                  <ProfileCallTreeView
+                    filterScrollPos={filterScrollPos}
+                    setFilterScrollPos={this._setFilterScrollPos}
+                  />
+                ),
+                'flame-graph': (
+                  <FlameGraph
+                    filterScrollPos={filterScrollPos}
+                    setFilterScrollPos={this._setFilterScrollPos}
+                  />
+                ),
+                'stack-chart': (
+                  <StackChart
+                    filterScrollPos={filterScrollPos}
+                    setFilterScrollPos={this._setFilterScrollPos}
+                  />
+                ),
                 'marker-chart': <MarkerChart />,
                 'marker-table': <MarkerTable />,
                 'network-chart': <NetworkChart />,

src/components/app/ProfileViewer.css

@@ -115,7 +115,7 @@
   background: var(--grey-10);
 }
 
-.profileViewerSpacer {
+.profileViewerTopBar .filterNavigatorBarScrollContainer {
   flex: 1;
 }
 

src/components/app/ProfileViewer.tsx

@@ -114,13 +114,10 @@ class ProfileViewerImpl extends PureComponent<Props> {
               />
             ) : null}
             <ProfileName />
-            <ProfileFilterNavigator />
             {
-              // Define a spacer in the middle that will shrink based on the availability
-              // of space in the top bar. It will shrink away before any of the items
-              // with actual content in them do.
+              // TODO: Update the sroll position when other elements are updated.
             }
-            <div className="profileViewerSpacer" />
+            <ProfileFilterNavigator />
             <MenuButtons />
             {isUploading ? (
               <div

src/components/calltree/ProfileCallTreeView.tsx

@@ -6,15 +6,23 @@ import { CallTree } from './CallTree';
 import { StackSettings } from 'firefox-profiler/components/shared/StackSettings';
 import { TransformNavigator } from 'firefox-profiler/components/shared/TransformNavigator';
 
-export const ProfileCallTreeView = () => (
+type Props = {
+  readonly filterScrollPos?: number;
+  readonly setFilterScrollPos?: (pos: number) => void;
+};
+
+export const ProfileCallTreeView = (props: Props) => (
   <div
     className="treeAndSidebarWrapper"
     id="calltree-tab"
     role="tabpanel"
     aria-labelledby="calltree-tab-button"
   >
     <StackSettings />
-    <TransformNavigator />
+    <TransformNavigator
+      filterScrollPos={props.filterScrollPos}
+      setFilterScrollPos={props.setFilterScrollPos}
+    />
     <CallTree />
   </div>
 );

src/components/flame-graph/index.tsx

@@ -6,15 +6,23 @@ import { StackSettings } from '../shared/StackSettings';
 import { TransformNavigator } from '../shared/TransformNavigator';
 import { MaybeFlameGraph } from './MaybeFlameGraph';
 
-const FlameGraphView = () => (
+type Props = {
+  readonly filterScrollPos?: number;
+  readonly setFilterScrollPos?: (pos: number) => void;
+};
+
+const FlameGraphView = (props: Props) => (
   <div
     className="flameGraph"
     id="flame-graph-tab"
     role="tabpanel"
     aria-labelledby="flame-graph-tab-button"
   >
     <StackSettings hideInvertCallstack={true} />
-    <TransformNavigator />
+    <TransformNavigator
+      filterScrollPos={props.filterScrollPos}
+      setFilterScrollPos={props.setFilterScrollPos}
+    />
     <MaybeFlameGraph />
   </div>
 );

src/components/shared/FilterNavigatorBar.css

@@ -2,6 +2,63 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+.filterNavigatorBarScrollContainer {
+  position: relative;
+  height: 24px;
+}
+
+.filterNavigatorBarScrollParent {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 24px;
+  flex: 1;
+}
+
+.filterNavigatorBarScrollContent {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  padding: 0 24px;
+}
+
+.filterNavigatorBarScrollButtonLeft,
+.filterNavigatorBarScrollButtonRight {
+  position: absolute;
+  z-index: 2;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border: 1px solid var(--grey-30);
+  background: var(--grey-10);
+  color: var(--grey-80);
+}
+
+.filterNavigatorBarScrollButtonLeft {
+  top: 0px;
+  left: 0px;
+}
+
+.filterNavigatorBarScrollButtonRight {
+  top: 0px;
+  right: 0px;
+}
+
+.filterNavigatorBarScrollButtonLeft.disabled,
+.filterNavigatorBarScrollButtonRight.disabled {
+  color: var(--grey-40);
+}
+
+.filterNavigatorBarScrollButtonLeft:not(.disabled):hover,
+.filterNavigatorBarScrollButtonRight:not(.disabled):hover {
+  background: var(--grey-20);
+}
+
+.filterNavigatorBarScrollButtonLeft:not(.disabled):active,
+.filterNavigatorBarScrollButtonRight:not(.disabled):active {
+  background: var(--grey-30);
+}
+
 .filterNavigatorBar {
   --internal-background-color: transparent;
   --internal-hover-background-color: rgb(0 0 0 / 0.1);