Add a fullscreen button to the bottom box

locales/en-US/app.ftl

@@ -1189,6 +1189,14 @@ BottomBox--assembly-code-not-available-title = Assembly code not available
 BottomBox--assembly-code-not-available-text =
     See <a>issue #4520</a> for supported scenarios and planned improvements.
 
+# The toggle button for making the bottom box fullscreen.
+BottomBox--hide-fullscreen =
+    .title = Exit fullscreen
+
+# The toggle button for making the bottom box fullscreen.
+BottomBox--show-fullscreen =
+    .title = Show fullscreen
+
 SourceView--close-button =
     .title = Close the source view
 

src/actions/profile-view.ts

@@ -1959,6 +1959,14 @@ export function closeBottomBox(): ThunkAction<void> {
   };
 }
 
+export function toggleBottomBoxFullscreen(): ThunkAction<void> {
+  return (dispatch) => {
+    dispatch({
+      type: 'TOGGLE_BOTTOM_BOX_FULLSCREEN',
+    });
+  };
+}
+
 export function handleCallNodeTransformShortcut(
   event: React.KeyboardEvent<HTMLElement>,
   threadsKey: ThreadsKey,

src/app-logic/url-handling.ts

@@ -211,6 +211,7 @@ type Query = BaseQuery & {
   transforms?: string;
   sourceViewIndex?: number;
   assemblyView?: string;
+  bottomFullscreen?: boolean;
 
   // StackChart specific
   showUserTimings?: null | undefined;
@@ -346,8 +347,12 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         'timing'
           ? undefined
           : urlState.profileSpecific.lastSelectedCallTreeSummaryStrategy;
-      const { sourceView, assemblyView, isBottomBoxOpenPerPanel } =
-        urlState.profileSpecific;
+      const {
+        sourceView,
+        assemblyView,
+        isBottomBoxOpenPerPanel,
+        isBottomBoxFullscreen,
+      } = urlState.profileSpecific;
 
       if (isBottomBoxOpenPerPanel[selectedTab]) {
         if (sourceView.sourceIndex !== null) {
@@ -358,6 +363,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
             assemblyView.nativeSymbol
           );
         }
+        if (isBottomBoxFullscreen) {
+          query.bottomFullscreen = true;
+        }
       }
       break;
     }
