cherry-pick(#21826): chore: update margins to align

packages/trace-viewer/src/ui/snapshotTab.css

@@ -24,6 +24,10 @@
   overflow: hidden;
 }
 
+.snapshot-tab .toolbar {
+  background-color: var(--vscode-sideBar-background);
+}
+
 .snapshot-controls {
   flex: none;
   background-color: var(--vscode-sideBar-background);

packages/trace-viewer/src/ui/snapshotTab.tsx

@@ -150,7 +150,7 @@ export const SnapshotTab: React.FunctionComponent<{
         window.open(popoutUrl || '', '_blank');
       }}></ToolbarButton>
     </Toolbar>
-    {pickerVisible && <Toolbar>
+    {pickerVisible && <Toolbar noMinHeight={true}>
       <ToolbarButton icon='microscope' title='Pick locator' disabled={!popoutUrl} toggled={isInspecting} onClick={() => {
         setIsInspecting(!isInspecting);
       }}></ToolbarButton>

packages/trace-viewer/src/ui/watchMode.css

@@ -47,6 +47,7 @@
   user-select: none;
 }
 
+.list-view-entry.selected .watch-mode-list-item-time,
 .list-view-entry.highlighted .watch-mode-list-item-time {
   display: none;
 }
@@ -67,7 +68,7 @@
 
 .watch-mode-sidebar img {
   flex: none;
-  margin-left: 4px;
+  margin-left: 6px;
   width: 24px;
   height: 24px;
 }
@@ -107,6 +108,11 @@
   flex: none;
   display: flex;
   flex-direction: column;
+  margin: 2px 0;
+}
+
+.filter-list {
+  padding: 0 10px 10px 10px;
 }
 
 .filter-title,
@@ -123,15 +129,18 @@
 }
 
 .filter-summary {
-  line-height: 21px;
+  line-height: 24px;
-  margin-top: 2px;
+  margin-left: 24px;
-  margin-left: 20px;
 }
 
 .filter-summary .filter-label {
   margin-left: 5px;
 }
 
