Clean up existing metadata formatting and make consistent

packages/html-reporter/src/copyToClipboard.tsx

@@ -39,7 +39,7 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
     });
   }, [value]);
   const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
-  return <button className='copy-icon' aria-label='Copy to clipboard' onClick={handleCopy}>{iconElement}</button>;
+  return <button className='copy-icon' title='Copy to clipboard' aria-label='Copy to clipboard' onClick={handleCopy}>{iconElement}</button>;
 };
 
 type CopyToClipboardContainerProps = CopyToClipboardProps & {

packages/html-reporter/src/metadataView.css

@@ -26,16 +26,43 @@
   margin-top: 8px;
 }
 
+.metadata-view .metadata-section {
+  margin: 8px 10px 8px 32px;
+}
+
+.metadata-view span:not(.copy-button-container),
+.metadata-view a {
+  display: inline-block;
+  line-height: 24px;
+}
+
+.metadata-section {
+  align-items: center;
+}
+
+.metadata-properties > div {
+  height: 24px;
+}
+
+.metadata-properties > div:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
 .metadata-separator {
   height: 1px;
   border-bottom: 1px solid var(--color-border-default);
 }
 
-.metadata-view .copy-value-container {
-  margin-top: -2px;
-}
-
 .git-commit-info a {
   color: var(--color-fg-default);
   font-weight: 600;
 }
+
+.copyable-property {
+  white-space: pre;
+}
+
+.copyable-property > span {
+  display: flex;
+  align-items: center;
+}

packages/html-reporter/src/metadataView.tsx

@@ -31,7 +31,6 @@ export const MetadataContext = React.createContext<MetadataEntries>([]);
 export function MetadataProvider({ metadata, children }: React.PropsWithChildren<{ metadata: Metadata }>) {
   const entries = React.useMemo(() => {
     // TODO: do not plumb actualWorkers through metadata.
-
     return Object.entries(metadata).filter(([key]) => key !== 'actualWorkers');
   }, [metadata]);
 
@@ -88,30 +87,47 @@ const InnerMetadataView = () => {
       <GitCommitInfoView info={gitCommitInfo}/>
       {entries.length > 0 && <div className='metadata-separator' />}
     </>}
-    {entries.map(([key, value]) => {
+    <div className='metadata-section metadata-properties'>
+      {entries.map(([propertyName, value]) => {
       const valueString = typeof value !== 'object' || value === null || value === undefined ? String(value) : JSON.stringify(value);
       const trimmedValue = valueString.length > 1000 ? valueString.slice(0, 1000) + '\u2026' : valueString;
-      return <div className='m-1 ml-5' key={key}>
+        return (
-        <span style={{ fontWeight: 'bold' }} title={key}>{key}</span>
+          <div className='copyable-property'>
+            <CopyToClipboardContainer key={propertyName} value={valueString}>
+              <span style={{ fontWeight: 'bold' }} title={propertyName}>{propertyName}</span>
+              : <span title={trimmedValue}>{linkifyText(trimmedValue)}</span>
+            </CopyToClipboardContainer>
+          </div>
+        );
+        return <div className='m-1 ml-5' style={{  }} key={propertyName}>
+          <span style={{ fontWeight: 'bold' }} title={propertyName}>{propertyName}</span>
         {valueString && <CopyToClipboardContainer value={valueString}>: <span title={trimmedValue}>{linkifyText(trimmedValue)}</span></CopyToClipboardContainer>}
       </div>;
     })}
+    </div>
   </div>;
 };
 
 const GitCommitInfoView: React.FC<{ info: GitCommitInfo }> = ({ info }) => {
   const email = info['revision.email'] ? ` <${info['revision.email']}>` : '';
   const author = `${info['revision.author'] || ''}${email}`;
+  const subject = info['revision.subject'] || '';
   const shortTimestamp = Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(info['revision.timestamp']);
   const longTimestamp = Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(info['revision.timestamp']);
-  return <div className='hbox pl-4 pr-2 git-commit-info' style={{ alignItems: 'center' }}>
+  return <div className='hbox git-commit-info metadata-section'>
-    <div className='vbox'>
+    <div className='vbox metadata-properties'>
-      <a className='m-2' href={info['revision.link']} target='_blank' rel='noopener noreferrer'>
+      <div>
-        <span title={info['revision.subject'] || ''}>{info['revision.subject'] || ''}</span>
+        {info['revision.link'] ? (
-      </a>
+          <a href={info['revision.link']} target='_blank' rel='noopener noreferrer' title={subject}>
-      <div className='hbox m-2 mt-1'>
+            {subject}
-        <div className='mr-1'>{author}</div>
+          </a>
-        <div title={longTimestamp}> on {shortTimestamp}</div>
+        ) : <span title={subject}>
+          {subject}
+        </span>}
+      </div>
+      <div className='hbox'>
+        <span className='mr-1'>{author}</span>
+        <span title={longTimestamp}> on {shortTimestamp}</span>
         {info['ci.link'] && (
           <>
             <span className='mx-2'>·</span>
@@ -126,9 +142,10 @@ const GitCommitInfoView: React.FC<{ info: GitCommitInfo }> = ({ info }) => {
         )}
       </div>
     </div>
-    {!!info['revision.link'] && <a href={info['revision.link']} target='_blank' rel='noopener noreferrer'>
+    {!!info['revision.link'] ? (
-      <span title='View commit details'>{info['revision.id']?.slice(0, 7) || 'unknown'}</span>
+      <a href={info['revision.link']} target='_blank' rel='noopener noreferrer' title='View commit details'>
-    </a>}
+        {info['revision.id']?.slice(0, 7) || 'unknown'}
-    {!info['revision.link'] && !!info['revision.id'] && <span>{info['revision.id'].slice(0, 7)}</span>}
+      </a>
+    ) : !!info['revision.id'] && <span>{info['revision.id'].slice(0, 7)}</span>}
   </div>;
 };