Assembly view

locales/en-US/app.ftl

@@ -926,21 +926,25 @@ TransformNavigator--collapse-indirect-recursion = Collapse indirect recursion: {
 #   $item (String) - Name of the function that transform applied to.
 TransformNavigator--collapse-function-subtree = Collapse subtree: { $item }
 
-## Source code view in a box at the bottom of the UI.
+## "Bottom box" - a view which contains the source view and the assembly view,
+## at the bottom of the profiler UI
+##
+## Some of these string IDs still start with SourceView, even though the strings
+## are used for both the source view and the assembly view.
 
-# Displayed while the source view is waiting for the network request which
-# delivers the source code.
+# Displayed while a view in the bottom box is waiting for code to load from
+# the network.
 # Variables:
 #   $host (String) - The "host" part of the URL, e.g. hg.mozilla.org
 SourceView--loading-url = Waiting for { $host }…
 
-# Displayed while the source view is waiting for the browser to deliver
-# the source code.
+# Displayed while a view in the bottom box is waiting for code to load from
+# the browser.
 SourceView--loading-browser-connection = Waiting for { -firefox-brand-name }…
 
 # Displayed whenever the source view was not able to get the source code for
 # a file.
-SourceView--source-not-available-title = Source not available
+BottomBox--source-code-not-available-title = Source code not available
 
 # Displayed whenever the source view was not able to get the source code for
 # a file.
@@ -949,6 +953,25 @@ SourceView--source-not-available-title = Source not available
 SourceView--source-not-available-text =
     See <a>issue #3741</a> for supported scenarios and planned improvements.
 
+# Displayed whenever the assembly view was not able to get the assembly code for
+# a file.
+# Assembly refers to the low-level programming language.
+BottomBox--assembly-code-not-available-title = Assembly code not available
+
+# Displayed whenever the assembly view was not able to get the assembly code for
+# a file.
+# Elements:
+#   <a>link text</a> - A link to the github issue about supported scenarios.
+BottomBox--assembly-code-not-available-text =
+    See <a>issue #4520</a> for supported scenarios and planned improvements.
+
+SourceView--close-button =
+    .title = Close the source view
+
+## Code loading errors
+## These are displayed both in the source view and in the assembly view.
+## The string IDs here currently all start with SourceView for historical reasons.
+
 # Displayed below SourceView--cannot-obtain-source, if the profiler does not
 # know which URL to request source code from.
 SourceView--no-known-cors-url =
@@ -1016,8 +1039,17 @@ SourceView--not-in-archive-error-when-obtaining-source =
 SourceView--archive-parsing-error-when-obtaining-source =
     The archive at { $url } could not be parsed: { $parsingErrorMessage }
 
-SourceView--close-button =
-    .title = Close the source view
+## Toggle buttons in the top right corner of the bottom box
+
+# The toggle button for the assembly view, while the assembly view is hidden.
+# Assembly refers to the low-level programming language.
+AssemblyView--show-button =
+    .title = Show the assembly view
+
+# The toggle button for the assembly view, while the assembly view is shown.
+# Assembly refers to the low-level programming language.
+AssemblyView--hide-button =
+    .title = Hide the assembly view
 
 ## UploadedRecordingsHome
 ## This is the page that displays all the profiles that user has uploaded.

res/css/photon/button.css

@@ -80,7 +80,8 @@
   background-color: transparent;
 }
 
