@lhci/server - npm Package Compare versions

Comparing version 0.1.1-alpha.1 to 0.1.1-alpha.2

dist/build-view.f16be167.js

@@ -219,3 +219,3 @@ // modules are defined as an array
 exports.Pill = Pill;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","./pill.css":"components/pill.css"}],"routes/build-view/build-hash-selector.jsx":[function(require,module,exports) {
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","./pill.css":"components/pill.css"}],"components/lhr-viewer-link.jsx":[function(require,module,exports) {
 "use strict";
@@ -226,2 +226,54 @@
 });
+exports.LhrViewerLink = void 0;
+
+var _preact = require("preact");
+
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @param {{children: string|JSX.Element|JSX.Element[], lhr: LH.Result}} props */
+const LhrViewerLink = props => {
+  const {
+    children,
+    lhr
+  } = props;
+  return (0, _preact.h)("span", {
+    onClick: evt => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      const VIEWER_ORIGIN = 'https://googlechrome.github.io'; // Chrome doesn't allow us to immediately postMessage to a popup right
+      // after it's created. Normally, we could also listen for the popup window's
+      // load event, however it is cross-domain and won't fire. Instead, listen
+      // for a message from the target app saying "I'm open".
+
+      window.addEventListener('message', function msgHandler(messageEvent) {
+        if (messageEvent.origin !== VIEWER_ORIGIN) {
+          return;
+        }
+
+        if (popup && messageEvent.data.opened) {
+          popup.postMessage({
+            lhresults: lhr
+          }, VIEWER_ORIGIN);
+          window.removeEventListener('message', msgHandler);
+        }
+      }); // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
+
+      const fetchTime = lhr.fetchTime;
+      const windowName = `${lhr.lighthouseVersion}-${lhr.requestedUrl}-${fetchTime}`;
+      const popup = window.open(`${VIEWER_ORIGIN}/lighthouse/viewer`, windowName);
+    }
+  }, children);
+};
+
+exports.LhrViewerLink = LhrViewerLink;
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js"}],"routes/build-view/build-hash-selector.jsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BuildHashSelector = void 0;
@@ -231,2 +283,4 @@
 
+var _ = _interopRequireWildcard(require("@lhci/utils/src/lodash.js"));
+
 require("./build-hash-selector.css");
@@ -240,6 +294,10 @@
 
+var _lhrViewerLink = require("../../components/lhr-viewer-link");
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /**
- * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', branchBuilds: Array<LHCI.ServerCommand.Build>, baseBuilds: Array<LHCI.ServerCommand.Build>}} props
+ * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', branchBuilds: Array<LHCI.ServerCommand.Build>, baseBuilds: Array<LHCI.ServerCommand.Build>, lhr: LH.Result, baseLhr?: LH.Result}} props
  */
@@ -252,3 +310,5 @@ const BuildHashSelector_ = props => {
   } = props;
