From ef5742a9f12f1a2ff6f11e6a780a8f869c1ac220 Mon Sep 17 00:00:00 2001
From: kyleju <kyleju@google.com>
Date: Sat, 19 Oct 2024 00:09:02 +0000
Subject: [PATCH 1/2] Add outdated logic

---
 api/converters.py                             |  1 +
 api/converters_test.py                        |  2 +
 .../chromedash-roadmap-milestone-card.ts      | 41 +++++++++++++++++++
 client-src/elements/chromedash-roadmap.ts     |  1 +
 client-src/elements/icons.ts                  |  4 ++
 5 files changed, 49 insertions(+)

diff --git a/api/converters.py b/api/converters.py
index b0fc01185133..645d6b63b540 100644
--- a/api/converters.py
+++ b/api/converters.py
@@ -540,6 +540,7 @@ def feature_entry_to_json_basic(fe: FeatureEntry,
     },
     'created': {'by': fe.creator_email, 'when': _date_to_str(fe.created)},
     'updated': {'by': fe.updater_email, 'when': _date_to_str(fe.updated)},
+    'accurate_as_of': _date_to_str(fe.accurate_as_of),
     'standards': {
       'spec': fe.spec_link,
       'maturity': {
diff --git a/api/converters_test.py b/api/converters_test.py
index b36ac7a48aef..6b438ceffcc5 100644
--- a/api/converters_test.py
+++ b/api/converters_test.py
@@ -121,6 +121,7 @@ def test_feature_entry_to_json_basic__normal(self):
         'by': 'updater@example.com',
         'when': expected_date
       },
+      'accurate_as_of': expected_date,
       'standards': {
         'spec': 'https://example.com/spec',
         'maturity': {
@@ -206,6 +207,7 @@ def test_feature_entry_to_json_basic__feature_release(self):
         'by': 'updater@example.com',
         'when': expected_date
       },
+      'accurate_as_of': expected_date,
       'standards': {
         'spec': 'https://example.com/spec',
         'maturity': {
diff --git a/client-src/elements/chromedash-roadmap-milestone-card.ts b/client-src/elements/chromedash-roadmap-milestone-card.ts
index 6f5ac39ede5b..48251d8303b1 100644
--- a/client-src/elements/chromedash-roadmap-milestone-card.ts
+++ b/client-src/elements/chromedash-roadmap-milestone-card.ts
@@ -37,6 +37,8 @@ class ChromedashRoadmapMilestoneCard extends LitElement {
   showDates = false;
   @property({type: Boolean})
   signedIn = false;
+  @property({attribute: false})
+  stableMilestone!: number;
 
   /**
    *  Returns the number of days between a and b.
@@ -234,6 +236,34 @@ class ChromedashRoadmapMilestoneCard extends LitElement {
     `;
   }
 
+  // A feature is outdated if it is scheduled to ship in the next 2 milestones,
+  // and its accurate_as_of date is at least 4 weeks ago.
+  _isFeatureOutdated(accurateAsOf) {
+    if (this.stableMilestone === 0) {
+      return false;
+    }
+    // If this feature is not shipping within two upcoming milestones, return false.
+    if (
+      !(
+        this.stableMilestone + 1 === this.channel?.version ||
+        this.stableMilestone + 2 === this.channel?.version
+      )
+    ) {
+      return false;
+    }
+    if (!accurateAsOf) {
+      return true;
+    }
+    const accuateDate = Date.parse(accurateAsOf);
+    // 4-week period.
+    const gracePeriod = 4 * 7 * 24 * 60 * 60 * 1000;
+    if (accuateDate + gracePeriod < Date.now()) {
+      return true;
+    }
+
+    return false;
+  }
+
   _cardFeatureItemTemplate(f, shippingType) {
     return html`
       <li
@@ -249,6 +279,17 @@ class ChromedashRoadmapMilestoneCard extends LitElement {
           ${f.name}
         </a>
         <span class="icon_row">
+          ${this._isFeatureOutdated(f.accurate_as_of)
+            ? html`
+                <span class="tooltip" title="Feature Outdated">
+                  <iron-icon
+                    icon="chromestatus:error"
+                    class="deprecated"
+                    data-tooltip
+                  ></iron-icon>
+                </span>
+              `
+            : nothing}
           ${ORIGIN_TRIAL.includes(shippingType)
             ? html`
                 <span class="tooltip" title="Origin Trial">
diff --git a/client-src/elements/chromedash-roadmap.ts b/client-src/elements/chromedash-roadmap.ts
index 15a6c0c1f4ef..d38e28a1f995 100644
--- a/client-src/elements/chromedash-roadmap.ts
+++ b/client-src/elements/chromedash-roadmap.ts
@@ -335,6 +335,7 @@ export class ChromedashRoadmap extends LitElement {
             .starredFeatures=${this.starredFeatures}
             .highlightFeature=${this.highlightFeature}
             ?signedin=${this.signedIn}
+            .stableMilestone=${this.channels?.['stable']?.version}
             @star-toggle-event=${this.handleStarToggle}
             @highlight-feature-event=${this.handleHighlightEvent}
           >
diff --git a/client-src/elements/icons.ts b/client-src/elements/icons.ts
index 1f1de18d8dee..3c3404a9a3b2 100644
--- a/client-src/elements/icons.ts
+++ b/client-src/elements/icons.ts
@@ -280,6 +280,10 @@ const template = html`
             d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
           ></path>
         </g>
+
+        <g id="error">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></path>
+        </g>
       </defs>
     </svg>
   </iron-iconset-svg>

From b8578ea2e6f90f10e9e76954112e06506cc6d1d0 Mon Sep 17 00:00:00 2001
From: kyleju <kyleju@google.com>
Date: Tue, 22 Oct 2024 05:32:02 +0000
Subject: [PATCH 2/2] Explain feature oudated icons

---
 .../elements/chromedash-roadmap-milestone-card.ts     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client-src/elements/chromedash-roadmap-milestone-card.ts b/client-src/elements/chromedash-roadmap-milestone-card.ts
index 48251d8303b1..4a80af8943a3 100644
--- a/client-src/elements/chromedash-roadmap-milestone-card.ts
+++ b/client-src/elements/chromedash-roadmap-milestone-card.ts
@@ -281,12 +281,11 @@ class ChromedashRoadmapMilestoneCard extends LitElement {
         <span class="icon_row">
           ${this._isFeatureOutdated(f.accurate_as_of)
             ? html`
-                <span class="tooltip" title="Feature Outdated">
-                  <iron-icon
-                    icon="chromestatus:error"
-                    class="deprecated"
-                    data-tooltip
-                  ></iron-icon>
+                <span
+                  class="tooltip"
+                  title="Feature outdated - last updated more than four weeks ago"
+                >
+                  <iron-icon icon="chromestatus:error" data-tooltip></iron-icon>
                 </span>
               `
             : nothing}