Fix delta color display issue.

Updated anomalies table css selector to target the dynamic table ID.

Bug: b/467017324

Change-Id: Ic5ff005d5677e843e137c74158499d5a09d87615
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/1123011
Commit-Queue: Maggie Dong <[email protected]>
Reviewed-by: Anri Sidorov <[email protected]>

Author: Maggie Dong

perf/modules/anomalies-table-sk/anomalies-table-sk.scss

@@ -56,6 +56,14 @@ anomalies-table-sk {
     .regression {
       color: rgb(255, 0, 0);
     }
+
+    td.delta.improvement {
+      color: rgb(0, 128, 0);
+    }
+    td.delta.regression {
+      color: rgb(255, 0, 0);
+    }
+
     #change_direction {
       text-align: center;
       width: var(--percent-changed-width, 50px);

perf/modules/anomalies-table-sk/anomalies-table-sk.ts

@@ -654,7 +654,7 @@ export class AnomaliesTableSk extends ElementSk implements KeyboardShortcutHandl
               ? html`<spinner-sk active></spinner-sk>` // Show spinner if loading
               : html`
                   <button
-                    id="trendingicon-link"
+                    class="trendingicon-link"
                     @click=${async () => {
                       const newTab = window.open('', '_blank');
                       if (newTab) {

perf/modules/anomalies-table-sk/anomalies-table-sk_po.ts

@@ -50,7 +50,7 @@ export class AnomaliesTableSkPO extends PageObject {
   }
 
   get trendingIconLink(): PageObjectElementList {
-    return this.bySelectorAll('button#trendingicon-link');
+    return this.bySelectorAll('button.trendingicon-link');
   }
 
   get groupingSettingsDetails(): PageObjectElement {
@@ -93,9 +93,9 @@ export class AnomaliesTableSkPO extends PageObject {
   }
 
   async clickTrendingIconButton(index: number): Promise<void> {
+    await this.clickExpandButton(index);
     const trendingLinkList = await this.trendingIconLink;
     const trendingLink = trendingLinkList.item(index);
-    await this.clickExpandButton(index);
     await (await trendingLink).click();
   }