-.photon-button-ghost:hover:not(:disabled) {
+.photon-button-ghost:hover:not(:disabled),
+.photon-button-ghost--checked {
   background-color: var(--grey-90-a10);
 }
 

src/actions/code.js

@@ -23,8 +23,8 @@ export function beginLoadingSourceCodeFromBrowserConnection(
   return { type: 'SOURCE_CODE_LOADING_BEGIN_BROWSER_CONNECTION', file };
 }
 
-export function finishLoadingSourceCode(file: string, source: string): Action {
-  return { type: 'SOURCE_CODE_LOADING_SUCCESS', file, source };
+export function finishLoadingSourceCode(file: string, code: string): Action {
+  return { type: 'SOURCE_CODE_LOADING_SUCCESS', file, code };
 }
 
 export function failLoadingSourceCode(

src/components/app/AssemblyViewToggleButton.js

@@ -0,0 +1,87 @@
+/* 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 { getAssemblyViewIsOpen } from 'firefox-profiler/selectors/url-state';
+import {
+  openAssemblyView,
+  closeAssemblyView,
+} 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 = {|
+  +assemblyViewIsOpen: boolean,
+|};
+
+type DispatchProps = {|
+  +openAssemblyView: typeof openAssemblyView,
+  +closeAssemblyView: typeof closeAssemblyView,
+|};
+
+type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
+
+class AssemblyViewToggleButtonImpl extends React.PureComponent<Props> {
+  _onClick = () => {
+    if (this.props.assemblyViewIsOpen) {
+      this.props.closeAssemblyView();
+    } else {
+      this.props.openAssemblyView();
+    }
+  };
+
+  render() {
+    const { assemblyViewIsOpen } = this.props;
+
+    return assemblyViewIsOpen ? (
+      <Localized id="AssemblyView--hide-button" attrs={{ title: true }}>
+        <button
+          className={classNames(
+            'bottom-assembly-button',
+            'photon-button',
+            'photon-button-ghost',
+            'photon-button-ghost--checked'
+          )}
+          title="Hide the assembly view"
+          type="button"
+          onClick={this._onClick}
+        />
+      </Localized>
+    ) : (
+      <Localized id="AssemblyView--show-button" attrs={{ title: true }}>
+        <button
+          className={classNames(
+            'bottom-assembly-button',
+            'photon-button',
+            'photon-button-ghost'
+          )}
+          title="Show the assembly view"
+          type="button"
+          onClick={this._onClick}
+        />
+      </Localized>
+    );
+  }
+}
+
+export const AssemblyViewToggleButton = explicitConnect<
+  {||},
+  StateProps,
+  DispatchProps
+>({
+  mapStateToProps: (state) => ({
+    assemblyViewIsOpen: getAssemblyViewIsOpen(state),
+  }),
+  mapDispatchToProps: {
+    openAssemblyView,
+    closeAssemblyView,
+  },
+  component: AssemblyViewToggleButtonImpl,
+});

src/components/app/BottomBox.css

@@ -2,47 +2,86 @@
  * 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/. */
 
-.bottom-box {
+.bottom-box-pane {
   display: flex;
-  height: 100%;
-  flex-flow: column;
+  height: 100%; /* direct child of SplitterLayout */
+  flex-flow: column nowrap;
 }
 
-.bottom-main {
-  position: relative;
+.bottom-sourceview-wrapper,
+.bottom-assemblyview-wrapper {
+  position: relative; /* containing block for status overlay */
   display: flex;
   min-height: 0;
   flex: 1;
   flex-flow: column;
   background: var(--grey-20);
 }
 
+.bottom-box .layout-splitter {
+  position: relative; /* containing block for absolute ::before */
+  width: 1px;
+  border: none;
+  background-color: var(--grey-30) !important;
+}
+
+/* Provide 3px extra grabbable surface on each side of the splitter */
+.bottom-box .layout-splitter::before {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  content: '';
+  inset: 0 -3px;
+}
+
 .bottom-box-bar {
   display: flex;
   overflow: hidden;
   height: 24px;
   flex-flow: row;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid var(--grey-30);
   background: var(--grey-10);
-  box-shadow: inset 0 -1px var(--grey-30);
   line-height: 18px;
 }
 
 .bottom-box-title {
-  margin: 0;
-  margin-left: 8px;
+  overflow: hidden;
+  margin: 0 8px;
   font: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.bottom-close-button {
+.bottom-box-header-trailing-buttons {
+  display: flex;
+  height: 100%;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.bottom-close-button,
+.bottom-assembly-button {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  background: url(/res/img/svg/close-dark.svg) no-repeat center / 16px 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.bottom-close-button {
+  background-image: url(/res/img/svg/close-dark.svg);
+}
+
+.bottom-assembly-button {
+  background-image: url(/res/img/svg/asm-icon.svg);
 }
 
-.sourceStatusOverlay {
+.codeLoadingOverlay,
+.sourceCodeErrorOverlay,
+.assemblyCodeErrorOverlay {
   /**
    * Put the overlay on top of everything in .bottom-main, but centered
    * horizontally and vertically. We center using margin: auto, and enforce
@@ -69,8 +108,8 @@
   word-break: break-word;
 }
 
-/* Use :before to add a loading spinner image */
-.sourceStatusOverlay.loading::before {
+/* Use ::before to add a loading spinner image */
+.codeLoadingOverlay::before {
   display: block;
   width: 32px;
   height: 32px;
@@ -79,8 +118,9 @@
   content: '';
 }
 
-/* Use :before to add an alert icon */
-.sourceStatusOverlay.error::before {
+/* Use ::before to add an alert icon */
+.sourceCodeErrorOverlay::before,
+.assemblyCodeErrorOverlay::before {
   display: block;
   width: 50px;
   height: 50px;
@@ -90,6 +130,6 @@
   filter: brightness(70%) drop-shadow(0 1px rgb(255 255 255 / 0.5));
 }
 
-.sourceStatusOverlay ul {
+.codeErrorOverlay {
   padding-left: 20px;
 }