-  const builds = branchBuilds.concat(baseBuilds).sort((a, b) => new Date(b.runAt).getTime() - new Date(a.runAt).getTime());
+
+  const builds = _.uniqBy(branchBuilds.concat(baseBuilds).sort((a, b) => new Date(b.runAt).getTime() - new Date(a.runAt).getTime()), build => build.id);
+
   return (0, _preact.h)("div", {
@@ -275,3 +335,4 @@ className: "container"
       onClick: () => {
-        if (isCompareBranch || isBaseBranch) return;
+        if (isCompareBranch && props.selector === 'compare') return;
+        if (isBaseBranch && props.selector === 'base') return;
         const url = new URL(window.location.href);
@@ -298,3 +359,11 @@
       className: "build-hash-selector__links"
-    }, (0, _preact.h)("a", {
+    }, isCompareBranch && (0, _preact.h)("a", {
+      href: "#"
+    }, (0, _preact.h)(_lhrViewerLink.LhrViewerLink, {
+      lhr: props.lhr
+    }, "Report")), !isCompareBranch && isBaseBranch && props.baseLhr && (0, _preact.h)("a", {
+      href: "#"
+    }, (0, _preact.h)(_lhrViewerLink.LhrViewerLink, {
+      lhr: props.baseLhr
+    }, "Report")), (0, _preact.h)("a", {
       href: build.externalBuildUrl
@@ -307,3 +376,3 @@ }, "Travis"), (0, _preact.h)("a", {
 /**
- * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare'}} props
+ * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', lhr: LH.Result, baseLhr?: LH.Result}} props
  */
@@ -328,3 +397,3 @@
 exports.BuildHashSelector = BuildHashSelector;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-hash-selector.css":"routes/build-view/build-hash-selector.css","../../hooks/use-api-data":"hooks/use-api-data.jsx","../../components/async-loader":"components/async-loader.jsx","../../components/pill":"components/pill.jsx"}],"routes/build-view/build-selector-pill.css":[function(require,module,exports) {
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","@lhci/utils/src/lodash.js":"../../../../node_modules/@lhci/utils/src/lodash.js","./build-hash-selector.css":"routes/build-view/build-hash-selector.css","../../hooks/use-api-data":"hooks/use-api-data.jsx","../../components/async-loader":"components/async-loader.jsx","../../components/pill":"components/pill.jsx","../../components/lhr-viewer-link":"components/lhr-viewer-link.jsx"}],"routes/build-view/build-selector-pill.css":[function(require,module,exports) {
 var reloadCSS = require('_css_loader');
@@ -386,3 +455,5 @@
     build: props.build
-  }) : (0, _preact.h)("span", null, "None"));
+  }) : (0, _preact.h)("span", {
+    className: "build-selector-pill__message"
+  }, "None"));
 };
@@ -426,22 +497,3 @@
 }
