Use custom splitter component

package.json

@@ -98,7 +98,6 @@
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^10.0.3",
     "react-redux": "^9.2.0",
-    "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",

src/actions/app.ts

@@ -109,10 +109,6 @@ export function changeSidebarOpenState(tab: TabSlug, isOpen: boolean): Action {
   return { type: 'CHANGE_SIDEBAR_OPEN_STATE', tab, isOpen };
 }
 
-export function invalidatePanelLayout(): Action {
-  return { type: 'INCREMENT_PANEL_LAYOUT_GENERATION' as const };
-}
-
 /**
  * The viewport component provides a hint to use shift to zoom scroll. The first
  * time a user does this, the hint goes away.

src/components/app/BottomBox.css

@@ -2,13 +2,21 @@
  * 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 {
+  display: flex;
+  min-height: 0;
+  flex-flow: row nowrap;
+}
+
 .bottom-box-pane {
   --internal-sourceview-background-color: var(--grey-20);
   --internal-close-icon: url(../../../res/img/svg/close-dark.svg);
   --internal-assembly-icon: url(../../../res/img/svg/asm-icon.svg);
 
   display: flex;
-  height: 100%; /* direct child of SplitterLayout */
+  overflow: hidden;
+  min-width: 0;
+  flex: 1;
   flex-flow: column nowrap;
   color: var(--base-foreground-color);
 }
@@ -23,15 +31,15 @@
   background: var(--internal-sourceview-background-color);
 }
 
