Make the uncommitted selection range directly editable as text

Author: arai-a

src/components/app/ProfileFilterNavigator.tsx

@@ -9,13 +9,19 @@ import { showMenu } from '@firefox-devtools/react-contextmenu';
 import classNames from 'classnames';
 
 import explicitConnect from 'firefox-profiler/utils/connect';
-import { popCommittedRanges } from 'firefox-profiler/actions/profile-view';
+import {
+  popCommittedRanges,
+  updatePreviewSelection,
+  commitRange,
+} from 'firefox-profiler/actions/profile-view';
 import {
   getPreviewSelection,
   getProfileFilterPageDataByTabID,
   getProfileRootRange,
   getProfileTimelineUnit,
+  getCommittedRange,
   getCommittedRangeLabels,
+  getZeroAt,
 } from 'firefox-profiler/selectors/profile';
 import { getTabFilter } from 'firefox-profiler/selectors/url-state';
 import { getFormattedTimelineValue } from 'firefox-profiler/profile-logic/committed-ranges';
@@ -40,6 +46,8 @@ type Props = {
 
 type DispatchProps = {
   readonly onPop: Props['onPop'];
+  readonly updatePreviewSelection?: Props['updatePreviewSelection'];
+  readonly commitRange?: Props['commitRange'];
 };
 
 type StateProps = Readonly<Omit<Props, keyof DispatchProps>>;
@@ -83,6 +91,12 @@ class ProfileFilterNavigatorBarImpl extends React.PureComponent<Props> {
       pageDataByTabID,
       tabFilter,
       profileTimelineUnit,
+      committedRange,
+      previewSelection,
+      updatePreviewSelection,
+      commitRange,
+      uncommittedInputFieldRef,
+      zeroAt,
     } = this.props;
 
     let firstItem;
@@ -180,6 +194,12 @@ class ProfileFilterNavigatorBarImpl extends React.PureComponent<Props> {
           onFirstItemClick={
             isFirstItemClickable ? this._onFirstItemClick : undefined
           }
+          committedRange={committedRange}
+          previewSelection={previewSelection}
+          updatePreviewSelection={updatePreviewSelection}
+          commitRange={commitRange}
+          uncommittedInputFieldRef={uncommittedInputFieldRef}
+          zeroAt={zeroAt}
         />
         {pageDataByTabID && pageDataByTabID.size > 0 ? (
           <TabSelectorMenu />
@@ -189,12 +209,17 @@ class ProfileFilterNavigatorBarImpl extends React.PureComponent<Props> {
   }
 }
 
+type OwnProps = {
+  readonly uncommittedInputFieldRef?: React.RefObject<HTMLInputElement>;
+};
+
 export const ProfileFilterNavigator = explicitConnect<
-  {},
+  OwnProps,
   StateProps,
   DispatchProps
 >({
   mapStateToProps: (state) => {
+    const committedRange = getCommittedRange(state);
     const items = getCommittedRangeLabels(state);
     const previewSelection = getPreviewSelection(state);
     const profileTimelineUnit = getProfileTimelineUnit(state);
@@ -204,6 +229,7 @@ export const ProfileFilterNavigator = explicitConnect<
           profileTimelineUnit
         )
       : undefined;
+    const zeroAt = getZeroAt(state);
 
     const pageDataByTabID = getProfileFilterPageDataByTabID(state);
     const tabFilter = getTabFilter(state);
@@ -219,10 +245,15 @@ export const ProfileFilterNavigator = explicitConnect<
       tabFilter,
       rootRange,
       profileTimelineUnit,
+      committedRange,
+      previewSelection,
+      zeroAt,
     };
   },
   mapDispatchToProps: {
     onPop: popCommittedRanges,
+    updatePreviewSelection,
+    commitRange,
   },
   component: ProfileFilterNavigatorBarImpl,
 });

src/components/app/ProfileViewer.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import { PureComponent } from 'react';
+import * as React from 'react';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
 import { DetailsContainer } from './DetailsContainer';
@@ -59,7 +59,16 @@ type DispatchProps = {
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
 
-class ProfileViewerImpl extends PureComponent<Props> {
+class ProfileViewerImpl extends React.PureComponent<Props> {
+  uncommittedInputFieldRef = React.createRef<HTMLInputElement>();
+
+  _onSelectionMove = () => {
+    if (!this.uncommittedInputFieldRef.current) {
+      return;
+    }
+    this.uncommittedInputFieldRef.current.blur();
+  };
+
   override render() {
     const {
       hasZipFile,
@@ -114,7 +123,9 @@ class ProfileViewerImpl extends PureComponent<Props> {
               />
             ) : null}
             <ProfileName />
-            <ProfileFilterNavigator />
+            <ProfileFilterNavigator
+              uncommittedInputFieldRef={this.uncommittedInputFieldRef}
+            />
             {
               // 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
@@ -139,7 +150,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
             secondaryInitialSize={270}
             onDragEnd={invalidatePanelLayout}
           >
-            <Timeline />
+            <Timeline onSelectionMove={this._onSelectionMove} />
             <SplitterLayout
               vertical
               percentage={true}

src/components/shared/FilterNavigatorBar.css

@@ -67,6 +67,17 @@
   white-space: nowrap;
 }
 
+.filterNavigatorBarItemUncommittedFieldInput {
+  display: flex;
+  overflow: hidden;
+  width: 60px;
+  height: 19px;
+  box-sizing: border-box;
+  border: 0.5px solid #aaa;
+  margin-top: 2.5px;
+  font-size: 11px;
+}
+
 .filterNavigatorBarItemContent > .nodeIcon {
   margin-inline-end: 5px;
 }