@@ -564,6 +572,7 @@ export function stateFromLocation(
       sourceView,
       assemblyView,
       isBottomBoxOpenPerPanel,
+      isBottomBoxFullscreen: query.bottomFullscreen || false,
       timelineType: validateTimelineType(query.timelineType),
       showJsTracerSummary: query.summary === undefined ? false : true,
       globalTrackOrder: convertGlobalTrackOrderFromString(

src/components/app/BottomBox.css

@@ -2,6 +2,15 @@
  * 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-fullscreen {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .bottom-box-pane {
   display: flex;
   height: 100%; /* direct child of SplitterLayout */
@@ -62,7 +71,9 @@
 }
 
 .bottom-close-button,
-.bottom-assembly-button {
+.bottom-assembly-button,
+.bottom-fullscreen-hide-button,
+.bottom-fullscreen-show-button {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
@@ -79,6 +90,14 @@
   background-image: url(../../../res/img/svg/asm-icon.svg);
 }
 
+.bottom-fullscreen-show-button {
+  background-image: url(firefox-profiler-res/img/svg/fullscreen.svg);
+}
+
+.bottom-fullscreen-hide-button {
+  background-image: url(firefox-profiler-res/img/svg/fullscreen-exit.svg);
+}
+
 .codeLoadingOverlay,
 .sourceCodeErrorOverlay,
 .assemblyCodeErrorOverlay {

src/components/app/BottomBox.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 
 import { SourceView } from '../shared/SourceView';
 import { AssemblyView } from '../shared/AssemblyView';
+import { FullscreenToggleButton } from './FullscreenToggleButton';
 import { AssemblyViewToggleButton } from './AssemblyViewToggleButton';
 import { IonGraphView } from '../shared/IonGraphView';
 import { CodeLoadingOverlay } from './CodeLoadingOverlay';
@@ -18,12 +19,16 @@ import {
   getAssemblyViewIsOpen,
   getAssemblyViewNativeSymbol,
   getAssemblyViewScrollGeneration,
+  getIsBottomBoxFullscreen,
 } from 'firefox-profiler/selectors/url-state';
 import {
   selectedThreadSelectors,
   selectedNodeSelectors,
 } from 'firefox-profiler/selectors/per-thread';
-import { closeBottomBox } from 'firefox-profiler/actions/profile-view';
+import {
+  closeBottomBox,
+  toggleBottomBoxFullscreen,
+} from 'firefox-profiler/actions/profile-view';
 import { parseFileNameFromSymbolication } from 'firefox-profiler/utils/special-paths';
 import {
   getSourceViewCode,
@@ -52,6 +57,7 @@ import { Localized } from '@fluent/react';
 import './BottomBox.css';
 
 type StateProps = {
+  readonly isFullscreen: boolean;
   readonly sourceViewFile: string | null;
   readonly sourceViewCode: SourceCodeStatus | void;
   readonly sourceViewScrollGeneration: number;
@@ -69,6 +75,7 @@ type StateProps = {
 
 type DispatchProps = {
   readonly closeBottomBox: typeof closeBottomBox;
+  readonly toggleBottomBoxFullscreen: typeof toggleBottomBoxFullscreen;
 };
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
@@ -151,12 +158,31 @@ class BottomBoxImpl extends React.PureComponent<Props> {
   _sourceView = React.createRef<SourceView>();
   _assemblyView = React.createRef<AssemblyView>();
 
+  override componentDidMount() {
+    document.addEventListener('keydown', this._onKeyDown);
+  }
+
+  override componentWillUnmount() {
+    document.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  _onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.props.isFullscreen) {
+      this.props.toggleBottomBoxFullscreen();
+    }
+  };
+
   _onClickCloseButton = () => {
     this.props.closeBottomBox();
+    // Close the fullscreen if we're closing the bottom box
+    if (this.props.isFullscreen) {
+      this.props.toggleBottomBoxFullscreen();
+    }
   };
 
   override render() {
     const {
+      isFullscreen,
       sourceViewFile,
       sourceViewCode,
       globalLineTimings,
@@ -196,6 +222,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
     const trailingHeaderButtons = (
       <div className="bottom-box-header-trailing-buttons">
         <AssemblyViewToggleButton />
+        <FullscreenToggleButton />
         <Localized id="SourceView--close-button" attrs={{ title: true }}>
           <button
             className={classNames(
@@ -212,8 +239,13 @@ class BottomBoxImpl extends React.PureComponent<Props> {
     );
 
     return (
-      <div className="bottom-box">
-        <SplitterLayout customClassName="bottom-box" percentage>
+      <div
+        className={classNames(
+          'bottom-box',
+          isFullscreen ? 'bottom-box-fullscreen' : null
+        )}
+      >
+        <SplitterLayout percentage>
           <div className="bottom-box-pane">
             <div className="bottom-box-bar">
               <h3 className="bottom-box-title">{path ?? '(no source file)'}</h3>
@@ -299,6 +331,7 @@ function convertErrors(errors: ApiQueryError[]): SourceCodeLoadingError[] {
 
 export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
   mapStateToProps: (state) => ({
+    isFullscreen: getIsBottomBoxFullscreen(state),
     sourceViewFile: getSourceViewFile(state),
     sourceViewCode: getSourceViewCode(state),
     globalLineTimings: selectedThreadSelectors.getSourceViewLineTimings(state),
@@ -318,6 +351,7 @@ export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
   }),
   mapDispatchToProps: {
     closeBottomBox,
+    toggleBottomBoxFullscreen,
   },
   component: BottomBoxImpl,
 });

src/components/app/FullscreenToggleButton.tsx

@@ -0,0 +1,77 @@
+/* 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 { getIsBottomBoxFullscreen } from 'firefox-profiler/selectors/url-state';
+import { toggleBottomBoxFullscreen } 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 isBottomBoxFullscreen: boolean;
+};
+
+type DispatchProps = {
+  readonly toggleBottomBoxFullscreen: typeof toggleBottomBoxFullscreen;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+class FullscreenToggleButtonImpl extends React.PureComponent<Props> {
+  _onClick = () => {
+    this.props.toggleBottomBoxFullscreen();
+  };
+
+  override render() {
+    const { isBottomBoxFullscreen } = this.props;
+
+    return isBottomBoxFullscreen ? (
+      <Localized id="BottomBox--hide-fullscreen" attrs={{ title: true }}>
+        <button
+          className={classNames(
+            'bottom-fullscreen-hide-button',
+            'photon-button',
+            'photon-button-ghost',
+            'photon-button-ghost--checked'
+          )}
+          title="Exit fullscreen"
+          type="button"
+          onClick={this._onClick}
+        />
+      </Localized>
+    ) : (
+      <Localized id="BottomBox--show-fullscreen" attrs={{ title: true }}>
+        <button
+          className={classNames(
+            'bottom-fullscreen-show-button',
+            'photon-button',
+            'photon-button-ghost'
+          )}
+          title="Show fullscreen"
+          type="button"
+          onClick={this._onClick}
+        />
+      </Localized>
+    );
+  }
+}
+
+export const FullscreenToggleButton = explicitConnect<
+  {},
+  StateProps,
+  DispatchProps
+>({
+  mapStateToProps: (state) => ({
+    isBottomBoxFullscreen: getIsBottomBoxFullscreen(state),
+  }),
+  mapDispatchToProps: {
+    toggleBottomBoxFullscreen,
+  },
+  component: FullscreenToggleButtonImpl,
+});

src/reducers/url-state.ts

@@ -648,6 +648,16 @@ const isBottomBoxOpenPerPanel: Reducer<IsOpenPerPanelState> = (
   }
 };
 
+const isBottomBoxFullscreen: Reducer<boolean> = (state = false, action) => {
+  switch (action.type) {
+    case 'TOGGLE_BOTTOM_BOX_FULLSCREEN': {
+      return !state;
+    }
+    default:
+      return state;
+  }
+};
+
 /**
  * This value is only set from the URL and never changed.
  */
@@ -673,6 +683,7 @@ const profileSpecific = combineReducers({
   sourceView,
   assemblyView,
   isBottomBoxOpenPerPanel,
+  isBottomBoxFullscreen,
   timelineType,
   globalTrackOrder,
   hiddenGlobalTracks,

src/selectors/url-state.ts

@@ -219,6 +219,10 @@ export const getIsBottomBoxOpen: Selector<boolean> = (state) => {
   return getProfileSpecificState(state).isBottomBoxOpenPerPanel[tab];
 };
 
+export const getIsBottomBoxFullscreen: Selector<boolean> = (state) => {
+  return getProfileSpecificState(state).isBottomBoxFullscreen;
+};
+
 /**
  * The URL predictor is used to generate a link for an uploaded profile, to predict
  * what the URL will be.

src/types/actions.ts

@@ -354,6 +354,9 @@ type ProfileAction =
   | {
       readonly type: 'CLOSE_BOTTOM_BOX_FOR_TAB';
       readonly tab: TabSlug;
+    }
+  | {
+      readonly type: 'TOGGLE_BOTTOM_BOX_FULLSCREEN';
     };
 
 type ReceiveProfileAction =

src/types/state.ts

@@ -361,6 +361,7 @@ export type ProfileSpecificUrlState = {
   sourceView: SourceViewState;
   assemblyView: AssemblyViewState;
   isBottomBoxOpenPerPanel: IsOpenPerPanelState;
+  isBottomBoxFullscreen: boolean;
   globalTrackOrder: TrackIndex[];
   hiddenGlobalTracks: Set<TrackIndex>;
   hiddenLocalTracksByPid: Map<Pid, Set<TrackIndex>>;