chore: trace viewer actions sidebar (#6083)

src/web/components/splitView.css

@@ -17,14 +17,25 @@
 .split-view {
   display: flex;
   flex: auto;
-  flex-direction: column;
   position: relative;
 }
 
+.split-view.vertical {
+  flex-direction: column;
+}
+
+.split-view.vertical.sidebar-first {
+  flex-direction: column-reverse;
+}
+
 .split-view.horizontal {
   flex-direction: row;
 }
 
+.split-view.horizontal.sidebar-first {
+  flex-direction: row-reverse;
+}
+
 .split-view-main {
   display: flex;
   flex: auto;
@@ -33,7 +44,6 @@
 .split-view-sidebar {
   display: flex;
   flex: none;
-  border-top: 1px solid #ddd;
 }
 
 .split-view.vertical > .split-view-sidebar {
@@ -44,6 +54,14 @@
   border-left: 1px solid #ddd;
 }
 
+.split-view.vertical.sidebar-first > .split-view-sidebar {
+  border-bottom: 1px solid #ddd;
+}
+
+.split-view.horizontal.sidebar-first > .split-view-sidebar {
+  border-right: 1px solid #ddd;
+}
+
 .split-view-resizer {
   position: absolute;
   z-index: 100;

src/web/components/splitView.tsx

@@ -19,7 +19,8 @@ import * as React from 'react';
 
 export interface SplitViewProps {
   sidebarSize: number,
-  sidebarHidden?: boolean
+  sidebarHidden?: boolean,
+  sidebarIsFirst?: boolean,
   orientation?: 'vertical' | 'horizontal',
 }
 
@@ -27,7 +28,8 @@ const kMinSidebarSize = 50;
 
 export const SplitView: React.FC<SplitViewProps> = ({
   sidebarSize,
-  sidebarHidden,
+  sidebarHidden = false,
+  sidebarIsFirst = false,
   orientation = 'vertical',
   children
 }) => {
@@ -36,10 +38,20 @@ export const SplitView: React.FC<SplitViewProps> = ({
 
   const childrenArray = React.Children.toArray(children);
   document.body.style.userSelect = resizing ? 'none' : 'inherit';
-  const resizerStyle = orientation === 'vertical' ?
+  let resizerStyle: any = {};
-    {bottom: resizing ? 0 : size - 4, top: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 } :
+  if (orientation === 'vertical') {
-    {right: resizing ? 0 : size - 4, left: resizing ? 0 : undefined, width: resizing ? 'initial' : 8 };
+    if (sidebarIsFirst)
-  return <div className={'split-view ' + orientation}>
+      resizerStyle = { top: resizing ? 0 : size - 4, bottom: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 };
+    else
+      resizerStyle = { bottom: resizing ? 0 : size - 4, top: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 };
+} else {
+    if (sidebarIsFirst)
+      resizerStyle = { left: resizing ? 0 : size - 4, right: resizing ? 0 : undefined, width: resizing ? 'initial' : 8 };
+    else
+      resizerStyle = { right: resizing ? 0 : size - 4, left: resizing ? 0 : undefined, width: resizing ? 'initial' : 8 };
+  }
+
+  return <div className={'split-view ' + orientation + (sidebarIsFirst ? ' sidebar-first' : '') }>
     <div className='split-view-main'>{childrenArray[0]}</div>
     { !sidebarHidden && <div style={{flexBasis: size}} className='split-view-sidebar'>{childrenArray[1]}</div> }
     { !sidebarHidden && <div
@@ -48,10 +60,13 @@ export const SplitView: React.FC<SplitViewProps> = ({
       onMouseDown={event => setResizing({ offset: orientation === 'vertical' ? event.clientY : event.clientX, size })}
       onMouseUp={() => setResizing(null)}
       onMouseMove={event => {
-        if (!event.buttons)
+        if (!event.buttons) {
           setResizing(null);
-        else if (resizing)
+        } else if (resizing) {
-          setSize(Math.max(kMinSidebarSize, resizing.size - (orientation === 'vertical' ? event.clientY : event.clientX) + resizing.offset));
+          const clientOffset = orientation === 'vertical' ? event.clientY : event.clientX;
+          const resizingPosition = sidebarIsFirst ? clientOffset : resizing.size - clientOffset + resizing.offset;
+          setSize(Math.max(kMinSidebarSize, resizingPosition));
+        }
       }}
     ></div> }
   </div>;

src/web/traceViewer/ui/actionList.css

@@ -15,14 +15,13 @@
 */
 
 .action-list {
-  width: var(--sidebar-width);
   display: flex;
   flex-direction: column;
-  flex: none;
+  flex: auto;
   position: relative;
-  padding: 0 var(--layout-gap);
   user-select: none;
   color: #555;
+  overflow: auto;
 }
 
 .action-entry {
@@ -49,6 +48,7 @@
 }
 
 .action-title {
+  flex: none;
   display: inline;
   white-space: nowrap;
 }
@@ -62,12 +62,14 @@
 
 .action-selector {
   display: inline;
+  flex: none;
   padding-left: 5px;
   color: var(--orange);
 }
 
 .action-url {
   display: inline;
+  flex: none;
   padding-left: 5px;
   color: var(--blue);
 }

src/web/traceViewer/ui/networkResourceDetails.css

@@ -61,7 +61,6 @@
 }
 
 .network-request-details {
-  font-family: var(--monospace-font);
   width: 100%;
 }
 

src/web/traceViewer/ui/workbench.tsx

@@ -72,19 +72,7 @@ export const Workbench: React.FunctionComponent<{
         onTimeSelected={time => setSelectedTime(time)}
       />
     </div>
-    <div className='hbox'>
+    <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
-      <div style={{ display: 'flex', flex: 'none', overflow: 'auto', borderRight: '1px solid #ddd' }}>
-        <ActionList
-          actions={actions}
-          selectedAction={selectedAction}
-          highlightedAction={highlightedAction}
-          onSelected={action => {
-            setSelectedAction(action);
-            setSelectedTime(undefined);
-          }}
-          onHighlighted={action => setHighlightedAction(action)}
-        />
-      </div>
       <SplitView sidebarSize={250}>
         <SnapshotTab actionEntry={selectedAction} snapshotSize={snapshotSize} selection={snapshotSelection} boundaries={boundaries} />
         <TabbedPane tabs={[
@@ -92,8 +80,17 @@ export const Workbench: React.FunctionComponent<{
           { id: 'source', title: 'Source', render: () => <SourceTab actionEntry={selectedAction} /> },
           { id: 'network', title: 'Network', render: () => <NetworkTab actionEntry={selectedAction} /> },
         ]}/>
-
       </SplitView>
-    </div>
+      <ActionList
+        actions={actions}
+        selectedAction={selectedAction}
+        highlightedAction={highlightedAction}
+        onSelected={action => {
+          setSelectedAction(action);
+          setSelectedTime(undefined);
+        }}
+        onHighlighted={action => setHighlightedAction(action)}
+      />
+    </SplitView>
   </div>;
 };