From 712a20fa49ce17c0395a42cbc12269df67baf9dc Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Thu, 24 Jul 2025 14:14:27 -0400
Subject: [PATCH 1/3] Remove unintended gaps on small screens.

On small screens, the top bar was overflowing to the right, making the entire
document scrollable, which lead to unintended dark blue areas appearing.

As a quick fix, make the bar itself scrollable.

Also put a minimum size on the profile name button and make sure its edit icon
isn't squished.

And prevent scrolling the contents of .Details, for example from a single overflowing
pixel.
---
 src/components/app/Details.css       | 1 +
 src/components/app/ProfileName.css   | 2 ++
 src/components/app/ProfileViewer.css | 2 ++
 3 files changed, 5 insertions(+)

diff --git a/src/components/app/Details.css b/src/components/app/Details.css
index d7f8bb4ef2..e62d2ddd6b 100644
--- a/src/components/app/Details.css
+++ b/src/components/app/Details.css
@@ -1,5 +1,6 @@
 .Details {
   display: flex;
+  overflow: clip;
   flex: auto;
   flex-direction: column;
 }
diff --git a/src/components/app/ProfileName.css b/src/components/app/ProfileName.css
index 4959794d6e..f229366b22 100644
--- a/src/components/app/ProfileName.css
+++ b/src/components/app/ProfileName.css
@@ -16,6 +16,7 @@
 
 .profileNameButton {
   overflow: hidden;
+  min-width: 80px;
   padding: 0 9px;
   font-weight: 700;
   margin-inline-end: 5px;
@@ -24,6 +25,7 @@
 }
 
 .profileNameButton::before {
+  flex-shrink: 0;
   background-image: url(firefox-profiler-res/img/svg/edit-name-profiler.svg);
 }
 