-.bottom-box .layout-splitter {
+.bottom-box .resizableWithSplitterSplitter {
   position: relative; /* containing block for absolute ::before */
   width: 1px;
   border: none;
   background-color: var(--base-border-color) !important;
 }
 
 /* Provide 3px extra grabbable surface on each side of the splitter */
-.bottom-box .layout-splitter::before {
+.bottom-box .resizableWithSplitterSplitter::before {
   position: absolute;
   z-index: var(--z-bottom-box);
   display: block;
@@ -44,6 +52,7 @@
   overflow: hidden;
   height: 24px;
   flex-flow: row;
+  flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--panel-border-color);

src/components/app/BottomBox.tsx

@@ -3,11 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import SplitterLayout from 'react-splitter-layout';
 import classNames from 'classnames';
 
 import { SourceView } from '../shared/SourceView';
 import { AssemblyView } from '../shared/AssemblyView';
+import { ResizableWithSplitter } from '../shared/ResizableWithSplitter';
 import { AssemblyViewToggleButton } from './AssemblyViewToggleButton';
 import { AssemblyViewNativeSymbolNavigator } from './AssemblyViewNativeSymbolNavigator';
 import { IonGraphView } from '../shared/IonGraphView';
@@ -217,43 +217,48 @@ class BottomBoxImpl extends React.PureComponent<Props> {
 
     return (
       <div className="bottom-box">
-        <SplitterLayout customClassName="bottom-box" percentage>
-          <div className="bottom-box-pane">
-            <div className="bottom-box-bar">
-              <h3 className="bottom-box-title">{path ?? '(no source file)'}</h3>
-              {assemblyViewIsOpen ? null : trailingHeaderButtons}
-            </div>
-            <div className="bottom-sourceview-wrapper">
-              {displayIonGraph ? (
-                <IonGraphView
-                  timings={globalLineTimings}
-                  sourceCode={sourceCode}
-                />
-              ) : null}
-              {displaySourceView ? (
-                <SourceView
-                  timings={globalLineTimings}
-                  sourceCode={sourceCode}
-                  filePath={path}
-                  scrollGeneration={sourceViewScrollGeneration}
-                  scrollToLineNumber={sourceViewScrollToLineNumber}
-                  highlightedLine={sourceViewHighlightedLine}
-                  startLine={sourceViewStartLine}
-                  ref={this._sourceView}
-                />
-              ) : null}
-              {sourceViewCode !== undefined &&
-              sourceViewCode.type === 'LOADING' ? (
-                <CodeLoadingOverlay source={sourceViewCode.source} />
-              ) : null}
-              {sourceViewCode !== undefined &&
-              sourceViewCode.type === 'ERROR' ? (
-                <SourceCodeErrorOverlay errors={sourceViewCode.errors} />
-              ) : null}
-            </div>
+        <div className="bottom-box-pane">
+          <div className="bottom-box-bar">
+            <h3 className="bottom-box-title">{path ?? '(no source file)'}</h3>
+            {assemblyViewIsOpen ? null : trailingHeaderButtons}
+          </div>
+          <div className="bottom-sourceview-wrapper">
+            {displayIonGraph ? (
+              <IonGraphView
+                timings={globalLineTimings}
+                sourceCode={sourceCode}
+              />
+            ) : null}
+            {displaySourceView ? (
+              <SourceView
+                timings={globalLineTimings}
+                sourceCode={sourceCode}
+                filePath={path}
+                scrollGeneration={sourceViewScrollGeneration}
+                scrollToLineNumber={sourceViewScrollToLineNumber}
+                highlightedLine={sourceViewHighlightedLine}
+                startLine={sourceViewStartLine}
+                ref={this._sourceView}
+              />
+            ) : null}
+            {sourceViewCode !== undefined &&
+            sourceViewCode.type === 'LOADING' ? (
+              <CodeLoadingOverlay source={sourceViewCode.source} />
+            ) : null}
+            {sourceViewCode !== undefined && sourceViewCode.type === 'ERROR' ? (
+              <SourceCodeErrorOverlay errors={sourceViewCode.errors} />
+            ) : null}
           </div>
+        </div>
 
-          {assemblyViewIsOpen ? (
+        {assemblyViewIsOpen ? (
+          <ResizableWithSplitter
+            splitterPosition="start"
+            controlledProperty="width"
+            className=""
+            percent={true}
+            initialSize="50%"
+          >
             <div className="bottom-box-pane">
               <div className="bottom-box-bar">
                 <h3 className="bottom-box-title">
@@ -289,8 +294,8 @@ class BottomBoxImpl extends React.PureComponent<Props> {
                 ) : null}
               </div>
             </div>
-          ) : null}
-        </SplitterLayout>
+          </ResizableWithSplitter>
+        ) : null}
       </div>
     );
   }

src/components/app/Details.css

@@ -3,8 +3,11 @@
   --internal-sidebar-expand-icon: url(../../../res/img/svg/pane-expand.svg);
 
   display: flex;
+
+  /* If .Details is squished to a very small size between the sidebar and/or bottom bar,
+     don't spill out our contents over those other elements. */
   overflow: clip;
-  flex: auto;
+  flex: 1;
   flex-direction: column;
 }
 

src/components/app/DetailsContainer.css

