[Deploy] testing mobile UI stuff

src/components/app/Details.css

@@ -1,5 +1,6 @@
 .Details {
   display: flex;
+  overflow: clip;
   flex: auto;
   flex-direction: column;
 }

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"

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);
 }
 

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 {

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,22 +864,21 @@ 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,
           });
         }
       }
 
       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}