[DevTools] Sorts colors descending by luminance

Change-Id: Ibe628e70b3d53db9ca132378c2da2ac42cd7746c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1847337
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704570}

third_party/blink/renderer/devtools/front_end/css_overview/CSSOverviewCompletedView.js

@@ -192,17 +192,20 @@ CssOverview.CSSOverviewCompletedView = class extends UI.PanelWithSidebar {
     return blockFragment;
   }
 
-  _getNonTransparentColorStrings(colors) {
-    return Array.from(colors)
-        .map(colorText => {
-          const color = Common.Color.parse(colorText);
-          if (color.rgba()[3] === 0) {
-            return;
-          }
-
-          return color;
-        })
-        .filter(color => !!color);
+  _getNonTransparentColorStrings(srcColors) {
+    const colors = [];
+    for (const colorText of Array.from(srcColors)) {
+      const color = Common.Color.parse(colorText);
+      if (color.rgba()[3] === 0) {
+        continue;
+      }
+
+      colors.push(color);
+    }
+
+    return colors.sort((colorA, colorB) => {
+      return Common.Color.luminance(colorB.rgba()) - Common.Color.luminance(colorA.rgba());
+    });
   }
 
   setOverviewData(data) {