DevTools: reveal and highlight dom nodes when searching in elements panel.

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

Index: third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
index 322fadc5a75c9d506c1b620a7949ffd530efd93d..decdc8abade2dd76e71603614d20bbfb58337e9f 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeOutline.js
@@ -550,38 +550,32 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
    * @param {!SDK.DOMNode} node
    * @return {!Promise<!Object|undefined>}
    */
-  _loadDimensionsForNode(node) {
+  async _loadDimensionsForNode(node) {
     if (!node.nodeName() || node.nodeName().toLowerCase() !== 'img')
-      return Promise.resolve();
+      return;
 
-    var fulfill;
-    var promise = new Promise(x => fulfill = x);
-    node.resolveToObject('', resolvedNode);
-    return promise;
+    var object = await node.resolveToObject('');
 
-    function resolvedNode(object) {
-      if (!object) {
-        fulfill();
-        return;
-      }
+    if (!object)
+      return;
 
-      object.callFunctionJSON(features, undefined, fulfill);
-      object.release();
+    var promise = object.callFunctionJSONPromise(features, undefined);
+    object.release();
+    return promise;
 
-      /**
-       * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}}
-       * @suppressReceiverCheck
-       * @this {!Element}
-       */
-      function features() {
-        return {
-          offsetWidth: this.offsetWidth,
-          offsetHeight: this.offsetHeight,
-          naturalWidth: this.naturalWidth,
-          naturalHeight: this.naturalHeight,
-          currentSrc: this.currentSrc
-        };
-      }
+    /**
+     * @return {!{offsetWidth: number, offsetHeight: number, naturalWidth: number, naturalHeight: number, currentSrc: (string|undefined)}}
+     * @suppressReceiverCheck
+     * @this {!Element}
+     */
+    function features() {
+      return {
+        offsetWidth: this.offsetWidth,
+        offsetHeight: this.offsetHeight,
+        naturalWidth: this.naturalWidth,
+        naturalHeight: this.naturalHeight,
+        currentSrc: this.currentSrc
+      };
     }
   }
 
@@ -896,66 +890,63 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
    * ancestors.
    *
    * @param {!SDK.DOMNode} node
-   * @param {function(?SDK.RemoteObject, boolean=)=} userCallback
    */
-  toggleHideElement(node, userCallback) {
+  async toggleHideElement(node) {
     var pseudoType = node.pseudoType();
     var effectiveNode = pseudoType ? node.parentNode : node;
     if (!effectiveNode)
       return;
 
     var hidden = node.marker('hidden-marker');
+    var object = await effectiveNode.resolveToObject('');

[caseq, 2017/06/07 21:22:29]

Emphasize with comments/empty lines?

 
-    function resolvedNode(object) {
-      if (!object)
-        return;
+    if (!object)
+      return;
 
-      /**
-       * @param {?string} pseudoType
-       * @param {boolean} hidden
-       * @suppressGlobalPropertiesCheck
-       * @suppressReceiverCheck
-       * @this {!Element}
-       */
-      function toggleClassAndInjectStyleRule(pseudoType, hidden) {
-        const classNamePrefix = '__web-inspector-hide';
-        const classNameSuffix = '-shortcut__';
-        const styleTagId = '__web-inspector-hide-shortcut-style__';
-        var selectors = [];
-        selectors.push('.__web-inspector-hide-shortcut__');
-        selectors.push('.__web-inspector-hide-shortcut__ *');
-        selectors.push('.__web-inspector-hidebefore-shortcut__::before');
-        selectors.push('.__web-inspector-hideafter-shortcut__::after');
-        var selector = selectors.join(', ');
-        var ruleBody = '    visibility: hidden !important;';
-        var rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n';
-        var className = classNamePrefix + (pseudoType || '') + classNameSuffix;
-        this.classList.toggle(className, hidden);
-
-        var localRoot = this;
-        while (localRoot.parentNode)
-          localRoot = localRoot.parentNode;
-        if (localRoot.nodeType === Node.DOCUMENT_NODE)
-          localRoot = document.head;
-
-        var style = localRoot.querySelector('style#' + styleTagId);
-        if (style)
-          return;
+    var result = object.callFunction(toggleClassAndInjectStyleRule, [{value: pseudoType}, {value: !hidden}]);
+    object.release();
+    node.setMarker('hidden-marker', hidden ? null : true);
+    return result;
 
-        style = document.createElement('style');
-        style.id = styleTagId;
-        style.type = 'text/css';
-        style.textContent = rule;
+    /**
+     * @param {?string} pseudoType
+     * @param {boolean} hidden
+     * @suppressGlobalPropertiesCheck
+     * @suppressReceiverCheck
+     * @this {!Element}
+     */
+    function toggleClassAndInjectStyleRule(pseudoType, hidden) {
+      const classNamePrefix = '__web-inspector-hide';
+      const classNameSuffix = '-shortcut__';
+      const styleTagId = '__web-inspector-hide-shortcut-style__';
+      var selectors = [];
+      selectors.push('.__web-inspector-hide-shortcut__');
+      selectors.push('.__web-inspector-hide-shortcut__ *');
+      selectors.push('.__web-inspector-hidebefore-shortcut__::before');
+      selectors.push('.__web-inspector-hideafter-shortcut__::after');
+      var selector = selectors.join(', ');
+      var ruleBody = '    visibility: hidden !important;';
+      var rule = '\n' + selector + '\n{\n' + ruleBody + '\n}\n';
+      var className = classNamePrefix + (pseudoType || '') + classNameSuffix;
+      this.classList.toggle(className, hidden);
+
+      var localRoot = this;
+      while (localRoot.parentNode)
+        localRoot = localRoot.parentNode;
+      if (localRoot.nodeType === Node.DOCUMENT_NODE)
+        localRoot = document.head;
+
+      var style = localRoot.querySelector('style#' + styleTagId);
+      if (style)
+        return;
 
-        localRoot.appendChild(style);
-      }
+      style = document.createElement('style');
+      style.id = styleTagId;
+      style.type = 'text/css';
+      style.textContent = rule;
 
-      object.callFunction(toggleClassAndInjectStyleRule, [{value: pseudoType}, {value: !hidden}], userCallback);
-      object.release();
-      node.setMarker('hidden-marker', hidden ? null : true);
+      localRoot.appendChild(style);
     }
-
-    effectiveNode.resolveToObject('', resolvedNode);
   }
 
   /**