refactor(web-ts-results): minor improvements

Use template literals to build `id` strings.

Refactor styles.

Remove unnecessary nesting of tags.

Author: nakrovati

webdriver-ts-results/src/App.css

@@ -24,6 +24,7 @@ select {
   font-size: 14px;
 }
 
+.select-bar {
   background-color: #fafafa;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
@@ -38,10 +39,6 @@ select {
 input + label {
   margin-left: 5px;
 }
-.hspan {
-  display: inline-block;
-  width: 10px;
-}
 
 .panel-body .checkbox {
   margin-top: 5px;
@@ -77,21 +74,6 @@ table.results th {
   padding: 3px;
   border: 1px solid #ddd;
 }
-.top1 {
-  background-color: #63bf7c;
-}
-.top2 {
-  background-color: #d1d580;
-}
-.top3 {
-  background-color: #ffec84;
-}
-.top4 {
-  background-color: #fcaa78;
-}
-.top5 {
-  background-color: #f9696c;
-}
 td {
   text-align: center;
 }
@@ -165,10 +147,10 @@ dd {
 }
 
 .header-row {
+  margin: 20px 0;
   display: flex;
-}
-.header-row > * {
-  align-self: center;
+  align-items: center;
+  gap: 10px;
 }
 
 .error {

webdriver-ts-results/src/App.tsx

@@ -7,17 +7,19 @@ import { SelectionBar } from "./components/selection/SelectionBar";
 const KnownIssuesList = () => {
   return (
     <>
-      <h3>Known issues and notes</h3>
-      {knownIssues.map((issue) => (
-        <dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
-          <dt>
-            <a target="_blank" rel="noopener noreferrer" href={issue.link}>
-              {issue.issue.toFixed()}
-            </a>
-          </dt>
-          <dd>{issue.text}</dd>
-        </dl>
-      ))}
+      <section>
+        <h3>Known issues and notes</h3>
+        {knownIssues.map((issue) => (
+          <dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
+            <dt>
+              <a target="_blank" rel="noopener noreferrer" href={issue.link}>
+                {issue.issue.toFixed()}
+              </a>
+            </dt>
+            <dd>{issue.text}</dd>
+          </dl>
+        ))}
+      </section>
     </>
   );
 };
@@ -56,15 +58,17 @@ const App = () => {
   );
 
   return (
-    <div>
+    <>
       {disclaimer}
       {testEnvironmentInfo}
 
-      <SelectionBar showDurationSelection={false} />
-      <ResultTable type={FrameworkType.KEYED} />
-      <ResultTable type={FrameworkType.NON_KEYED} />
-      <KnownIssuesList></KnownIssuesList>
-    </div>
+      <main>
+        <SelectionBar showDurationSelection={false} />
+        <ResultTable type={FrameworkType.KEYED} />
+        <ResultTable type={FrameworkType.NON_KEYED} />
+        <KnownIssuesList></KnownIssuesList>
+      </main>
+    </>
   );
 };
 

webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorList.tsx

@@ -16,13 +16,13 @@ const BenchmarkSelectorList = ({ benchmarks, isSelected, select }: Props) => {
         <div key={item.id} className="col-md-12">
           <div className="form-check">
             <input
-              id={"inp-" + item.id}
+              id={`inp-${item.id}`}
               className="form-check-input"
               type="checkbox"
               onChange={(evt) => select(item, evt.target.checked)}
               checked={isSelected(item)}
             />
-            <label htmlFor={"inp-" + item.id} className="form-check-label">
+            <label htmlFor={`inp-${item.id}`} className="form-check-label">
               {item.label}
             </label>
           </div>

webdriver-ts-results/src/components/selection/FrameworkSelector/FrameworkSelectorList.tsx

@@ -16,13 +16,13 @@ const FrameworkSelectorList = ({ frameworks, isSelected, select }: Props) => {
         <div key={item.name}>
           <input
             className="form-check-input"
-            id={"inp-" + item.name + "-" + item.type}
+            id={`inp-${item.name}-${item.type}`}
             type="checkbox"
             onChange={(evt) => select(item, evt.target.checked)}
             checked={isSelected(item)}
           />
           <label
-            htmlFor={"inp-" + item.name + "-" + item.type}
+            htmlFor={`inp-${item.name}-${item.type}`}
             className="form-check-label"
           >
             {item.displayname}

webdriver-ts-results/src/components/selection/ModeSelector/DisplayModeSelector.tsx

@@ -10,7 +10,6 @@ const DisplayModeSelector = ({ displayMode, onChange }: Props) => {
   return (
     <>
       <label htmlFor="displayMode">Display mode</label>
-      <div className="hspan" />
       <select
         id="displayMode"
         className="custom-select"

webdriver-ts-results/src/components/selection/ModeSelector/DurationModeSelector.tsx

@@ -12,7 +12,6 @@ const DurationModeSelector = ({ cpuDurationMode, onChange }: Props) => {
       <label htmlFor="durationMode">
         (Experimental) Duration measurement mode
       </label>
-      <div className="hspan" />
       <select
         id="durationMode"
         className="custom-select"

webdriver-ts-results/src/components/selection/SelectionBar.tsx

@@ -12,14 +12,11 @@ export const SelectionBar = ({ showDurationSelection }: Props) => {
   console.log("SelectionBar");
 
   return (
-    <div className="selectBar">
+    <div className="select-bar">
       <div className="header-row">
         <FrameworkSelector />
-        <div className="hspan" />
         <BenchmarkSelector />
-        <div className="hspan" />
         <ModeSelector showDurationSelection={showDurationSelection} />
-        <div className="hspan" />
         <CopyPasteSelection />
       </div>
     </div>