-},{"preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js"}],"routes/build-view/audit-detail-pane.jsx":[function(require,module,exports) {
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AuditDetailPane = void 0;
-
-var _preact = require("preact");
-
-require("./audit-detail-pane.css");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _usePreviousValue = require("../../hooks/use-previous-value");
-
-var _hooks = require("preact/hooks");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+},{"preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js"}],"../../../../node_modules/@lhci/utils/src/audit-diff-finder.js":[function(require,module,exports) {
 /**
@@ -452,143 +504,2 @@ * @license Copyright 2019 Google Inc. All Rights Reserved.
  */
-
-/** @param {{audit: LH.AuditResult, baseAudit?: LH.AuditResult, key?: string}} props */
-const Audit = props => {
-  return (0, _preact.h)("div", {
-    id: `audit-detail-pane-audit--${props.audit.id}`,
-    className: (0, _clsx.default)('audit-detail-pane__audit')
-  }, (0, _preact.h)("div", {
-    className: "audit-detail-pane__audit-title"
-  }, props.audit.title), (0, _preact.h)("div", {
-    className: "audit-detail-pane__audit-description"
-  }, props.audit.description), (0, _preact.h)("div", {
-    className: "audit-detail-pane__audit-details"
-  }, JSON.stringify(props.audit.details)));
-};
-/**
- * @param {{selectedAuditId: string, setSelectedAuditId: (id: string|null) => void, audits: Array<LH.AuditResult>, baseLhr?: LH.Result}} props
- */
-
-
-const AuditDetailPane = props => {
-  /** @type {import('preact').Ref<HTMLElement|undefined>} */
-  const paneElementRef = (0, _hooks.useRef)(undefined);
-  const previouslySelectedAuditId = (0, _usePreviousValue.usePreviousValue)(props.selectedAuditId); // Scroll to the selected audit *when it changes*
-
-  (0, _hooks.useEffect)(() => {
-    const auditId = props.selectedAuditId;
-    const paneElement = paneElementRef.current;
-    if (!paneElement || !auditId || auditId === previouslySelectedAuditId) return;
-    const childElement = paneElement.querySelector(`#audit-detail-pane-audit--${auditId}`);
-    if (!childElement || !(childElement instanceof HTMLElement)) return;
-    paneElement.scrollTo(0, childElement.offsetTop);
-  }, [props.selectedAuditId, previouslySelectedAuditId]);
-  return (0, _preact.h)("div", {
-    className: "audit-detail-pane",
-    ref: el => paneElementRef.current = el
-  }, (0, _preact.h)("div", {
-    className: "audit-detail-pane__close",
-    onClick: () => props.setSelectedAuditId(null)
-  }, "x"), props.audits.map(audit => {
-    if (!audit.id) return undefined;
-    const id = audit.id;
-    const baseAudit = props.baseLhr ? props.baseLhr.audits[id] : undefined;
-    return (0, _preact.h)(Audit, {
-      key: id,
-      audit: { ...audit,
-        id
-      },
-      baseAudit: baseAudit && { ...baseAudit,
-        id
-      }
-    });
-  }));
-};
-
-exports.AuditDetailPane = AuditDetailPane;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./audit-detail-pane.css":"routes/build-view/audit-detail-pane.css","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","../../hooks/use-previous-value":"hooks/use-previous-value.jsx","preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js"}],"routes/build-view/build-score-comparison.css":[function(require,module,exports) {
-var reloadCSS = require('_css_loader');
-
-module.hot.dispose(reloadCSS);
-module.hot.accept(reloadCSS);
-},{"_css_loader":"../../../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"routes/build-view/build-score-comparison.jsx":[function(require,module,exports) {
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BuildScoreComparison = void 0;
-
-var _preact = require("preact");
-
-require("./build-score-comparison.css");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * @license Copyright 2019 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
-
-/** @param {number} score */
-const renderScore = score => Math.round(score * 100);
-/**
- * @param {{build: LHCI.ServerCommand.Build | null, lhr?: LH.Result, baseLhr?: LH.Result}} props
- */
-
-
-const BuildScoreComparison = props => {
-  const {
-    lhr,
-    baseLhr
-  } = props;
-  if (!lhr) return null;
-  return (0, _preact.h)("div", {
-    className: "build-score-comparison"
-  }, Object.keys(lhr.categories).map(id => {
-    const category = lhr.categories[id];
-    let diff = null;
-    let classes = '';
-
-    if (baseLhr) {
-      const baseCategory = baseLhr.categories[id];
-
-      if (baseCategory) {
-        const delta = renderScore(category.score - baseCategory.score);
-        classes = (0, _clsx.default)({
-          'build-score-comparison-item--improvement': delta > 0,
-          'build-score-comparison-item--regression': delta < 0,
-          'build-score-comparison-item--neutral': delta === 0
-        });
-        diff = (0, _preact.h)("div", {
-          className: (0, _clsx.default)('build-score-comparison-item__delta')
-        }, delta < 0 ? delta : `+${delta}`);
-      }
-    }
-
-    return (0, _preact.h)("div", {
-      key: id,
-      className: (0, _clsx.default)('build-score-comparison-item', classes)
-    }, (0, _preact.h)("div", {
-      className: "build-score-comparison-item__score"
-    }, renderScore(category.score)), (0, _preact.h)("div", {
-      className: "build-score-comparison-item__label"
-    }, category.title), diff);
-  }));
-};
-
-exports.BuildScoreComparison = BuildScoreComparison;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-score-comparison.css":"routes/build-view/build-score-comparison.css","clsx":"../../../../node_modules/clsx/dist/clsx.m.js"}],"routes/build-view/audit-group.css":[function(require,module,exports) {
-var reloadCSS = require('_css_loader');
-
-module.hot.dispose(reloadCSS);
-module.hot.accept(reloadCSS);
-},{"_css_loader":"../../../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"../../../../node_modules/@lhci/utils/src/audit-diff-finder.js":[function(require,module,exports) {
-/**
- * @license Copyright 2019 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
 'use strict';
@@ -857,3 +768,3 @@
 
-},{"./lodash.js":"../../../../node_modules/@lhci/utils/src/lodash.js"}],"routes/build-view/audit-group.jsx":[function(require,module,exports) {
+},{"./lodash.js":"../../../../node_modules/@lhci/utils/src/lodash.js"}],"routes/build-view/audit-detail-pane.jsx":[function(require,module,exports) {
 "use strict";
@@ -864,2 +775,165 @@
 });
+exports.AuditDetailPane = void 0;
+
+var _preact = require("preact");
+
+require("./audit-detail-pane.css");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _usePreviousValue = require("../../hooks/use-previous-value.jsx");
+
+var _hooks = require("preact/hooks");
+
+var _auditDiffFinder = require("@lhci/utils/src/audit-diff-finder.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @param {{audit: LH.AuditResult, baseAudit?: LH.AuditResult, key?: string}} props */
+const Audit = props => {
+  const diff = props.baseAudit ? (0, _auditDiffFinder.findAuditDiffs)(props.audit, props.baseAudit) : [];
+  return (0, _preact.h)("div", {
+    id: `audit-detail-pane-audit--${props.audit.id}`,
+    className: (0, _clsx.default)('audit-detail-pane__audit')
+  }, (0, _preact.h)("div", {
+    className: "audit-detail-pane__audit-title"
+  }, props.audit.title), (0, _preact.h)("div", {
+    className: "audit-detail-pane__audit-description"
+  }, props.audit.description), (0, _preact.h)("div", {
+    className: "audit-detail-pane__audit-details"
+  }, (0, _preact.h)("pre", null, JSON.stringify(diff, null, 2))));
+};
+/**
+ * @param {{selectedAuditId: string, setSelectedAuditId: (id: string|null) => void, audits: Array<LH.AuditResult>, baseLhr?: LH.Result}} props
+ */
+
+
+const AuditDetailPane = props => {
+  /** @type {import('preact').Ref<HTMLElement|undefined>} */
+  const paneElementRef = (0, _hooks.useRef)(undefined);
+  const previouslySelectedAuditId = (0, _usePreviousValue.usePreviousValue)(props.selectedAuditId); // Scroll to the selected audit *when it changes*
+
+  (0, _hooks.useEffect)(() => {
+    const auditId = props.selectedAuditId;
+    const paneElement = paneElementRef.current;
+    if (!paneElement || !auditId || auditId === previouslySelectedAuditId) return;
+    const childElement = paneElement.querySelector(`#audit-detail-pane-audit--${auditId}`);
+    if (!childElement || !(childElement instanceof HTMLElement)) return;
+    paneElement.scrollTo(0, childElement.offsetTop);
+  }, [props.selectedAuditId, previouslySelectedAuditId]);
+  return (0, _preact.h)("div", {
+    className: "audit-detail-pane",
+    ref: el => paneElementRef.current = el
+  }, (0, _preact.h)("div", {
+    className: "audit-detail-pane__close",
+    onClick: () => props.setSelectedAuditId(null)
+  }, "x"), props.audits.map(audit => {
+    if (!audit.id) return undefined;
+    const id = audit.id;
+    const baseAudit = props.baseLhr ? props.baseLhr.audits[id] : undefined;
+    return (0, _preact.h)(Audit, {
+      key: id,
+      audit: { ...audit,
+        id
+      },
+      baseAudit: baseAudit && { ...baseAudit,
+        id
+      }
+    });
+  }));
+};
+
+exports.AuditDetailPane = AuditDetailPane;
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./audit-detail-pane.css":"routes/build-view/audit-detail-pane.css","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","../../hooks/use-previous-value.jsx":"hooks/use-previous-value.jsx","preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js","@lhci/utils/src/audit-diff-finder.js":"../../../../node_modules/@lhci/utils/src/audit-diff-finder.js"}],"routes/build-view/build-score-comparison.css":[function(require,module,exports) {
+var reloadCSS = require('_css_loader');
+
+module.hot.dispose(reloadCSS);
+module.hot.accept(reloadCSS);
+},{"_css_loader":"../../../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"routes/build-view/build-score-comparison.jsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BuildScoreComparison = void 0;
+
+var _preact = require("preact");
+
+require("./build-score-comparison.css");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+/** @param {number} score */
+const renderScore = score => Math.round(score * 100);
+/**
+ * @param {{build: LHCI.ServerCommand.Build | null, lhr?: LH.Result, baseLhr?: LH.Result}} props
+ */
+
+
+const BuildScoreComparison = props => {
+  const {
+    lhr,
+    baseLhr
+  } = props;
+  if (!lhr) return null;
+  return (0, _preact.h)("div", {
+    className: "build-score-comparison"
+  }, Object.keys(lhr.categories).map(id => {
+    const category = lhr.categories[id];
+    let diff = null;
+    let classes = '';
+
+    if (baseLhr) {
+      const baseCategory = baseLhr.categories[id];
+
+      if (baseCategory) {
+        const delta = renderScore(category.score - baseCategory.score);
+        classes = (0, _clsx.default)({
+          'build-score-comparison-item--improvement': delta > 0,
+          'build-score-comparison-item--regression': delta < 0,
+          'build-score-comparison-item--neutral': delta === 0
+        });
+        diff = (0, _preact.h)("div", {
+          className: (0, _clsx.default)('build-score-comparison-item__delta')
+        }, delta < 0 ? delta : `+${delta}`);
+      }
+    }
+
+    return (0, _preact.h)("div", {
+      key: id,
+      className: (0, _clsx.default)('build-score-comparison-item', classes)
+    }, (0, _preact.h)("div", {
+      className: "build-score-comparison-item__score"
+    }, renderScore(category.score)), (0, _preact.h)("div", {
+      className: "build-score-comparison-item__label"
+    }, category.title), diff);
+  }));
+};
+
+exports.BuildScoreComparison = BuildScoreComparison;
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-score-comparison.css":"routes/build-view/build-score-comparison.css","clsx":"../../../../node_modules/clsx/dist/clsx.m.js"}],"routes/build-view/audit-group.css":[function(require,module,exports) {
+var reloadCSS = require('_css_loader');
+
+module.hot.dispose(reloadCSS);
+module.hot.accept(reloadCSS);
+},{"_css_loader":"../../../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"routes/build-view/audit-group.jsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.AuditGroup = void 0;
@@ -1104,3 +1178,10 @@
 exports.BuildViewLegend = BuildViewLegend;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-view-legend.css":"routes/build-view/build-view-legend.css"}],"routes/build-view/build-view.jsx":[function(require,module,exports) {
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-view-legend.css":"routes/build-view/build-view-legend.css"}],"routes/build-view/build-view-empty.css":[function(require,module,exports) {
+var reloadCSS = require('_css_loader');
+
+module.hot.dispose(reloadCSS);
+module.hot.accept(reloadCSS);
+},{"_css_loader":"../../../../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"logo.svg":[function(require,module,exports) {
+module.exports = "/app/logo.86ce68ea.svg";
+},{}],"routes/build-view/build-view-empty.jsx":[function(require,module,exports) {
 "use strict";
@@ -1111,2 +1192,39 @@
 });