diff --git a/src/components/app/ProfileViewer.css b/src/components/app/ProfileViewer.css
index e59a7ccdca..ec50405f7c 100644
--- a/src/components/app/ProfileViewer.css
+++ b/src/components/app/ProfileViewer.css
@@ -113,6 +113,8 @@
   border-bottom: 1px solid var(--grey-30);
   margin: 0;
   background: var(--grey-10);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
 .profileViewerSpacer {

From 2fea726a170c661bd562e0803ea648f0077a482f Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Thu, 24 Jul 2025 14:31:25 -0400
Subject: [PATCH 2/3] Keep the sidebar toggle button visible regardless of the
 selected tab.

Small fix for the following issue:

1. Open the profiler UI on a small screen.
2. Select the call tree tab (which has a sidebar toggle button), and close the sidebar if its open.
3. Scroll the tab bar to the right so that you can see the Network tab.
4. Select the Marker Chart tab.

Before this fix, step 4 would remove the sidebar button and make the tapped tab
change positions, causing an odd visual jump.
---
 src/components/app/Details.js | 52 +++++++++++++++++------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/app/Details.js b/src/components/app/Details.js
index 56c5c77b68..25859bf48b 100644
--- a/src/components/app/Details.js
+++ b/src/components/app/Details.js
@@ -86,32 +86,32 @@ class ProfileViewerImpl extends PureComponent<Props> {
             visibleTabs={visibleTabs}
             onSelectTab={this._onSelectTab}
           />
-          {hasSidebar ? (
-            <Localized
-              id={
-                isSidebarOpen
-                  ? 'Details--close-sidebar-button'
-                  : 'Details--open-sidebar-button'
-              }
-              attrs={{ title: true }}
-              vars={{ isSidebarOpen: isSidebarOpen }}
-            >
-              <button
-                className={classNames(
-                  'sidebar-open-close-button',
-                  'photon-button',
-                  'photon-button-ghost',
-                  {
-                    'sidebar-open-close-button-isopen': isSidebarOpen,
-                    'sidebar-open-close-button-isclosed': !isSidebarOpen,
-                  }
-                )}
-                title={isSidebarOpen ? 'Close the sidebar' : 'Open the sidebar'}
-                type="button"
-                onClick={this._onClickSidebarButton}
-              />
-            </Localized>
-          ) : null}
+
+          <Localized
+            id={
+              isSidebarOpen
+                ? 'Details--close-sidebar-button'
+                : 'Details--open-sidebar-button'
+            }
+            attrs={{ title: true }}
+            vars={{ isSidebarOpen: isSidebarOpen }}
+          >
+            <button
+              className={classNames(
+                'sidebar-open-close-button',
+                'photon-button',
+                'photon-button-ghost',
+                {
+                  'sidebar-open-close-button-isopen': isSidebarOpen,
+                  'sidebar-open-close-button-isclosed': !isSidebarOpen,
+                }
+              )}
+              title={isSidebarOpen ? 'Close the sidebar' : 'Open the sidebar'}
+              type="button"
+              disabled={!hasSidebar}
+              onClick={this._onClickSidebarButton}
+            />
+          </Localized>
         </div>
         <Localized
           id="Details--error-boundary-message"

From ab24d8edb5e46c20eb323aead6bccf6cfffcafa3 Mon Sep 17 00:00:00 2001
From: Markus Stange <mstange.moz@gmail.com>
Date: Thu, 24 Jul 2025 14:37:21 -0400
Subject: [PATCH 3/3] Use pointer events in Viewport.

---
 src/components/shared/chart/Viewport.js | 79 ++++++++++++++++++++-----
 1 file changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/components/shared/chart/Viewport.js b/src/components/shared/chart/Viewport.js
index b4269bf92e..3806cf2a9d 100644
--- a/src/components/shared/chart/Viewport.js
+++ b/src/components/shared/chart/Viewport.js
@@ -428,7 +428,7 @@ export const withChartViewport: WithChartViewport<*, *> =
       //
       // [1] https://developer.chrome.com/blog/scrolling-intervention-2/
       // [2] https://bugzilla.mozilla.org/show_bug.cgi?id=1526725
-      _mouseWheelListener = (event: WheelEvent) => {
+      _pointerWheelListener = (event: WheelEvent) => {
         // We handle the wheel event, so disable the browser's handling, such
         // as back/forward swiping or scrolling.
         event.preventDefault();
@@ -586,19 +586,62 @@ export const withChartViewport: WithChartViewport<*, *> =
         );
       };
 
-      _mouseDownListener = (event: SyntheticMouseEvent<>) => {
+      _pointerDownListener = (event: SyntheticPointerEvent<>) => {
         event.preventDefault();
-        if (this._container) {
-          this._container.focus();
-        }
 
-        window.addEventListener('mousemove', this._mouseMoveListener, true);
-        window.addEventListener('mouseup', this._mouseUpListener, true);
+        const container = this._container;
+        if (container) {
+          container.focus();
+          container.setPointerCapture((event.pointerId:any));
+          container.addEventListener(
+            'pointermove',
+            this._pointerMoveListener,
+            true
+          );
+          container.addEventListener(
+            'pointerup',
+            this._pointerUpListener,
+            true
+          );
+          container.addEventListener(
+            'pointercancel',
+            this._pointerUpListener,
+            true
+          );
+        }
       };
 
-      _mouseMoveListener = (event: MouseEvent) => {
+      _removePointerListeners() {
+        const container = this._container;
+        if (container) {
+          container.removeEventListener(
+            'pointermove',
+            this._pointerMoveListener,
+            true
+          );
+          container.removeEventListener(
+            'pointerup',
+            this._pointerUpListener,
+            true
+          );
+          container.removeEventListener(
+            'pointercancel',
+            this._pointerUpListener,
+            true
+          );
+        }
+      }
+
+      _pointerMoveListener = (event: PointerEvent) => {
         event.preventDefault();
 
+        if (!event.isPrimary) {
+          // If two (or more) fingers are dragging, ignore everything but the
+          // primary, so that our delta computation below doesn't get confused.
+          // TODO: Implement pinch zooming
+          return;
+        }
+
         let { _dragX: dragX, _dragY: dragY } = this;
         if (!this.state.isDragging) {
           dragX = event.clientX;
@@ -799,10 +842,14 @@ export const withChartViewport: WithChartViewport<*, *> =
         }
       };
 
-      _mouseUpListener = (event: MouseEvent) => {
+      _pointerUpListener = (event: PointerEvent) => {
         event.preventDefault();
-        window.removeEventListener('mousemove', this._mouseMoveListener, true);
-        window.removeEventListener('mouseup', this._mouseUpListener, true);
+        if (!event.isPrimary) {
+          // Keep dragging if the primary pointer is still down.
+          return;
+        }
+
+        this._removePointerListeners();
         this.setState({
           isDragging: false,
         });
@@ -817,7 +864,7 @@ export const withChartViewport: WithChartViewport<*, *> =
         if (this._container) {
           const container = this._container;
           getResizeObserverWrapper().subscribe(container, this._setSize);
-          container.addEventListener('wheel', this._mouseWheelListener, {
+          container.addEventListener('wheel', this._pointerWheelListener, {
             passive: false,
           });
         }
@@ -825,14 +872,13 @@ export const withChartViewport: WithChartViewport<*, *> =
 
       componentWillUnmount() {
         window.removeEventListener('resize', this._setSizeNextFrame, false);
-        window.removeEventListener('mousemove', this._mouseMoveListener, true);
-        window.removeEventListener('mouseup', this._mouseUpListener, true);
         const container = this._container;
         if (container) {
           getResizeObserverWrapper().unsubscribe(container, this._setSize);
-          container.removeEventListener('wheel', this._mouseWheelListener, {
+          container.removeEventListener('wheel', this._pointerWheelListener, {
             passive: false,
           });
+          this._removePointerListeners();
         }
       }
 
@@ -882,7 +928,8 @@ export const withChartViewport: WithChartViewport<*, *> =
         return (
           <div
             className={viewportClassName}
-            onMouseDown={this._mouseDownListener}
+            style={{ 'touch-action': 'none' }}
+            onPointerDown={this._pointerDownListener}
             onKeyDown={this._keyDownListener}
             onKeyUp={this._keyUpListener}
             onBlur={this._onBlur}