From 096ddab972063a2348a96ea56c596e03602f2fa6 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 22 Feb 2021 15:35:38 -0800
Subject: [PATCH] fix(inspector): hide drawer when recording (#5548)

---
 src/web/components/splitView.tsx       | 13 +++++++++----
 src/web/components/toolbar.stories.tsx |  2 +-
 src/web/components/toolbar.tsx         |  5 +----
 src/web/components/toolbarButton.css   |  4 ++--
 src/web/recorder/recorder.css          |  2 +-
 src/web/recorder/recorder.tsx          |  4 ++--
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/web/components/splitView.tsx b/src/web/components/splitView.tsx
index 842023a235934..23fcd62c1f309 100644
--- a/src/web/components/splitView.tsx
+++ b/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>
-    <div
+    { !sidebarHidden && <div style={{flexBasis: size}} className='split-view-sidebar'>{childrenArray[1]}</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>;
 };
diff --git a/src/web/components/toolbar.stories.tsx b/src/web/components/toolbar.stories.tsx
index 1e91d762d0dbe..8367ac26e837c 100644
--- a/src/web/components/toolbar.stories.tsx
+++ b/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',
diff --git a/src/web/components/toolbar.tsx b/src/web/components/toolbar.tsx
index 72b886202c888..b0be23ffd309b 100644
--- a/src/web/components/toolbar.tsx
+++ b/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={className}>{children}</div>;
+  return <div className='toolbar'>{children}</div>;
 };
diff --git a/src/web/components/toolbarButton.css b/src/web/components/toolbarButton.css
index 39bf148a5b2f1..e6839cedf8030 100644
--- a/src/web/components/toolbarButton.css
+++ b/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;
 }
 
diff --git a/src/web/recorder/recorder.css b/src/web/recorder/recorder.css
index c2e06b3824171..8e38eee293cee 100644
--- a/src/web/recorder/recorder.css
+++ b/src/web/recorder/recorder.css
@@ -38,7 +38,7 @@
   margin-left: 16px;
 }
 
-.recorder .toolbar-button.toggled.question {
+.recorder .toolbar-button.toggled.microscope {
   color: #12a3ff;
 }
 
diff --git a/src/web/recorder/recorder.tsx b/src/web/recorder/recorder.tsx
index 5bb764d865809..fb63210522bdc 100644
--- a/src/web/recorder/recorder.tsx
+++ b/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 => {