+exports.BuildViewEmpty = void 0;
+
+var _preact = require("preact");
+
+require("./build-view-empty.css");
+
+var _lhrViewerLink = require("../../components/lhr-viewer-link");
+
+/**
+ * @license Copyright 2019 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+// @ts-ignore - tsc doesn't know how to handle static assets
+const logoSvgPath = require('../../logo.svg');
+/** @param {{lhr: LH.Result, baseLhr?: LH.Result}} props */
+
+
+const BuildViewEmpty = props => {
+  return (0, _preact.h)("div", {
+    className: "build-view__empty"
+  }, (0, _preact.h)("p", null, "No differences found!"), (0, _preact.h)(_lhrViewerLink.LhrViewerLink, {
+    lhr: props.lhr
+  }, (0, _preact.h)("div", {
+    className: "build-view-empty__lhr-link"
+  }, (0, _preact.h)("img", {
+    src: logoSvgPath
+  }), (0, _preact.h)("div", null, "Open Report"))));
+};
+
+exports.BuildViewEmpty = BuildViewEmpty;
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","./build-view-empty.css":"routes/build-view/build-view-empty.css","../../components/lhr-viewer-link":"components/lhr-viewer-link.jsx","../../logo.svg":"logo.svg"}],"routes/build-view/build-view.jsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BuildView = void 0;
@@ -1146,2 +1264,4 @@
 
