Enable 3 devtools tests that got temporarily disabled to land a feature

In order to land the new jump-to-var in bug 1124707 I had to disable 3
devtools web tests since they were testing some UI code that was getting
changed in the devtools front end repo.

Now that the code has landed, I can re-enable those tests, making sure
to adapt the way they go about testing the UI.

Bug: 1135145
Change-Id: Icd1407f571c7ef070e8646bdc025e36faa5f2933
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2451500Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#814206}

third_party/blink/web_tests/TestExpectations

@@ -4370,11 +4370,6 @@ crbug.com/610835 http/tests/security/XFrameOptions/x-frame-options-deny-multiple
 #crbug.com/765738 [ Linux Win Mac ] http/tests/wasm/wasm_remote_postMessage_test.https.html [ Pass Timeout ]
 crbug.com/892212 http/tests/wasm/wasm_remote_postMessage_test.https.html [ Pass Failure Timeout ]
 
-# Disabling 3 tests temporarily in order to land a devtools-frontend change. Will re-enable soon.
-crbug.com/1135145 http/tests/devtools/elements/css-variables/color-swatch.js [ Failure Pass ]
-crbug.com/1135145 http/tests/devtools/elements/styles/url-color-swatch.js [ Failure Pass ]
-crbug.com/1135145 http/tests/devtools/elements/styles-1/color-swatch.js [ Failure Pass ]
-
 # ====== Random order flaky tests from here ======
 # These tests are flaky when run in random order, which is the default on Linux & Mac since since 2016-12-16.
 

third_party/blink/web_tests/http/tests/devtools/elements/css-variables/color-swatch.js

@@ -38,11 +38,17 @@
 
   function dumpSwatches() {
     const colorTreeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('color');
-    let swatch = colorTreeElement.valueElement.querySelector('span[is=color-swatch]');
-    TestRunner.addResult('  "color" swatch:' + swatch.color().asString());
+    let varSwatch =
+        colorTreeElement.valueElement.querySelector('devtools-css-var-swatch');
+    let colorSwatch = varSwatch.shadowRoot.querySelector('.color-swatch-inner');
+    TestRunner.addResult(
+        '  "color" swatch:' + colorSwatch.style.backgroundColor);
 
     const bgTreeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('background-color');
-    swatch = bgTreeElement.valueElement.querySelector('span[is=color-swatch]');
-    TestRunner.addResult('  "background-color" swatch:' + swatch.color().asString());
+    varSwatch =
+        bgTreeElement.valueElement.querySelector('devtools-css-var-swatch');
+    colorSwatch = varSwatch.shadowRoot.querySelector('.color-swatch-inner');
+    TestRunner.addResult(
+        '  "background-color" swatch:' + colorSwatch.style.backgroundColor);
   }
 })();

third_party/blink/web_tests/http/tests/devtools/elements/styles-1/color-swatch.js

@@ -46,7 +46,9 @@
 
     function testColorSwatchInVarFunction(next) {
       var treeItem = ElementsTestRunner.getMatchedStylePropertyTreeItem('background');
-      var swatch = treeItem.valueElement.querySelector('span[is=color-swatch]');
+      var swatch =
+          treeItem.valueElement.querySelector('devtools-css-var-swatch')
+              .shadowRoot.querySelector('.color-swatch-inner');
       TestRunner.addResult('var function has a color swatch: ' + !!swatch);
       next();
     },

third_party/blink/web_tests/http/tests/devtools/elements/styles/url-color-swatch.js

@@ -41,10 +41,15 @@
       var node = childNodes[i];
       switch (node.nodeType) {
         case Node.ELEMENT_NODE:
-          if (node.getAttribute('is') === 'color-swatch')
+          if (node.getAttribute('is') === 'color-swatch') {
             result.push('[] ' + node.textContent);
-          else
+          } else if (
+              node.tagName.toLowerCase() === 'devtools-css-var-swatch' &&
+              node.shadowRoot.querySelector('.color-swatch-inner')) {
+            result.push('[] ' + node.textContent);
+          } else {
             dumpNode(node, result);
+          }
           break;
         case Node.TEXT_NODE:
           result.push(node.nodeValue);