chore: nicer network grid header (#27102)

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

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-.network-request-details {
+.network-request-details-tab {
   width: 100%;
   user-select: text;
   line-height: 24px;
@@ -39,6 +39,21 @@
   font-weight: bold;
 }
 
-.network-request-details .cm-wrapper {
+.network-request-details-tab .cm-wrapper {
   overflow: hidden;
 }
+
+.tab-network .toolbar {
+  margin-top: 3px !important;
+  min-height: 30px !important;
+  background-color: initial !important;
+  border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.tab-network .toolbar::after {
+  box-shadow: none !important;
+}
+ 
+.tab-network .tabbed-pane-tab.selected {
+  font-weight: bold;
+}

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

@@ -30,7 +30,10 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 
   return <TabbedPane
     dataTestId='network-request-details'
-    leftToolbar={[<ToolbarButton icon='arrow-left' title='Back' onClick={onClose}></ToolbarButton>]}
+    leftToolbar={[
+      <ToolbarButton icon='arrow-left' title='Back' onClick={onClose}></ToolbarButton>,
+      <div style={{ width: 30 }}></div>
+    ]}
     rightToolbar={[<ToolbarButton icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
     tabs={[
       {
@@ -75,7 +78,7 @@ const RequestTab: React.FunctionComponent<{
     readResources();
   }, [resource]);
 
-  return <div className='network-request-details'>
+  return <div className='network-request-details-tab'>
     <div className='network-request-details-header'>URL</div>
     <div className='network-request-details-url'>{resource.request.url}</div>
     <div className='network-request-details-header'>Request Headers</div>
@@ -88,7 +91,7 @@ const RequestTab: React.FunctionComponent<{
 const ResponseTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
 }> = ({ resource }) => {
-  return <div className='network-request-details'>
+  return <div className='network-request-details-tab'>
     <div className='network-request-details-header'>Response Headers</div>
     <div className='network-request-details-headers'>{resource.response.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
   </div>;
@@ -121,7 +124,7 @@ const BodyTab: React.FunctionComponent<{
     readResources();
   }, [resource]);
 
-  return <div className='network-request-details'>
+  return <div className='network-request-details-tab'>
     {!resource.response.content._sha1 && <div>Response body is not available for this request.</div>}
     {responseBody && responseBody.dataUrl && <img draggable='false' src={responseBody.dataUrl} />}
     {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} readOnly lineNumbers={true}/>}

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

@@ -68,7 +68,8 @@
 }
 
 .network-request-header {
-  height: 28px;
+  margin-top: 3px;
+  height: 30px;
   border-bottom: 1px solid var(--vscode-panel-border);
   flex: none;
   align-items: center;

packages/web/src/components/tabbedPane.tsx

@@ -59,10 +59,11 @@ export const TabbedPane: React.FunctionComponent<{
       </Toolbar>
       {
         tabs.map(tab => {
+          const className = 'tab-content tab-' + tab.id;
           if (tab.component)
-            return <div key={tab.id} className='tab-content' style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
+            return <div key={tab.id} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
           if (selectedTab === tab.id)
-            return <div key={tab.id} className='tab-content'>{tab.render!()}</div>;
+            return <div key={tab.id} className={className}>{tab.render!()}</div>;
         })
       }
     </div>