fix(server): update numeric diff preview design

GoogleChrome · Oct 2, 2019 · 6eaf47d · 6eaf47d
1 parent 1227f6d
commit 6eaf47d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.css b/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.css
@@ -57,8 +57,11 @@
   top: 0;
   bottom: 0;
   padding: 0 calc(var(--base-spacing) / 2);
+
   font-size: calc(var(--base-font-size) * 3 / 4);
   line-height: calc(var(--base-font-size) * 3 / 4);
+  white-space: nowrap;
+  font-weight: var(--medium-font-weight);
 
   display: flex;
   flex-direction: row;
@@ -68,6 +71,7 @@
 .audit-numeric-diff__left-label,
 .audit-numeric-diff__right-label {
   width: 60px;
+  color: var(--secondary-text-color);
 }
 
 .audit-numeric-diff__left-label {

diff --git a/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.jsx b/packages/server/src/ui/routes/build-view/audit-list/numeric-diff.jsx
@@ -19,19 +19,24 @@ const toNearestRoundNumber = (x, direction) => {
   return fn(x / 2500) * 2500;
 };
 
-/** @param {number} x */
-const toDisplay = x => {
-  let value = x;
-  let fractionDigits = 1;
-  if (Math.abs(x) >= 100) {
-    fractionDigits = 0;
-    value = Math.round(value * 10) / 10;
+/** @param {number} x @param {{asDelta?: boolean, withSuffix?: boolean}} options*/
+const toDisplay = (x, options = {}) => {
+  let value = Math.round(x);
+  let fractionDigits = 0;
+  let suffix = ' ms';
+
+  if (Math.abs(value) >= 50) {
+    value /= 1000;
+    fractionDigits = 1;
+    suffix = ' s';
   }
 
-  return value.toLocaleString(undefined, {
+  const string = value.toLocaleString(undefined, {
     minimumFractionDigits: fractionDigits,
     maximumFractionDigits: fractionDigits,
   });
+
+  return `${options.asDelta && value >= 0 ? '+' : ''}${string}${options.withSuffix ? suffix : ''}`;
 };
 
 /** @param {{diff: LHCI.NumericAuditDiff}} props */
@@ -77,7 +82,7 @@ export const NumericDiff = props => {
               className="audit-numeric-diff__delta-label"
               style={{[minValueIsCurrentValue ? 'right' : 'left']: '100%'}}
             >
-              {toDisplay(delta)}
+              {toDisplay(delta, {asDelta: true, withSuffix: true})}
             </div>
           </div>
         </div>

diff --git a/types/lighthouse.d.ts b/types/lighthouse.d.ts
@@ -27,6 +27,7 @@ declare global {
       title?: string;
       description?: string;
       score: number | null;
+      displayValue?: string;
       numericValue?: number;
       details?: {
         type: string;