add color to interop totals in mobile sections

Author: DanielRyanSmith

webapp/components/interop-dashboard.js

@@ -545,7 +545,10 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
                         <td>
                           <div class="card-header-mobile">
                             <a href$="[[getTestsURL(rowName, stable)]]">[[getRowInfo(rowName, 'description')]]</a>
-                            <span class="interop-score-mobile">[[getInteropScoreForFeature(rowName, stable)]]</span>
+                            <span
+                              class="interop-score-mobile"
+                              style$="[[_getScoreStyle(rowName, stable)]]"
+                            >[[getInteropScoreForFeature(rowName, stable)]]</span>
                           </div>
                         </td>
                         <template is="dom-repeat" items="{{getYearProp('browserInfo')}}" as="browserInfo">
@@ -659,10 +662,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return {
       year: String,
       embedded: Boolean,
-      stable: {
-        type: Boolean,
-        observer: '_stableChanged',
-      },
+      stable: Boolean,
       feature: String,
       features: {
         type: Array,
@@ -768,33 +768,50 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     afterNextRender(this, this.addSortEvents);
   }
 
-  _stableChanged() {
-    this.updateSummaryScores();
-  }
+    calculateColor(score) {
+    const gradient = [
+      // Red.
+      { scale: 0, color: [250, 0, 0] },
+      // Orange.
+      { scale: 33.33, color: [250, 125, 0] },
+      // Yellow.
+      { scale: 66.67, color: [220, 220, 0] },
+      // Green.
+      { scale: 100, color: [0, 160, 0] },
+    ];
 
-  async updateSummaryScores() {
-    const scoreElements = this.shadowRoot.querySelectorAll('.interop-score-mobile');
-    const scores = this.stable ? this.scores.stable : this.scores.experimental;
-    const summaryFeatureName = this.dataManager.getYearProp('summaryFeatureName');
-    console.log(this.scores);
-    // If the elements have not rendered yet, don't update the scores.
-    if ((!this.isMobileScoresView && scoreElements.length !== scores.length) ||
-        (this.isMobileScoresView && scoreElements.length !== scores.length + 1)) {
-      return;
+    let color1, color2;
+    for (let i = 1; i < gradient.length; i++) {
+      if (score <= gradient[i].scale) {
+        color1 = gradient[i - 1];
+        color2 = gradient[i];
+        break;
+      }
     }
-    // // Update interop summary number first.
-    // this.updateSummaryScore(scoreElements[0], scores[scores.length - 1][summaryFeatureName]);
-    // // Update the rest of the browser scores.
-    // for (let i = 1; i < scores.length; i++) {
-    //   this.updateSummaryScore(scoreElements[i], scores[i - 1][summaryFeatureName]);
-    // }
-
-    // // Update investigation summary separately.
-    // if (this.shouldDisplayInvestigationNumber()) {
-    //   const investigationNumber = this.shadowRoot.querySelector('#investigationNumber');
-    //   this.updateSummaryScore(
-    //     investigationNumber, this.dataManager.getYearProp('investigationTotalScore'));
-    // }
+    const colorWeight = ((score - color1.scale) / (color2.scale - color1.scale));
+    const color = [
+      Math.round(color1.color[0] * (1 - colorWeight) + color2.color[0] * colorWeight),
+      Math.round(color1.color[1] * (1 - colorWeight) + color2.color[1] * colorWeight),
+      Math.round(color1.color[2] * (1 - colorWeight) + color2.color[2] * colorWeight),
+    ];
+
+    return [
+      `rgb(${color[0]}, ${color[1]}, ${color[2]})`,
+      `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.15)`,
+    ];
+  }
+
+  /**
+   * Generates a complete CSS style string for a score badge.
+   * @param {number} score The numerical score.
+   * @return {string} A CSS style string.
+   */
+  _getScoreStyle(feature, _stable) {
+    console.log('getting here?');
+    const interopIndex = this.dataManager.getYearProp('numBrowsers');
+    const score = this.getNumericalBrowserScoreByFeature(interopIndex, feature);
+    const colors = this.calculateColor(score);
+    return `color: color-mix(in lch, ${colors[0]} 70%, black); background-color: ${colors[1]}`;
   }
 
   // Add the on-click handlers for sorting by a specific table header.
@@ -942,9 +959,9 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
     return `${(score / 10).toFixed(1)}%`;
   }
 
-  getInteropScoreForFeature(feature, isStable) {
+  getInteropScoreForFeature(feature, stable) {
     const numBrowsers = this.getYearProp('numBrowsers');
-    return this.getBrowserScoreForFeature(numBrowsers, feature, isStable);
+    return this.getBrowserScoreForFeature(numBrowsers, feature);
   }
 
   // getNumericalBrowserScoreByFeature returns the same score as

webapp/components/interop-summary.js

@@ -239,7 +239,7 @@ class InteropSummary extends PolymerElement {
     }
 
     const summaryDiv = this.shadowRoot.querySelector('.summary-container');
-    if (window.innerWidth > 768) {
+    if (window.innerWidth > 800) {
       summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
     }
     // Don't display the interop score for Interop 2021.