From a085575d17760158865ed130c48c25baebdeba8f Mon Sep 17 00:00:00 2001 From: Ryan Hunt Date: Fri, 5 Sep 2025 14:15:27 -0500 Subject: [PATCH 1/9] Add a fullscreen button to the bottom box --- locales/en-US/app.ftl | 8 ++ src/actions/profile-view.ts | 8 ++ src/app-logic/url-handling.ts | 2 + src/components/app/BottomBox.css | 16 +++- src/components/app/BottomBox.tsx | 15 +++- src/components/app/FullscreenToggleButton.tsx | 77 +++++++++++++++++++ src/reducers/url-state.ts | 11 +++ src/selectors/url-state.ts | 4 + src/types/actions.ts | 3 + src/types/state.ts | 1 + 10 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 src/components/app/FullscreenToggleButton.tsx diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index 366729e740..2a00e3b589 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -1169,6 +1169,14 @@ BottomBox--assembly-code-not-available-title = Assembly code not available BottomBox--assembly-code-not-available-text = See issue #4520 for supported scenarios and planned improvements. +# The toggle button for making the bottom box fullscreen. +BottomBox--hide-fullscreen = + .title = Minimize the source and assembly views to no longer be fullscreen. + +# The toggle button for making the bottom box fullscreen. +BottomBox--show-fullscreen = + .title = Expand the source and assembly views to be fullscreen. + SourceView--close-button = .title = Close the source view diff --git a/src/actions/profile-view.ts b/src/actions/profile-view.ts index 9ca988d8cc..7ac0ab8065 100644 --- a/src/actions/profile-view.ts +++ b/src/actions/profile-view.ts @@ -1957,6 +1957,14 @@ export function closeBottomBox(): ThunkAction { }; } +export function toggleBottomBoxFullscreen(): ThunkAction { + return (dispatch) => { + dispatch({ + type: 'TOGGLE_BOTTOM_BOX_FULLSCREEN', + }); + }; +} + export function handleCallNodeTransformShortcut( event: React.KeyboardEvent, threadsKey: ThreadsKey, diff --git a/src/app-logic/url-handling.ts b/src/app-logic/url-handling.ts index 60267bbc77..3d1dbc6210 100644 --- a/src/app-logic/url-handling.ts +++ b/src/app-logic/url-handling.ts @@ -532,6 +532,7 @@ export function stateFromLocation( isBottomBoxOpenPerPanel[selectedTab] = true; } } + const isBottomBoxFullscreen = false; const localTrackOrderByPid = convertLocalTrackOrderByPidFromString( query.localTrackOrderByPid @@ -564,6 +565,7 @@ export function stateFromLocation( sourceView, assemblyView, isBottomBoxOpenPerPanel, + isBottomBoxFullscreen, timelineType: validateTimelineType(query.timelineType), showJsTracerSummary: query.summary === undefined ? false : true, globalTrackOrder: convertGlobalTrackOrderFromString( diff --git a/src/components/app/BottomBox.css b/src/components/app/BottomBox.css index 683dce9a99..b4820a0200 100644 --- a/src/components/app/BottomBox.css +++ b/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,8 @@ } .bottom-close-button, -.bottom-assembly-button { +.bottom-assembly-button, +.bottom-fullscreen-button { width: 24px; height: 24px; flex-shrink: 0; @@ -79,6 +89,10 @@ background-image: url(../../../res/img/svg/asm-icon.svg); } +.bottom-fullscreen-button { + background-image: url(firefox-profiler-res/img/svg/open-in-new-12.svg); +} + .codeLoadingOverlay, .sourceCodeErrorOverlay, .assemblyCodeErrorOverlay { diff --git a/src/components/app/BottomBox.tsx b/src/components/app/BottomBox.tsx index 4f5d8d2434..16614a05a2 100644 --- a/src/components/app/BottomBox.tsx +++ b/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'; @@ -17,6 +18,7 @@ import { getAssemblyViewIsOpen, getAssemblyViewNativeSymbol, getAssemblyViewScrollGeneration, + getIsBottomBoxFullscreen, } from 'firefox-profiler/selectors/url-state'; import { selectedThreadSelectors, @@ -51,6 +53,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; @@ -155,6 +158,7 @@ class BottomBoxImpl extends React.PureComponent { override render() { const { + isFullscreen, sourceViewFile, sourceViewCode, globalLineTimings, @@ -192,6 +196,7 @@ class BottomBoxImpl extends React.PureComponent { // These trailing header buttons go into the bottom-box-bar of the last pane. const trailingHeaderButtons = (
+