Add specifications for Interop 2025 (#4234)

* Add Interop 2025

* rename Web Compat

* add mobile scores url

* Add TODO for section height

* Add min-heights constant

---------

Co-authored-by: DanielRyanSmith <[email protected]>

Author: DanielRyanSmith

webapp/components/interop-dashboard.js

@@ -52,7 +52,7 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
           margin: 0 2em;
           display: grid;
           grid-template-columns: 9fr 11fr;
-          grid-template-rows: 0fr 0.55fr 0fr 0fr 1fr;
+          grid-template-rows: 0fr 0fr 0fr 0fr 1fr;
           column-gap: 75px;
           grid-template-areas:
             "header scores"
@@ -950,7 +950,8 @@ class InteropDashboard extends WPTFlags(PolymerElement) {
   }
 
   shouldShowMobileScoresView() {
-    return this.showMobileScoresView && parseInt(this.year) >= 2024;
+    const validYears = this.dataManager.getYearProp('validMobileYears');
+    return this.showMobileScoresView && validYears.includes(this.year);
   }
 
   // Check if the table being rendered is the first table.

webapp/components/interop-data-manager.js

@@ -106,6 +106,7 @@ class InteropDataManager {
 
     const yearInfo = paramsByYear[this.year];
     const previousYear = String(parseInt(this.year) - 1);
+    this.validMobileYears = paramsByYear.valid_mobile_years;
 
     // Calc and save investigation scores.
     this.investigationScores = yearInfo.investigation_scores;

webapp/components/interop-data.js

@@ -9,6 +9,19 @@ import '../node_modules/@polymer/polymer/lib/elements/dom-if.js';
 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';
 import {afterNextRender} from  '../node_modules/@polymer/polymer/lib/utils/render-status.js';
 
+// This min-height is added to this section to ensure that the section below
+// is not moved after the user selects between STABLE and EXPERIMENTAL
+// (experimental browser names are longer and add additional lines).
+// Different years have different initial heights for these sections.
+const SUMMARY_CONTAINER_MIN_HEIGHTS = {
+  '2021': '275px',
+  '2022': '470px',
+  '2023': '470px',
+  '2024': '380px',
+  '2025': '380px',
+};
+
+
 class InteropSummary extends PolymerElement {
   static get template() {
     return html`
@@ -196,13 +209,11 @@ class InteropSummary extends PolymerElement {
     }
 
     const summaryDiv = this.shadowRoot.querySelector('.summary-container');
+    summaryDiv.style.minHeight = SUMMARY_CONTAINER_MIN_HEIGHTS[this.year] || '470px';
     // Don't display the interop score for Interop 2021.
     if (this.year === '2021') {
       const interopDiv = this.shadowRoot.querySelector('#interopSummary');
       interopDiv.style.display = 'none';
-      summaryDiv.style.minHeight = '275px';
-    } else if (this.year === '2024') {
-      summaryDiv.style.minHeight = '350px';
     }
 
     // The summary score elements are given class names asynchronously,

webapp/components/interop-summary.js

@@ -43,7 +43,7 @@ func interopHandler(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
-	_, isValidMobileYear := validMobileYears[year];
+	_, isValidMobileYear := validMobileYears[year]
 	if isMobileView != nil && !isValidMobileYear {
 		year = defaultRedirectYear
 		needsRedirect = true

webapp/interop_handler.go

@@ -43,8 +43,8 @@ func TestInteropHandler_redirectMobile(t *testing.T) {
 	// 2021 is an invalid interop mobile year and should be redirected.
 	req := httptest.NewRequest("GET", "/interop-2021?mobile-view", strings.NewReader("{}"))
 	req = mux.SetURLVars(req, map[string]string{
-		"name":     "interop",
-		"year":     "2021",
+		"name":       "interop",
+		"year":       "2021",
 		"mobileView": "true",
 	})
 
@@ -115,8 +115,8 @@ func TestInteropHandler_mobileSuccess(t *testing.T) {
 	req := httptest.NewRequest(
 		"GET", "/interop-"+defaultRedirectYear+"?mobile-view", strings.NewReader("{}"))
 	req = mux.SetURLVars(req, map[string]string{
-		"name": "interop",
-		"year": defaultRedirectYear,
+		"name":       "interop",
+		"year":       defaultRedirectYear,
 		"mobileView": "true",
 	})