@@ -1,26 +1,29 @@
-.DetailsContainer .layout-pane > * {
-  width: 100%;
-  height: 100%;
+.DetailsContainer {
+  position: relative;
+  z-index: 0;
+  display: flex;
   box-sizing: border-box;
+  flex: 1;
+  flex-flow: row nowrap;
+  contain: size;
 }
 
-.DetailsContainer .layout-pane:not(.layout-pane-primary) {
-  max-width: 600px;
+.DetailsContainer .resizableWithSplitterInner > * {
+  min-width: 0;
+  flex: 1;
 }
 
-/* overriding defaults from splitter-layout */
-.DetailsContainer {
-  /* SplitterLayout injects position: absolute, this conflicts with our using
-   * Flex Layout. */
-  position: unset;
+.DetailsContainerResizableSidebarWrapper {
+  max-width: 600px;
 }
 
-.DetailsContainer.splitter-layout > .layout-splitter {
-  border-top: 1px solid var(--panel-border-color);
-  border-left: 1px solid var(--panel-border-color);
-  background: var(--panel-background-color);
+/* overriding defaults from ResizableWithSplitter.css */
+.DetailsContainer .resizableWithSplitterSplitter {
+  border-top: 1px solid var(--grey-30);
+  border-left: 1px solid var(--grey-30);
+  background: var(--grey-10); /* Same background as sidebars */
 }
 
-.DetailsContainer.splitter-layout > .layout-splitter:hover {
-  background: var(--panel-background-color);
+.DetailsContainer .resizableWithSplitterSplitter:hover {
+  background: var(--grey-30); /* same as the border above */
 }

src/components/app/DetailsContainer.tsx

@@ -1,13 +1,11 @@
 /* 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/. */
-// React imported for JSX
-import SplitterLayout from 'react-splitter-layout';
 
 import { Details } from './Details';
+import { ResizableWithSplitter } from 'firefox-profiler/components/shared/ResizableWithSplitter';
 import { selectSidebar } from 'firefox-profiler/components/sidebar';
 
-import { invalidatePanelLayout } from 'firefox-profiler/actions/app';
 import { getSelectedTab } from 'firefox-profiler/selectors/url-state';
 import { getIsSidebarOpen } from 'firefox-profiler/selectors/app';
 import explicitConnect from 'firefox-profiler/utils/connect';
@@ -22,39 +20,33 @@ type StateProps = {
   readonly isSidebarOpen: boolean;
 };
 
-type DispatchProps = {
-  readonly invalidatePanelLayout: typeof invalidatePanelLayout;
-};
-
-type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+type Props = ConnectedProps<{}, StateProps, {}>;
 
-function DetailsContainerImpl({
-  selectedTab,
-  isSidebarOpen,
-  invalidatePanelLayout,
-}: Props) {
+function DetailsContainerImpl({ selectedTab, isSidebarOpen }: Props) {
   const Sidebar = selectSidebar(selectedTab);
 
   return (
-    <SplitterLayout
-      customClassName="DetailsContainer"
-      percentage
-      secondaryInitialSize={20}
-      onDragEnd={invalidatePanelLayout}
-    >
+    <div className="DetailsContainer">
       <Details />
-      {Sidebar && isSidebarOpen ? <Sidebar /> : null}
-    </SplitterLayout>
+      {Sidebar && isSidebarOpen ? (
+        <ResizableWithSplitter
+          className="DetailsContainerResizableSidebarWrapper"
+          percent={false}
+          splitterPosition="start"
+          controlledProperty="width"
+          initialSize="300px"
+        >
+          <Sidebar />
+        </ResizableWithSplitter>
+      ) : null}
+    </div>
   );
 }
 
-export const DetailsContainer = explicitConnect<{}, StateProps, DispatchProps>({
+export const DetailsContainer = explicitConnect<{}, StateProps, {}>({
   mapStateToProps: (state) => ({
     selectedTab: getSelectedTab(state),
     isSidebarOpen: getIsSidebarOpen(state),
   }),
-  mapDispatchToProps: {
-    invalidatePanelLayout,
-  },
   component: DetailsContainerImpl,
 });

src/components/app/ProfileViewer.css

@@ -47,6 +47,10 @@
 }
 
 .profileViewer {
+  /* Create a stacking context, so that the KeyboardShortcut can overlay the profile
+     viewer. */
+  position: relative;
+  z-index: 0;
   display: flex;
   min-width: 0; /* This allows Flexible Layout to shrink this further than its min-content */
   flex: 1;
@@ -109,21 +113,6 @@
   }
 }
 
-.profileViewerSplitter {
-  /* Position relative for layout. Don't set z-index here to avoid creating a
-     stacking context that would trap the context menu below the screenshot hover.
-     This allows both the screenshot hover and context menu to be compared
-     at the .profileViewer level, ensuring the context menu appears on top. */
-  position: relative;
-}
-
-.profileViewerSplitter > .layout-pane:not(.layout-pane-primary) {
-  display: flex;
-  overflow: hidden;
-  max-height: var(--profile-viewer-splitter-max-height);
-  flex-direction: column;
-}
-
 .profileViewerTopBar {
   display: flex;
   height: 24px;