Add prev/next buttons in the assembly view.

Author: mstange

src/actions/profile-view.js

@@ -2033,6 +2033,13 @@ 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/app-logic/url-handling.js

@@ -423,9 +423,16 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         if (sourceView.sourceFile !== null) {
           query.sourceView = sourceView.sourceFile;
         }
-        if (assemblyView.isOpen && assemblyView.nativeSymbol !== null) {
+        if (
+          assemblyView.isOpen &&
+          assemblyView.currentNativeSymbolEntryIndex !== null
+        ) {
+          const {
+            currentNativeSymbolEntryIndex,
+            allNativeSymbolsForInitiatingCallNode,
+          } = assemblyView;
           query.assemblyView = stringifyAssemblyViewSymbol(
-            assemblyView.nativeSymbol
+            allNativeSymbolsForInitiatingCallNode[currentNativeSymbolEntryIndex]
           );
         }
       }
@@ -606,7 +613,6 @@ export function stateFromLocation(
   const assemblyView: AssemblyViewState = {
     isOpen: false,
     scrollGeneration: 0,
-    nativeSymbol: null,
     currentNativeSymbolEntryIndex: null,
     allNativeSymbolsForInitiatingCallNode: [],
     allNativeSymbolWeightsForInitiatingCallNode: [],
@@ -620,7 +626,7 @@ export function stateFromLocation(
   if (query.assemblyView) {
     const symbol = parseAssemblyViewSymbol(query.assemblyView);
     if (symbol !== null) {
-      assemblyView.nativeSymbol = symbol;
+      assemblyView.currentNativeSymbolEntryIndex = 0;
       assemblyView.allNativeSymbolsForInitiatingCallNode = [symbol];
       assemblyView.isOpen = true;
       isBottomBoxOpenPerPanel[selectedTab] = true;

src/components/app/AssemblyViewNativeSymbolNavigator.js

@@ -0,0 +1,117 @@
+/* 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/. */
+// @flow
+
+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 = {|
+  +assemblyViewCurrentNativeSymbolEntryIndex: number | null,
+  +assemblyViewNativeSymbolEntryCount: number,
+|};
+
+type DispatchProps = {|
+  +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 + delta;
+    if (newIndex >= 0 && newIndex < count) {
+      changeAssemblyViewNativeSymbolEntryIndex(newIndex);
+    }
+  }
+
+  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,18 @@
   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 +66,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 +77,16 @@
   background-size: 16px 16px;
 }
 
+.bottom-prev-button,
+.bottom-next-button {
+  font-size: 9px;
+  width: 16px;
+}
+
+.bottom-next-button {
+  margin-right: 8px;
+}
+
 .bottom-close-button {
   background-image: url(/res/img/svg/close-dark.svg);
 }

src/components/app/BottomBox.js

@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import { SourceView } from '../shared/SourceView';
 import { AssemblyView } from '../shared/AssemblyView';
 import { AssemblyViewToggleButton } from './AssemblyViewToggleButton';
+import { AssemblyViewNativeSymbolNavigator } from './AssemblyViewNativeSymbolNavigator';
 import { CodeLoadingOverlay } from './CodeLoadingOverlay';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
 import {
@@ -187,6 +188,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.js

@@ -595,7 +595,6 @@ const sourceView: Reducer<SourceViewState> = (
 const assemblyView: Reducer<AssemblyViewState> = (
   state = {
     scrollGeneration: 0,
-    nativeSymbol: null,
     currentNativeSymbolEntryIndex: null,
     allNativeSymbolsForInitiatingCallNode: [],
     allNativeSymbolWeightsForInitiatingCallNode: [],
@@ -613,17 +612,9 @@ const assemblyView: Reducer<AssemblyViewState> = (
       } = action;
       return {
         scrollGeneration: state.scrollGeneration + 1,
-        nativeSymbol:
-          initialNativeSymbolEntryIndex !== null
-            ? allNativeSymbolsForInitiatingCallNode[
-                initialNativeSymbolEntryIndex
-              ]
-            : null,
         currentNativeSymbolEntryIndex: initialNativeSymbolEntryIndex,
-        allNativeSymbolsForInitiatingCallNode:
-          allNativeSymbolsForInitiatingCallNode,
-        allNativeSymbolWeightsForInitiatingCallNode:
-          allNativeSymbolWeightsForInitiatingCallNode,
+        allNativeSymbolsForInitiatingCallNode,
+        allNativeSymbolWeightsForInitiatingCallNode,
         isOpen: state.isOpen || shouldOpenAssemblyView,
       };
     }
@@ -633,6 +624,12 @@ const assemblyView: Reducer<AssemblyViewState> = (
         isOpen: true,
       };
     }
+    case 'CHANGE_ASSEMBLY_VIEW_NATIVE_SYMBOL_ENTRY_INDEX': {
+      return {
+        ...state,
+        currentNativeSymbolEntryIndex: action.entryIndex,
+      };
+    }
     case 'CLOSE_ASSEMBLY_VIEW': {
       return {
         ...state,

src/selectors/url-state.js

@@ -86,7 +86,24 @@ export const getAssemblyViewIsOpen: Selector<boolean> = (state) =>
   getProfileSpecificState(state).assemblyView.isOpen;
 export const getAssemblyViewNativeSymbol: Selector<NativeSymbolInfo | null> = (
   state
-) => getProfileSpecificState(state).assemblyView.nativeSymbol;
+) => {
+  const {
+    currentNativeSymbolEntryIndex,
+    allNativeSymbolsForInitiatingCallNode,
+  } = getProfileSpecificState(state).assemblyView;
+  return currentNativeSymbolEntryIndex !== null
+    ? allNativeSymbolsForInitiatingCallNode[currentNativeSymbolEntryIndex]
+    : null;
+};
+export const getAssemblyViewCurrentNativeSymbolEntryIndex: Selector<
+  number | null,
+> = (state) =>
+  getProfileSpecificState(state).assemblyView.currentNativeSymbolEntryIndex;
+export const getAssemblyViewNativeSymbolEntryCount: Selector<number> = (
+  state
+) =>
+  getProfileSpecificState(state).assemblyView
+    .allNativeSymbolsForInitiatingCallNode.length;
 export const getAssemblyViewScrollGeneration: Selector<number> = (state) =>
   getProfileSpecificState(state).assemblyView.scrollGeneration;
 export const getShowJsTracerSummary: Selector<boolean> = (state) =>

src/types/actions.js

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

src/types/state.js

@@ -269,8 +269,6 @@ export type AssemblyViewState = {|
   scrollGeneration: number,
   // The native symbol for which the assembly code is being shown at the moment.
   // Null if the initiating call node did not have a native symbol.
-  // Always equal to allNativeSymbolsForInitiatingCallNode[currentNativeSymbolEntryIndex]
-  nativeSymbol: NativeSymbolInfo | null,
   currentNativeSymbolEntryIndex: number | null,
   // The set of native symbols which contributed samples to the initiating call
   // node. Often, this will just be one element (the same as `nativeSymbol`),