report(topbar): fix overflowing url (#9497)

GoogleChrome · Aug 6, 2019 · a53fb14 · a53fb14
1 parent 581c0d2
commit a53fb14
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -77,6 +77,7 @@ class ReportRenderer {
     const el = this._dom.cloneTemplate('#tmpl-lh-topbar', this._templateContext);
     const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-topbar__url', el));
     metadataUrl.href = metadataUrl.textContent = report.finalUrl;
+    metadataUrl.title = report.finalUrl;
     return el;
   }
 

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -245,6 +245,7 @@
       width: var(--topbar-logo-size);
       height: var(--topbar-logo-size);
       user-select: none;
+      flex: none;
     }
     .lh-topbar__logo .shape {
       fill: var(--report-text-color);
@@ -254,6 +255,9 @@
       margin: var(--topbar-padding);
       text-decoration: none;
       color: var(--report-text-color);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
     }
 
     .lh-tools {