DevTools: re-render swatches for var() functions in StylesSidebarPane

This patch starts re-rendering StylePropertyTreeElement instances
if their computed value gets changed after edit.

R=dgozman

Change-Id: I5528238e3eeeafa1e71fb3e3543d1d600a46f9f1
Reviewed-on: https://chromium-review.googlesource.com/991598Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#547859}

third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-variables/color-swatch-expected.txt

+Verify that swatches for var() functions are updated as CSS variable is changed.
+Before css Variable editing:
+  "color" swatch:red
+  "background-color" swatch:red
+After css Variable editing:
+  "color" swatch:blue
+  "background-color" swatch:blue
+

third_party/WebKit/LayoutTests/http/tests/devtools/elements/css-variables/color-swatch.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(
+      `Verify that swatches for var() functions are updated as CSS variable is changed.`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+    <style>
+      div {
+        color: var(--bar);
+        --bar: var(--baz);
+        --baz: red;
+      }
+
+      #inspected {
+        background-color: var(--bar);
+      }
+    </style>
+    <div id="inspected"></div>
+  `);
+
+  await ElementsTestRunner.selectNodeAndWaitForStylesPromise('inspected');
+  TestRunner.addResult('Before css Variable editing:' );
+  dumpSwatches();
+
+  const bazTreeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('--baz');
+  bazTreeElement.startEditing(bazTreeElement.valueElement);
+  bazTreeElement.valueElement.textContent = 'blue';
+  bazTreeElement.kickFreeFlowStyleEditForTest();
+  await ElementsTestRunner.waitForStyleAppliedPromise();
+
+  TestRunner.addResult('After css Variable editing:' );
+  dumpSwatches();
+
+  TestRunner.completeTest();
+
+  function dumpSwatches() {
+    const colorTreeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('color');
+    let swatch = colorTreeElement.valueElement.querySelector('span[is=color-swatch]');
+    TestRunner.addResult('  "color" swatch:' + swatch.color().asString());
+
+    const bgTreeElement = ElementsTestRunner.getMatchedStylePropertyTreeItem('background-color');
+    swatch = bgTreeElement.valueElement.querySelector('span[is=color-swatch]');
+    TestRunner.addResult('  "background-color" swatch:' + swatch.color().asString());
+  }
+})();

third_party/WebKit/Source/devtools/front_end/elements/StylePropertyTreeElement.js

@@ -34,6 +34,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     this._originalPropertyText = '';
     this._prompt = null;
     this._propertyHasBeenEditedIncrementally = false;
+    this._lastComputedValue = null;
   }
 
   /**
@@ -280,7 +281,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
   _updatePane() {
     const section = this.section();
     if (section)
-      section.refreshUpdate();
+      section.refreshUpdate(this);
   }
 
   /**
@@ -378,7 +379,20 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
       this._expandElement.setIconType('smallicon-triangle-right');
   }
 
+  updateTitleIfComputedValueChanged() {
+    const computedValue = this._matchedStyles.computeValue(this.property.ownerStyle, this.property.value);
+    if (computedValue === this._lastComputedValue)
+      return;
+    this._lastComputedValue = computedValue;
+    this._innerUpdateTitle();
+  }
+
   updateTitle() {
+    this._lastComputedValue = this._matchedStyles.computeValue(this.property.ownerStyle, this.property.value);
+    this._innerUpdateTitle();
+  }
+
+  _innerUpdateTitle() {
     this._updateState();
     if (this.isExpandable())
       this._expandElement = UI.Icon.create('smallicon-triangle-right', 'expand-icon');

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

@@ -297,9 +297,18 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   }
 
   /**
-   * @param {!Elements.StylePropertiesSection=} editedSection
-   */
-  _refreshUpdate(editedSection) {
+   * @param {!Elements.StylePropertiesSection} editedSection
+   * @param {!Elements.StylePropertyTreeElement=} editedTreeElement
+   */
+  _refreshUpdate(editedSection, editedTreeElement) {
+    if (editedTreeElement) {
+      for (const section of this.allSections()) {
+        if (section.isBlank)
+          continue;
+        section._updateVarFunctions(editedTreeElement);
+      }
+    }
+
     if (this._isEditingStyle)
       return;
     const node = this.node();
@@ -1276,8 +1285,23 @@ Elements.StylePropertiesSection = class {
     return (curSection && curSection.editable) ? curSection : null;
   }
 
-  refreshUpdate() {
-    this._parentPane._refreshUpdate(this);
+  /**
+   * @param {!Elements.StylePropertyTreeElement} editedTreeElement
+   */
+  refreshUpdate(editedTreeElement) {
+    this._parentPane._refreshUpdate(this, editedTreeElement);
+  }
+
+  /**
+   * @param {!Elements.StylePropertyTreeElement} editedTreeElement
+   */
+  _updateVarFunctions(editedTreeElement) {
+    let child = this.propertiesTreeOutline.firstChild();
+    while (child) {
+      if (child !== editedTreeElement)
+        child.updateTitleIfComputedValueChanged();
+      child = child.traverseNextTreeElement(false /* skipUnrevealed */, null /* stayWithin */, true /* dontPopulate */);
+    }
   }
 
   /**
@@ -1292,7 +1316,8 @@ Elements.StylePropertiesSection = class {
       let child = this.propertiesTreeOutline.firstChild();
       while (child) {
         child.setOverloaded(this._isPropertyOverloaded(child.property));
-        child = child.traverseNextTreeElement(false, null, true);
+        child =
+            child.traverseNextTreeElement(false /* skipUnrevealed */, null /* stayWithin */, true /* dontPopulate */);
       }
     }
   }

third_party/WebKit/Source/devtools/front_end/elements_test_runner/ElementsTestRunner.js

@@ -276,6 +276,10 @@ ElementsTestRunner.waitForStyleApplied = function(callback) {
   TestRunner.addSniffer(Elements.StylePropertyTreeElement.prototype, 'styleTextAppliedForTest', callback);
 };
 
+ElementsTestRunner.waitForStyleAppliedPromise = function() {
+  return new Promise(resolve => ElementsTestRunner.waitForStyleApplied(resolve));
+};
+
 ElementsTestRunner.selectNodeAndWaitForStyles = function(idValue, callback) {
   callback = TestRunner.safeWrap(callback);
   let targetNode;