report: support narrow screens (#6857)

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -45,6 +45,8 @@ class ReportUIFeatures {
     /** @type {HTMLElement} */
     this.headerBackground; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
+    this.headerContent; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
     this.lighthouseIcon; // eslint-disable-line no-unused-expressions
     /** @type {!HTMLElement} */
     this.scoresWrapperBg; // eslint-disable-line no-unused-expressions
@@ -105,7 +107,7 @@ class ReportUIFeatures {
   }
 
   _setupMediaQueryListeners() {
-    const mediaQuery = self.matchMedia('(max-width: 600px)');
+    const mediaQuery = self.matchMedia('(max-width: 500px)');
     mediaQuery.addListener(this.onMediaQueryChange);
     // Ensure the handler is called on init
     this.onMediaQueryChange(mediaQuery);
@@ -134,6 +136,7 @@ class ReportUIFeatures {
     this.headerOverlap = parseFloat(computedMarginTop || '0');
     this.headerSticky = this._dom.find('.lh-header-sticky', this._document);
     this.headerBackground = this._dom.find('.lh-header-bg', this._document);
+    this.headerContent = this._dom.find('.lh-header', this._document);
     this.lighthouseIcon = this._dom.find('.lh-lighthouse', this._document);
     this.scoresWrapperBg = this._dom.find('.lh-scores-wrapper__background', this._document);
     this.productInfo = this._dom.find('.lh-product-info', this._document);
@@ -226,9 +229,9 @@ class ReportUIFeatures {
     this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`;
     this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`;
     this.lighthouseIcon.style.transform =
-      `translate3d(var(--report-width-half),` +
-      ` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`;
-    this.lighthouseIcon.style.opacity = (1 - scrollPct).toString();
+      `translate3d(0,` +
+      `-${scrollPct * this.headerOverlap * -1}px, 0) scale(${1 - scrollPct})`;
+    this.headerContent.style.opacity = (1 - scrollPct).toString();
 
     // Switch up the score background & shadows
     this.scoresWrapperBg.style.opacity = (1 - scrollPct).toString();

lighthouse-core/report/html/report-styles.css

@@ -54,6 +54,7 @@
   --metric-timeline-rule-color: #b3b3b3;
   --display-value-gray: hsl(216, 5%, 39%);
   --report-width: calc(60 * var(--body-font-size));
+  --report-min-width: 400px;
   /* Edge doesn't support calc(var(calc())) */
   --report-width-half: calc(30 * var(--body-font-size));
   --report-header-height: 161px;
@@ -711,6 +712,7 @@
   position: sticky;
   top: 0;
   width: 100%;
+  min-width: var(--report-min-width);
   z-index: 2;
   will-change: transform;
 }
@@ -728,6 +730,7 @@
 
 .lh-report {
   background-color: #fff;
+  min-width: var(--report-min-width);
 }
 @media screen {
   .lh-report {
@@ -915,7 +918,6 @@
   .lh-report {
     margin-left: 0;
     width: 100%;
-    min-width: 400px;
   }
 }
 

lighthouse-core/report/html/templates.html

@@ -166,9 +166,8 @@ limitations under the License.
     }
     .lh-lighthouse {
       position: absolute;
-      top: var(--report-header-height);
-      right: 50%;
-      transform: translate3d(var(--report-width-half), -100%, 0);
+      bottom: -4px;
+      right: 0;
       opacity: 1;
       transform-origin: bottom right;
       will-change: transform, opacity;
@@ -187,6 +186,7 @@ limitations under the License.
       color: var(--report-header-color);
       z-index: 1;
       position: relative;
+      max-width: 60%;
     }
     .lh-metadata__results {
       text-overflow: ellipsis;
@@ -354,6 +354,10 @@ limitations under the License.
     } */
   </style>
   <div class="lh-header-bg"></div>
+  
+
+  <div class="lh-header-container">
+    <div class="lh-header">
       <div class="lh-lighthouse">
         <svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
           <defs>
@@ -361,8 +365,8 @@ limitations under the License.
               <path d="M-56-54h284v202H-56z" fill="#fff"></path>
             </mask>
             <linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse">
-          <stop offset="0" stop-color="#f1f3f4"/>
-          <stop offset="1" stop-color="#fff"/>
+              <stop offset="0" stop-color="#FFFFFF00"/>
+              <stop offset="1" stop-color="#FFFFFF"/>
             </linearGradient>
           </defs>
           <g mask="url(#a)">
@@ -381,8 +385,6 @@ limitations under the License.
         </svg>
       </div>
 
-  <div class="lh-header-container">
-    <div class="lh-header">
       <div class="lh-metadata">
         <div class="lh-metadata__results"><a href="" class="lh-metadata__url" target="_blank" rel="noopener"></a></div>
         <div class="lh-config">