+.filter-entry {
+  line-height: 24px;
+}
+
 .filter-entry label {
   display: flex;
   align-items: center;

packages/trace-viewer/src/ui/watchMode.tsx

@@ -162,7 +162,7 @@ export const WatchModeView: React.FC<{}> = ({
         </div>
       </div>
       <div className='vbox watch-mode-sidebar'>
-        <Toolbar noShadow={true}>
+        <Toolbar noShadow={true} noMinHeight={true}>
           <img src='icon-32x32.png' />
           <div className='section-title'>Playwright</div>
           <ToolbarButton icon='color-mode' title='Toggle color mode' onClick={() => toggleTheme()} />
@@ -238,40 +238,43 @@ const FiltersView: React.FC<{
           if (e.key === 'Enter')
             runTests();
         }} />}>
-      {<div className='filter-title' title={statusLine} onClick={() => setExpanded(false)}><span className='filter-label'>Status:</span> {statusLine}</div>}
-      {[...statusFilters.entries()].map(([status, value]) => {
-        return <div className='filter-entry'>
-          <label>
-            <input type='checkbox' checked={value} onClick={() => {
-              const copy = new Map(statusFilters);
-              copy.set(status, !copy.get(status));
-              setStatusFilters(copy);
-            }}/>
-            <div>{status}</div>
-          </label>
-        </div>;
-      })}
-
-      {<div className='filter-title' title={projectsLine}><span className='filter-label'>Projects:</span> {projectsLine}</div>}
-      {[...projectFilters.entries()].map(([projectName, value]) => {
-        return <div className='filter-entry'>
-          <label>
-            <input type='checkbox' checked={value} onClick={() => {
-              const copy = new Map(projectFilters);
-              copy.set(projectName, !copy.get(projectName));
-              setProjectFilters(copy);
-              const configFile = testModel?.config?.configFile;
-              if (configFile)
-                settings.setObject(configFile + ':projects', [...copy.entries()].filter(([_, v]) => v).map(([k]) => k));
-            }}/>
-            <div>{projectName}</div>
-          </label>
-        </div>;
-      })}
     </Expandable>
-    {!expanded && <div className='filter-summary' title={'Status: ' + statusLine + '\nProjects: ' + projectsLine} onClick={() => setExpanded(true)}>
+    <div className='filter-summary' title={'Status: ' + statusLine + '\nProjects: ' + projectsLine} onClick={() => setExpanded(!expanded)}>
       <span className='filter-label'>Status:</span> {statusLine}
       <span className='filter-label'>Projects:</span> {projectsLine}
+    </div>
+    {expanded && <div className='hbox' style={{ marginLeft: 14 }}>
+      <div className='filter-list'>
+        {[...statusFilters.entries()].map(([status, value]) => {
+          return <div className='filter-entry'>
+            <label>
+              <input type='checkbox' checked={value} onClick={() => {
+                const copy = new Map(statusFilters);
+                copy.set(status, !copy.get(status));
+                setStatusFilters(copy);
+              }}/>
+              <div>{status}</div>
+            </label>
+          </div>;
+        })}
+      </div>
+      <div className='filter-list'>
+        {[...projectFilters.entries()].map(([projectName, value]) => {
+          return <div className='filter-entry'>
+            <label>
+              <input type='checkbox' checked={value} onClick={() => {
+                const copy = new Map(projectFilters);
+                copy.set(projectName, !copy.get(projectName));
+                setProjectFilters(copy);
+                const configFile = testModel?.config?.configFile;
+                if (configFile)
+                  settings.setObject(configFile + ':projects', [...copy.entries()].filter(([_, v]) => v).map(([k]) => k));
+              }}/>
+              <div>{projectName}</div>
+            </label>
+          </div>;
+        })}
+      </div>
     </div>}
   </div>;
 };
@@ -404,15 +407,17 @@ const TestList: React.FC<{
       return <div className='hbox watch-mode-list-item'>
         <div className='watch-mode-list-item-title'>{treeItem.title}</div>
         {!!treeItem.duration && <div className='watch-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
-        <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
+        <Toolbar noMinHeight={true} noShadow={true}>
-        <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>
+          <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
-        {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
+          <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>
-          if (watchedTreeIds.value.has(treeItem.id))
+          {!watchAll && <ToolbarButton icon='eye' title='Watch' onClick={() => {
-            watchedTreeIds.value.delete(treeItem.id);
+            if (watchedTreeIds.value.has(treeItem.id))
-          else
+              watchedTreeIds.value.delete(treeItem.id);
-            watchedTreeIds.value.add(treeItem.id);
+            else
-          setWatchedTreeIds({ ...watchedTreeIds });
+              watchedTreeIds.value.add(treeItem.id);
-        }} toggled={watchedTreeIds.value.has(treeItem.id)}></ToolbarButton>}
+            setWatchedTreeIds({ ...watchedTreeIds });
+          }} toggled={watchedTreeIds.value.has(treeItem.id)}></ToolbarButton>}
+        </Toolbar>
       </div>;
     }}
     icon={treeItem => {

packages/web/src/common.css

@@ -145,6 +145,10 @@ body.dark-mode ::-webkit-scrollbar-track:hover {
   animation: spin 1s infinite linear;
 }
 
+::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+}
+
 @keyframes spin {
   100% {
     transform: rotate(360deg);

packages/web/src/components/tabbedPane.css

@@ -20,6 +20,10 @@
   overflow: hidden;
 }
 
+.tabbed-pane .toolbar {
+  background-color: var(--vscode-sideBar-background);
+}
+
 .tabbed-pane .tab-content {
   display: flex;
   flex: auto;
@@ -28,7 +32,6 @@
 
 .tabbed-pane-tab {
   padding: 2px 10px 0 10px;
-  margin-right: 4px;
   cursor: pointer;
   display: flex;
   flex: none;

packages/web/src/components/toolbar.css

@@ -17,12 +17,11 @@
 .toolbar {
   position: relative;
   display: flex;
-  background-color: var(--vscode-sideBar-background);
   color: var(--vscode-sideBarTitle-foreground);
   min-height: 35px;
   align-items: center;
   flex: none;
-  padding-right: 2px;
+  padding-right: 4px;
 }
 
 .toolbar:after {

packages/web/src/components/toolbarButton.css

@@ -21,7 +21,6 @@
   color: var(--vscode-sideBarTitle-foreground);
   background: transparent;
   padding: 4px;
-  margin: 0 2px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;