+var _buildViewEmpty = require("./build-view-empty");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1299,3 +1419,5 @@
     ancestorBuild: props.ancestorBuild,
-    selector: openBuildHash
+    selector: openBuildHash,
+    lhr: lhr,
+    baseLhr: baseLhr
   }) || (0, _preact.h)(_preact.Fragment, null), selectedAuditId && (0, _preact.h)(_auditDetailPane.AuditDetailPane, {
@@ -1319,3 +1441,3 @@ selectedAuditId: selectedAuditId,
     className: "container"
-  }, (0, _preact.h)(_buildViewLegend.BuildViewLegend, null), (0, _preact.h)(AuditGroups, {
+  }, (0, _preact.h)(_buildViewLegend.BuildViewLegend, null), auditGroups.length ? (0, _preact.h)(AuditGroups, {
     auditGroups: auditGroups,
@@ -1325,2 +1447,4 @@ baseLhr: baseLhr,
     setSelectedAuditId: setAuditId
+  }) : (0, _preact.h)(_buildViewEmpty.BuildViewEmpty, {
+    lhr: lhr
   }))));
@@ -1357,3 +1481,3 @@ };
 exports.BuildView = BuildView;
-},{"preact":"../../../../node_modules/preact/dist/preact.module.js","@lhci/utils/src/lodash":"../../../../node_modules/@lhci/utils/src/lodash.js","preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js","../../components/async-loader":"components/async-loader.jsx","../../components/dropdown":"components/dropdown.jsx","../../hooks/use-api-data":"hooks/use-api-data.jsx","./build-hash-selector":"routes/build-view/build-hash-selector.jsx","./build-selector-pill":"routes/build-view/build-selector-pill.jsx","./audit-detail-pane":"routes/build-view/audit-detail-pane.jsx","../../layout/page":"layout/page.jsx","./build-score-comparison":"routes/build-view/build-score-comparison.jsx","./audit-group":"routes/build-view/audit-group.jsx","./build-view.css":"routes/build-view/build-view.css","./build-view-legend":"routes/build-view/build-view-legend.jsx","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","@lhci/utils/src/audit-diff-finder":"../../../../node_modules/@lhci/utils/src/audit-diff-finder.js"}],"../../../../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
+},{"preact":"../../../../node_modules/preact/dist/preact.module.js","@lhci/utils/src/lodash":"../../../../node_modules/@lhci/utils/src/lodash.js","preact/hooks":"../../../../node_modules/preact/hooks/dist/hooks.module.js","../../components/async-loader":"components/async-loader.jsx","../../components/dropdown":"components/dropdown.jsx","../../hooks/use-api-data":"hooks/use-api-data.jsx","./build-hash-selector":"routes/build-view/build-hash-selector.jsx","./build-selector-pill":"routes/build-view/build-selector-pill.jsx","./audit-detail-pane":"routes/build-view/audit-detail-pane.jsx","../../layout/page":"layout/page.jsx","./build-score-comparison":"routes/build-view/build-score-comparison.jsx","./audit-group":"routes/build-view/audit-group.jsx","./build-view.css":"routes/build-view/build-view.css","./build-view-legend":"routes/build-view/build-view-legend.jsx","clsx":"../../../../node_modules/clsx/dist/clsx.m.js","@lhci/utils/src/audit-diff-finder":"../../../../node_modules/@lhci/utils/src/audit-diff-finder.js","./build-view-empty":"routes/build-view/build-view-empty.jsx"}],"../../../../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
 var global = arguments[3];
