Do not change extension entries colors based on devtools theme

Before this CL we were using colors from devtools palette. Some of these, where taken from theme tokens, which vary depending on devtools theme. This was not the initially intended behavior, as colors tend to have a meaning, so we don't want them to change based on the UI colors (e.g. we don't want "primary" colors to look red if devtools theme color is red). Instead what we want are the colors of the default theme, regardless of the theme devtools has.

Bug: 358307050
Change-Id: Ic4bb5a3216d19aedaba6d6aafce2c891372e7dda
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5961601
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Andres Olivares <[email protected]>

Author: and-oli

front_end/panels/timeline/extensions/ExtensionUI.ts

@@ -9,16 +9,16 @@ export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExten
   const color = event.args.color;
   // Use a default value for when the color of the extension entry
   // was not passed or was set an unknown value.
-  let themeColor = '--ref-palette-primary70';
+  let themeColor = '--ref-palette-blue70';
   switch (color) {
     case 'primary':
-      themeColor = '--ref-palette-primary70';
+      themeColor = '--ref-palette-blue70';
       break;
     case 'primary-light':
-      themeColor = '--ref-palette-primary80';
+      themeColor = '--ref-palette-blue80';
       break;
     case 'primary-dark':
-      themeColor = '--ref-palette-primary60';
+      themeColor = '--ref-palette-blue60';
       break;
     case 'secondary':
       themeColor = '--ref-palette-purple80';
@@ -30,13 +30,13 @@ export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExten
       themeColor = '--ref-palette-purple70';
       break;
     case 'tertiary':
-      themeColor = '--ref-palette-tertiary70';
+      themeColor = '--ref-palette-green70';
       break;
     case 'tertiary-light':
-      themeColor = '--ref-palette-tertiary80';
+      themeColor = '--ref-palette-green80';
       break;
     case 'tertiary-dark':
-      themeColor = '--ref-palette-tertiary60';
+      themeColor = '--ref-palette-green60';
       break;
     case 'warning':
       themeColor = '--ref-palette-yellow70';

front_end/panels/timeline/track_appenders/ExtensionTrackAppender.test.ts

@@ -147,8 +147,8 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       styleElement.id = 'fake-perf-panel-colors';
       styleElement.textContent = `
         :root {
-          --ref-palette-primary70: rgb(4 4 4);
-          --ref-palette-tertiary70: rgb(10 10 10);
+          --ref-palette-blue70: rgb(4 4 4);
+          --ref-palette-green70: rgb(10 10 10);
         }
       `;
       document.documentElement.appendChild(styleElement);
@@ -168,12 +168,12 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
       for (const event of allExtensionTrackEntries) {
         assert.strictEqual(extensionTrackAppenders[0].titleForEvent(event), event.name);
         if (event.args.color === 'tertiary') {
-          // "tertiary" color category is mapped to --ref-palette-tertiary70
+          // "tertiary" color category is mapped to --ref-palette-green70
           // which is faked out to 10, 10, 10
           assert.strictEqual(extensionTrackAppenders[0].colorForEvent(event), 'rgb(10 10 10)');
         } else {
           // Unknown colors are mapped to "primary" by default, and
-          // "primary" color category is mapped to --ref-palette-primary70
+          // "primary" color category is mapped to --ref-palette-blue70
           // which is faked out to 4, 4, 4
           assert.strictEqual(extensionTrackAppenders[0].colorForEvent(event), 'rgb(4 4 4)');
         }
@@ -197,7 +197,7 @@ describeWithEnvironment('ExtensionTrackAppender', function() {
         },
         cat: 'devtools.extension',
       } as unknown as Trace.Types.Events.Event;
-      // "primary" color category is mapped to --ref-palette-primary70
+      // "primary" color category is mapped to --ref-palette-blue70
       // which is faked out to 4, 4, 4
       assert.strictEqual(extensionTrackAppenders[0].colorForEvent(mockExtensionEntryNoColor), 'rgb(4 4 4)');
       assert.strictEqual(extensionTrackAppenders[0].colorForEvent(mockExtensionEntryUnknownColor), 'rgb(4 4 4)');

front_end/panels/timeline/track_appenders/TimingsTrackAppender.test.ts

@@ -298,7 +298,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
       styleElement.id = 'fake-perf-panel-colors';
       styleElement.textContent = `
         :root {
-          --ref-palette-primary70: rgb(4 4 4);
+          --ref-palette-blue70: rgb(4 4 4);
           --ref-palette-error60: rgb(10 10 10);
         }
       `;
@@ -336,7 +336,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(10 10 10)');
         } else {
           // Unknown colors are mapped to "primary" by default, and
-          // "primary" color category is mapped to --ref-palette-primary70
+          // "primary" color category is mapped to --ref-palette-blue70
           // which is faked out to 4, 4, 4
           assert.strictEqual(timingsTrackAppender.colorForEvent(event), 'rgb(4 4 4)');
         }
@@ -357,7 +357,7 @@ describeWithEnvironment('TimingTrackAppender', function() {
         },
         cat: 'devtools.extension',
       } as unknown as Trace.Types.Events.Event;
-      // "primary" color category is mapped to --ref-palette-primary70
+      // "primary" color category is mapped to --ref-palette-blue70
       // which is faked out to 4, 4, 4
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryNoColor), 'rgb(4 4 4)');
       assert.strictEqual(timingsTrackAppender.colorForEvent(mockExtensionEntryUnknownColor), 'rgb(4 4 4)');