fix(inspector): hide drawer when recording (#5548)

src/web/components/splitView.tsx

@@ -19,30 +19,35 @@ import * as React from 'react';
 
 export interface SplitViewProps {
   sidebarSize: number,
+  sidebarHidden?: boolean
 }
 
 const kMinSidebarSize = 50;
 
 export const SplitView: React.FC<SplitViewProps> = ({
   sidebarSize,
+  sidebarHidden,
   children
 }) => {
   let [size, setSize] = React.useState<number>(Math.max(kMinSidebarSize, sidebarSize));
   const [resizing, setResizing] = React.useState<{ offsetY: number, size: number } | null>(null);
 
   const childrenArray = React.Children.toArray(children);
+  document.body.style.userSelect = resizing ? 'none' : 'inherit';
   return <div className='split-view'>
     <div className='split-view-main'>{childrenArray[0]}</div>
-    <div style={{flexBasis: size}} className='split-view-sidebar'>{childrenArray[1]}</div>
+    { !sidebarHidden && <div style={{flexBasis: size}} className='split-view-sidebar'>{childrenArray[1]}</div> }
-    <div
+    { !sidebarHidden && <div
       style={{bottom: resizing ? 0 : size - 4, top: resizing ? 0 : undefined, height: resizing ? 'initial' : 8 }}
       className='split-view-resizer'
       onMouseDown={event => setResizing({ offsetY: event.clientY, size })}
       onMouseUp={() => setResizing(null)}
       onMouseMove={event => {
-        if (resizing)
+        if (!event.buttons)
+          setResizing(null);
+        else if (resizing)
           setSize(Math.max(kMinSidebarSize, resizing.size - event.clientY + resizing.offsetY));
       }}
-    ></div>
+    ></div> }
   </div>;
 };

src/web/components/toolbar.stories.tsx

@@ -32,7 +32,7 @@ const Template: Story<ToolbarProps> = () => <Toolbar>
 
 export const Primary = Template.bind({});
 
-const AllTemplate: Story = () => <Toolbar lineWrap={true}>
+const AllTemplate: Story = () => <Toolbar>
   {[
     'add', 'plus', 'gist-new', 'repo-create', 'lightbulb', 'light-bulb', 'repo', 'repo-delete', 'gist-fork', 'repo-forked',
     'git-pull-request', 'git-pull-request-abandoned', 'record-keys', 'keyboard', 'tag', 'tag-add', 'tag-remove', 'person',

src/web/components/toolbar.tsx

@@ -18,13 +18,10 @@ import './toolbar.css';
 import * as React from 'react';
 
 export interface ToolbarProps {
-  lineWrap?: boolean
 }
 
 export const Toolbar: React.FC<ToolbarProps> = ({
-  lineWrap = false,
   children
 }) => {
-  const className = lineWrap ? 'toolbar toolbar-linewrap' : 'toolbar';
+  return <div className='toolbar'>{children}</div>;
-  return <div className={className}>{children}</div>;
 };

src/web/components/toolbarButton.css

@@ -22,7 +22,7 @@
   padding: 0;
   margin-left: 10px;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 
@@ -31,7 +31,7 @@
   cursor: default;
 }
 
-.toolbar-button:not(.disabled):not(.toggled):hover {
+.toolbar-button:not(.disabled):hover {
   color: #555;
 }
 

src/web/recorder/recorder.css

@@ -38,7 +38,7 @@
   margin-left: 16px;
 }
 
-.recorder .toolbar-button.toggled.question {
+.recorder .toolbar-button.toggled.microscope {
   color: #12a3ff;
 }
 

src/web/recorder/recorder.tsx

@@ -109,11 +109,11 @@ export const Recorder: React.FC<RecorderProps> = ({
         window.dispatch({ event: 'clear' }).catch(() => {});
       }}></ToolbarButton>
     </Toolbar>
-    <SplitView sidebarSize={200}>
+    <SplitView sidebarSize={200} sidebarHidden={mode === 'recording'}>
       <SourceView text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine}></SourceView>
       <div className='vbox'>
         <Toolbar>
-          <ToolbarButton icon='question' title='Explore' toggled={mode == 'inspecting'} onClick={() => {
+          <ToolbarButton icon='microscope' title='Explore' toggled={mode == 'inspecting'} onClick={() => {
             window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' }}).catch(() => { });
           }}>Explore</ToolbarButton>
           <input ref={selectorInputRef} className='selector-input' placeholder='Playwright Selector' value={selector} disabled={mode !== 'none'} onChange={event => {