@@ -1386,3 +1510,3 @@ var OVERLAY_ID = '__parcel__error__overlay__';
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50476" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "52929" + '/');
 
@@ -1389,0 +1513,0 @@ ws.onmessage = function (event) {

dist/project-list.0b0c9fb2.js

@@ -199,3 +199,3 @@ // modules are defined as an array
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50476" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "52929" + '/');
 
@@ -202,0 +202,0 @@ ws.onmessage = function (event) {

package.json

 {
   "name": "@lhci/server",
   "main": "./src/server.js",
-  "version": "0.1.1-alpha.1",
+  "version": "0.1.1-alpha.2",
   "license": "Apache-2.0",
@@ -20,3 +20,3 @@ "repository": {
   "dependencies": {
-    "@lhci/utils": "^0.1.1-alpha.1",
+    "@lhci/utils": "^0.1.1-alpha.2",
     "body-parser": "^1.18.3",
@@ -39,3 +39,3 @@ "express": "^4.16.4",
   },
-  "gitHead": "651c74d332ca547cfec80a4a835bac8feb3a7a93"
+  "gitHead": "88b6f085e30e871155454a2969e6e80d9f235f1a"
 }

src/ui/layout/page-header.jsx

@@ -11,3 +11,3 @@ /**
 import {useProject} from '../hooks/use-api-data';
-import {Router} from 'preact-router';
+import {Router, Link} from 'preact-router';
 
@@ -30,3 +30,5 @@ /** @param {{children?: Array<VNode> | VNode, setIsSidebarOpen: (isOpen: boolean) => void, matches: {projectId?: string}}} props */
           <div className="page-header__current-project">
-            {(selectedProject && selectedProject.name) || 'Lighthouse CI'}
+            <Link href={selectedProject ? `/app/projects/${selectedProject.id}` : '#'}>
+              {(selectedProject && selectedProject.name) || 'Lighthouse CI'}
+            </Link>
           </div>
@@ -33,0 +35,0 @@ </div>

src/ui/routes/build-view/audit-detail-pane.jsx

@@ -10,7 +10,9 @@ /**
 import clsx from 'clsx';
-import {usePreviousValue} from '../../hooks/use-previous-value';
+import {usePreviousValue} from '../../hooks/use-previous-value.jsx';
 import {useEffect, useRef} from 'preact/hooks';
+import {findAuditDiffs} from '@lhci/utils/src/audit-diff-finder.js';
 
 /** @param {{audit: LH.AuditResult, baseAudit?: LH.AuditResult, key?: string}} props */
 const Audit = props => {
+  const diff = props.baseAudit ? findAuditDiffs(props.audit, props.baseAudit) : [];
   return (
@@ -23,3 +25,5 @@ <div
       <div className="audit-detail-pane__audit-description">{props.audit.description}</div>
-      <div className="audit-detail-pane__audit-details">{JSON.stringify(props.audit.details)}</div>
+      <div className="audit-detail-pane__audit-details">
+        <pre>{JSON.stringify(diff, null, 2)}</pre>
+      </div>
     </div>
@@ -26,0 +30,0 @@ );

src/ui/routes/build-view/build-hash-selector.jsx

@@ -8,2 +8,3 @@ /**
 import {h} from 'preact';
+import * as _ from '@lhci/utils/src/lodash.js';
 import './build-hash-selector.css';
@@ -13,11 +14,15 @@ import {useBranchBuilds} from '../../hooks/use-api-data';
 import {Pill} from '../../components/pill';
+import {LhrViewerLink} from '../../components/lhr-viewer-link';
 
 /**
- * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', branchBuilds: Array<LHCI.ServerCommand.Build>, baseBuilds: Array<LHCI.ServerCommand.Build>}} props
+ * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', branchBuilds: Array<LHCI.ServerCommand.Build>, baseBuilds: Array<LHCI.ServerCommand.Build>, lhr: LH.Result, baseLhr?: LH.Result}} props
  */
 const BuildHashSelector_ = props => {
   const {branchBuilds, baseBuilds, ancestorBuild} = props;
-  const builds = branchBuilds
-    .concat(baseBuilds)
-    .sort((a, b) => new Date(b.runAt).getTime() - new Date(a.runAt).getTime());
+  const builds = _.uniqBy(
+    branchBuilds
+      .concat(baseBuilds)
+      .sort((a, b) => new Date(b.runAt).getTime() - new Date(a.runAt).getTime()),
+    build => build.id
+  );
 
@@ -49,3 +54,5 @@ return (
                 onClick={() => {
-                  if (isCompareBranch || isBaseBranch) return;
+                  if (isCompareBranch && props.selector === 'compare') return;
+                  if (isBaseBranch && props.selector === 'base') return;
+
                   const url = new URL(window.location.href);
@@ -69,2 +76,12 @@
               <span className="build-hash-selector__links">
+                {isCompareBranch && (
+                  <a href="#">
+                    <LhrViewerLink lhr={props.lhr}>Report</LhrViewerLink>
+                  </a>
+                )}
+                {!isCompareBranch && isBaseBranch && props.baseLhr && (
+                  <a href="#">
+                    <LhrViewerLink lhr={props.baseLhr}>Report</LhrViewerLink>
+                  </a>
+                )}
                 <a href={build.externalBuildUrl}>Travis</a>
@@ -82,3 +99,3 @@ <a href={build.externalBuildUrl}>GH</a>
 /**
- * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare'}} props
+ * @param {{build: LHCI.ServerCommand.Build, ancestorBuild?: LHCI.ServerCommand.Build | null, selector: 'base'|'compare', lhr: LH.Result, baseLhr?: LH.Result}} props
  */
@@ -85,0 +102,0 @@ export const BuildHashSelector = props => {

src/ui/routes/build-view/build-selector-pill.jsx

@@ -37,5 +37,9 @@ /**
       <div className="build-selector-pill__variant-label">{props.variant}</div>
-      {props.build ? <Selection build={props.build} /> : <span>None</span>}
+      {props.build ? (
+        <Selection build={props.build} />
+      ) : (
+        <span className="build-selector-pill__message">None</span>
+      )}
     </div>
   );
 };

src/ui/routes/build-view/build-view.jsx

@@ -30,2 +30,3 @@ /**
 import {findAuditDiffs, getDiffSeverity} from '@lhci/utils/src/audit-diff-finder';
+import {BuildViewEmpty} from './build-view-empty';
 
@@ -188,2 +189,4 @@ /**
           selector={openBuildHash}
+          lhr={lhr}
+          baseLhr={baseLhr}
         />
@@ -215,8 +218,12 @@ )) || <Fragment />}
           <BuildViewLegend />
-          <AuditGroups
-            auditGroups={auditGroups}
-            baseLhr={baseLhr}
-            selectedAuditId={selectedAuditId}
-            setSelectedAuditId={setAuditId}
-          />
+          {auditGroups.length ? (
+            <AuditGroups
+              auditGroups={auditGroups}
+              baseLhr={baseLhr}
+              selectedAuditId={selectedAuditId}
+              setSelectedAuditId={setAuditId}
+            />
+          ) : (
+            <BuildViewEmpty lhr={lhr} />
+          )}
         </div>
@@ -223,0 +230,0 @@ </div>

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11948399

increased by3.51%

Number of package files

98

increased by12.64%

Lines of code

80384

increased by0.86%

Worsened metrics

Number of low quality alerts

8

increased by33.33%

Number of low supply chain risk alerts

15

increased by36.36%

Dependency changes

• Updated@lhci/utils@^0.1.1-alpha.2