Add prev/next buttons in the assembly view.

Author: mstange

src/actions/profile-view.ts

@@ -1962,6 +1962,15 @@ export function openAssemblyView(): Action {
   };
 }
 
+export function changeAssemblyViewNativeSymbolEntryIndex(
+  entryIndex: number
+): Action {
+  return {
+    type: 'CHANGE_ASSEMBLY_VIEW_NATIVE_SYMBOL_ENTRY_INDEX',
+    entryIndex,
+  };
+}
+
 export function closeAssemblyView(): Action {
   return {
     type: 'CLOSE_ASSEMBLY_VIEW',

src/components/app/AssemblyViewNativeSymbolNavigator.tsx

@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React from 'react';
+import classNames from 'classnames';
+
+import {
+  getAssemblyViewCurrentNativeSymbolEntryIndex,
+  getAssemblyViewNativeSymbolEntryCount,
+} from 'firefox-profiler/selectors/url-state';
+import { changeAssemblyViewNativeSymbolEntryIndex } from 'firefox-profiler/actions/profile-view';
+import explicitConnect from 'firefox-profiler/utils/connect';
+
+import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+
+import { Localized } from '@fluent/react';
+
+type StateProps = {
+  readonly assemblyViewCurrentNativeSymbolEntryIndex: number | null;
+  readonly assemblyViewNativeSymbolEntryCount: number;
+};
+
+type DispatchProps = {
+  readonly changeAssemblyViewNativeSymbolEntryIndex: typeof changeAssemblyViewNativeSymbolEntryIndex;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+class AssemblyViewNativeSymbolNavigatorImpl extends React.PureComponent<Props> {
+  _onPreviousClick = () => {
+    this._changeIndexBy(-1);
+  };
+
+  _onNextClick = () => {
+    this._changeIndexBy(1);
+  };
+
+  _changeIndexBy(delta: number) {
+    const {
+      assemblyViewCurrentNativeSymbolEntryIndex: index,
+      assemblyViewNativeSymbolEntryCount: count,
+      changeAssemblyViewNativeSymbolEntryIndex,
+    } = this.props;
+    const newIndex = (index ?? 0) + delta;
+    if (newIndex >= 0 && newIndex < count) {
+      changeAssemblyViewNativeSymbolEntryIndex(newIndex);
+    }
+  }
+
+  override render() {
+    const {
+      assemblyViewCurrentNativeSymbolEntryIndex: index,
+      assemblyViewNativeSymbolEntryCount: count,
+    } = this.props;
+
+    if (index === null || count <= 1) {
+      return null;
+    }
+
+    return (
+      <>
+        <h3 className="bottom-box-title-trailer">
+          {index !== null && count > 1 ? `${index + 1} of ${count}` : ''}
+        </h3>
+        <Localized id="AssemblyView--prev-button" attrs={{ title: true }}>
+          <button
+            className={classNames(
+              'bottom-prev-button',
+              'photon-button',
+              'photon-button-ghost'
+            )}
+            title="Previous"
+            type="button"
+            disabled={index === null || index <= 0}
+            onClick={this._onPreviousClick}
+          >
+            ◀
+          </button>
+        </Localized>
+        <Localized id="AssemblyView--next-button" attrs={{ title: true }}>
+          <button
+            className={classNames(
+              'bottom-next-button',
+              'photon-button',
+              'photon-button-ghost'
+            )}
+            title="Next"
+            type="button"
+            disabled={index === null || index >= count - 1}
+            onClick={this._onNextClick}
+          >
+            ▶
+          </button>
+        </Localized>
+      </>
+    );
+  }
+}
+
+export const AssemblyViewNativeSymbolNavigator = explicitConnect<
+  {},
+  StateProps,
+  DispatchProps
+>({
+  mapStateToProps: (state) => ({
+    assemblyViewCurrentNativeSymbolEntryIndex:
+      getAssemblyViewCurrentNativeSymbolEntryIndex(state),
+    assemblyViewNativeSymbolEntryCount:
+      getAssemblyViewNativeSymbolEntryCount(state),
+  }),
+  mapDispatchToProps: {
+    changeAssemblyViewNativeSymbolEntryIndex,
+  },
+  component: AssemblyViewNativeSymbolNavigatorImpl,
+});

src/components/app/BottomBox.css

@@ -46,14 +46,19 @@
   line-height: 18px;
 }
 
-.bottom-box-title {
+.bottom-box-title,
+.bottom-box-title-trailer {
   overflow: hidden;
   margin: 0 8px;
   font: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.bottom-box-title-trailer {
+  margin: 0;
+}
+
 .bottom-box-header-trailing-buttons {
   display: flex;
   height: 100%;
@@ -62,7 +67,9 @@
 }
 
 .bottom-close-button,
-.bottom-assembly-button {
+.bottom-assembly-button,
+.bottom-prev-button,
+.bottom-next-button {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
@@ -71,6 +78,16 @@
   background-size: 16px 16px;
 }
 
+.bottom-prev-button,
+.bottom-next-button {
+  width: 16px;
+  font-size: 9px;
+}
+
+.bottom-next-button {
+  margin-right: 8px;
+}
+
 .bottom-close-button {
   background-image: url(../../../res/img/svg/close-dark.svg);
 }

src/components/app/BottomBox.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { SourceView } from '../shared/SourceView';
 import { AssemblyView } from '../shared/AssemblyView';
 import { AssemblyViewToggleButton } from './AssemblyViewToggleButton';
+import { AssemblyViewNativeSymbolNavigator } from './AssemblyViewNativeSymbolNavigator';
 import { IonGraphView } from '../shared/IonGraphView';
 import { CodeLoadingOverlay } from './CodeLoadingOverlay';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
@@ -192,6 +193,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
     // These trailing header buttons go into the bottom-box-bar of the last pane.
     const trailingHeaderButtons = (
       <div className="bottom-box-header-trailing-buttons">
+        {assemblyViewIsOpen ? <AssemblyViewNativeSymbolNavigator /> : null}
         <AssemblyViewToggleButton />
         <Localized id="SourceView--close-button" attrs={{ title: true }}>
           <button

src/reducers/url-state.ts

@@ -617,6 +617,12 @@ const assemblyView: Reducer<AssemblyViewState> = (
         isOpen: true,
       };
     }
+    case 'CHANGE_ASSEMBLY_VIEW_NATIVE_SYMBOL_ENTRY_INDEX': {
+      return {
+        ...state,
+        currentNativeSymbol: action.entryIndex,
+      };
+    }
     case 'CLOSE_ASSEMBLY_VIEW': {
       return {
         ...state,

src/selectors/url-state.ts

@@ -92,6 +92,12 @@ export const getAssemblyViewNativeSymbol: Selector<NativeSymbolInfo | null> = (
     ? nativeSymbols[currentNativeSymbol]
     : null;
 };
+export const getAssemblyViewCurrentNativeSymbolEntryIndex: Selector<
+  number | null
+> = (state) => getProfileSpecificState(state).assemblyView.currentNativeSymbol;
+export const getAssemblyViewNativeSymbolEntryCount: Selector<number> = (
+  state
+) => getProfileSpecificState(state).assemblyView.nativeSymbols.length;
 export const getAssemblyViewScrollGeneration: Selector<number> = (state) =>
   getProfileSpecificState(state).assemblyView.scrollGeneration;
 export const getAssemblyViewScrollToInstructionAddress: Selector<

src/types/actions.ts

@@ -351,6 +351,10 @@ type ProfileAction =
   | {
       readonly type: 'OPEN_ASSEMBLY_VIEW';
     }
+  | {
+      readonly type: 'CHANGE_ASSEMBLY_VIEW_NATIVE_SYMBOL_ENTRY_INDEX';
+      readonly entryIndex: number;
+    }
   | {
       readonly type: 'CLOSE_ASSEMBLY_VIEW';
     }