DevTools: reformat front-end code to match chromium style.

third_party/WebKit/Source/devtools/front_end/components/DOMPresentationUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 10 matching lines @@
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-
 WebInspector.DOMPresentationUtils = {};
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {!Element} parentElement
  */
-WebInspector.DOMPresentationUtils.decorateNodeLabel = function(node, parentElement)
-{
-    var originalNode = node;
-    var isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
-    if (isPseudo && node.parentNode)
-        node = node.parentNode;
+WebInspector.DOMPresentationUtils.decorateNodeLabel = function(node, parentElement) {
+  var originalNode = node;
+  var isPseudo = node.nodeType() === Node.ELEMENT_NODE && node.pseudoType();
+  if (isPseudo && node.parentNode)
+    node = node.parentNode;
 
-    var title = node.nodeNameInCorrectCase();
+  var title = node.nodeNameInCorrectCase();
 
-    var nameElement = parentElement.createChild("span", "node-label-name");
-    nameElement.textContent = title;
+  var nameElement = parentElement.createChild('span', 'node-label-name');
+  nameElement.textContent = title;
 
-    var idAttribute = node.getAttribute("id");
-    if (idAttribute) {
-        var idElement = parentElement.createChild("span", "node-label-id");
-        var part = "#" + idAttribute;
-        title += part;
-        idElement.createTextChild(part);
+  var idAttribute = node.getAttribute('id');
+  if (idAttribute) {
+    var idElement = parentElement.createChild('span', 'node-label-id');
+    var part = '#' + idAttribute;
+    title += part;
+    idElement.createTextChild(part);
 
-        // Mark the name as extra, since the ID is more important.
-        nameElement.classList.add("extra");
+    // Mark the name as extra, since the ID is more important.
+    nameElement.classList.add('extra');
+  }
+
+  var classAttribute = node.getAttribute('class');
+  if (classAttribute) {
+    var classes = classAttribute.split(/\s+/);
+    var foundClasses = {};
+
+    if (classes.length) {
+      var classesElement = parentElement.createChild('span', 'extra node-label-class');
+      for (var i = 0; i < classes.length; ++i) {
+        var className = classes[i];
+        if (className && !(className in foundClasses)) {
+          var part = '.' + className;
+          title += part;
+          classesElement.createTextChild(part);
+          foundClasses[className] = true;
+        }
+      }
     }
+  }
 
-    var classAttribute = node.getAttribute("class");
-    if (classAttribute) {
-        var classes = classAttribute.split(/\s+/);
-        var foundClasses = {};
-
-        if (classes.length) {
-            var classesElement = parentElement.createChild("span", "extra node-label-class");
-            for (var i = 0; i < classes.length; ++i) {
-                var className = classes[i];
-                if (className && !(className in foundClasses)) {
-                    var part = "." + className;
-                    title += part;
-                    classesElement.createTextChild(part);
-                    foundClasses[className] = true;
-                }
-            }
-        }
-    }
-
-    if (isPseudo) {
-        var pseudoElement = parentElement.createChild("span", "extra node-label-pseudo");
-        var pseudoText = "::" + originalNode.pseudoType();
-        pseudoElement.createTextChild(pseudoText);
-        title += pseudoText;
-    }
-    parentElement.title = title;
+  if (isPseudo) {
+    var pseudoElement = parentElement.createChild('span', 'extra node-label-pseudo');
+    var pseudoText = '::' + originalNode.pseudoType();
+    pseudoElement.createTextChild(pseudoText);
+    title += pseudoText;
+  }
+  parentElement.title = title;
 };
 
 /**
  * @param {!Element} container
  * @param {string} nodeTitle
  */
-WebInspector.DOMPresentationUtils.createSpansForNodeTitle = function(container, nodeTitle)
-{
-    var match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
-    container.createChild("span", "webkit-html-tag-name").textContent = match[1];
-    if (match[2])
-        container.createChild("span", "webkit-html-attribute-value").textContent = match[2];
-    if (match[3])
-        container.createChild("span", "webkit-html-attribute-name").textContent = match[3];
+WebInspector.DOMPresentationUtils.createSpansForNodeTitle = function(container, nodeTitle) {
+  var match = nodeTitle.match(/([^#.]+)(#[^.]+)?(\..*)?/);
+  container.createChild('span', 'webkit-html-tag-name').textContent = match[1];
+  if (match[2])
+    container.createChild('span', 'webkit-html-attribute-value').textContent = match[2];
+  if (match[3])
+    container.createChild('span', 'webkit-html-attribute-name').textContent = match[3];
 };
 
 /**
  * @param {?WebInspector.DOMNode} node
  * @param {string=} idref
  * @return {!Node}
  */
-WebInspector.DOMPresentationUtils.linkifyNodeReference = function(node, idref)
-{
-    if (!node)
-        return createTextNode(WebInspector.UIString("<node>"));
+WebInspector.DOMPresentationUtils.linkifyNodeReference = function(node, idref) {
+  if (!node)
+    return createTextNode(WebInspector.UIString('<node>'));
 
-    var root = createElementWithClass("span", "monospace");
-    var shadowRoot = WebInspector.createShadowRootWithCoreStyles(root, "components/domUtils.css");
-    var link = shadowRoot.createChild("div", "node-link");
+  var root = createElementWithClass('span', 'monospace');
+  var shadowRoot = WebInspector.createShadowRootWithCoreStyles(root, 'components/domUtils.css');
+  var link = shadowRoot.createChild('div', 'node-link');
 
-    if (idref)
-        link.createChild("span", "node-label-id").createTextChild("#" + idref);
-    else
-        WebInspector.DOMPresentationUtils.decorateNodeLabel(node, link);
+  if (idref)
+    link.createChild('span', 'node-label-id').createTextChild('#' + idref);
+  else
+    WebInspector.DOMPresentationUtils.decorateNodeLabel(node, link);
 
-    link.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
-    link.addEventListener("mouseover", node.highlight.bind(node, undefined, undefined), false);
-    link.addEventListener("mouseleave", WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), false);
+  link.addEventListener('click', WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
+  link.addEventListener('mouseover', node.highlight.bind(node, undefined, undefined), false);
+  link.addEventListener('mouseleave', WebInspector.DOMModel.hideDOMNodeHighlight.bind(WebInspector.DOMModel), false);
 
-    return root;
+  return root;
 };
 
 /**
  * @param {!WebInspector.DeferredDOMNode} deferredNode
  * @return {!Node}
  */
-WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference = function(deferredNode)
-{
-    var root = createElement("div");
-    var shadowRoot = WebInspector.createShadowRootWithCoreStyles(root, "components/domUtils.css");
-    var link = shadowRoot.createChild("div", "node-link");
-    link.createChild("content");
-    link.addEventListener("click", deferredNode.resolve.bind(deferredNode, onDeferredNodeResolved), false);
-    link.addEventListener("mousedown", (e) => e.consume(), false);
+WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference = function(deferredNode) {
+  var root = createElement('div');
+  var shadowRoot = WebInspector.createShadowRootWithCoreStyles(root, 'components/domUtils.css');
+  var link = shadowRoot.createChild('div', 'node-link');
+  link.createChild('content');
+  link.addEventListener('click', deferredNode.resolve.bind(deferredNode, onDeferredNodeResolved), false);
+  link.addEventListener('mousedown', (e) => e.consume(), false);
 
-    /**
-     * @param {?WebInspector.DOMNode} node
-     */
-    function onDeferredNodeResolved(node)
-    {
-        WebInspector.Revealer.reveal(node);
-    }
+  /**
+   * @param {?WebInspector.DOMNode} node
+   */
+  function onDeferredNodeResolved(node) {
+    WebInspector.Revealer.reveal(node);
+  }
 
-    return root;
+  return root;
 };
 
 /**
  * @param {!WebInspector.Target} target
  * @param {string} originalImageURL
  * @param {boolean} showDimensions
  * @param {function(!Element=)} userCallback
  * @param {!Object=} precomputedFeatures
  */
-WebInspector.DOMPresentationUtils.buildImagePreviewContents = function(target, originalImageURL, showDimensions, userCallback, precomputedFeatures)
-{
-    var resourceTreeModel = WebInspector.ResourceTreeModel.fromTarget(target);
-    if (!resourceTreeModel) {
-        userCallback();
-        return;
-    }
-    var resource = resourceTreeModel.resourceForURL(originalImageURL);
-    var imageURL = originalImageURL;
-    if (!isImageResource(resource) && precomputedFeatures && precomputedFeatures.currentSrc) {
-        imageURL = precomputedFeatures.currentSrc;
-        resource = resourceTreeModel.resourceForURL(imageURL);
-    }
-    if (!isImageResource(resource)) {
-        userCallback();
-        return;
+WebInspector.DOMPresentationUtils.buildImagePreviewContents = function(
+    target, originalImageURL, showDimensions, userCallback, precomputedFeatures) {
+  var resourceTreeModel = WebInspector.ResourceTreeModel.fromTarget(target);
+  if (!resourceTreeModel) {
+    userCallback();
+    return;
+  }
+  var resource = resourceTreeModel.resourceForURL(originalImageURL);
+  var imageURL = originalImageURL;
+  if (!isImageResource(resource) && precomputedFeatures && precomputedFeatures.currentSrc) {
+    imageURL = precomputedFeatures.currentSrc;
+    resource = resourceTreeModel.resourceForURL(imageURL);
+  }
+  if (!isImageResource(resource)) {
+    userCallback();
+    return;
+  }
+
+  var imageElement = createElement('img');
+  imageElement.addEventListener('load', buildContent, false);
+  imageElement.addEventListener('error', errorCallback, false);
+  resource.populateImageSource(imageElement);
+
+  function errorCallback() {
+    // Drop the event parameter when invoking userCallback.
+    userCallback();
+  }
+
+  /**
+   * @param {?WebInspector.Resource} resource
+   * @return {boolean}
+   */
+  function isImageResource(resource) {
+    return !!resource && resource.resourceType() === WebInspector.resourceTypes.Image;
+  }
+
+  function buildContent() {
+    var container = createElement('table');
+    container.className = 'image-preview-container';
+    var naturalWidth = precomputedFeatures ? precomputedFeatures.naturalWidth : imageElement.naturalWidth;
+    var naturalHeight = precomputedFeatures ? precomputedFeatures.naturalHeight : imageElement.naturalHeight;
+    var offsetWidth = precomputedFeatures ? precomputedFeatures.offsetWidth : naturalWidth;
+    var offsetHeight = precomputedFeatures ? precomputedFeatures.offsetHeight : naturalHeight;
+    var description;
+    if (showDimensions) {
+      if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
+        description = WebInspector.UIString('%d \xd7 %d pixels', offsetWidth, offsetHeight);
+      else
+        description = WebInspector.UIString(
+            '%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)', offsetWidth, offsetHeight, naturalWidth, naturalHeight);
     }
 
-    var imageElement = createElement("img");
-    imageElement.addEventListener("load", buildContent, false);
-    imageElement.addEventListener("error", errorCallback, false);
-    resource.populateImageSource(imageElement);
-
-    function errorCallback()
-    {
-        // Drop the event parameter when invoking userCallback.
-        userCallback();
-    }
-
-    /**
-     * @param {?WebInspector.Resource} resource
-     * @return {boolean}
-     */
-    function isImageResource(resource)
-    {
-        return !!resource && resource.resourceType() === WebInspector.resourceTypes.Image;
-    }
-
-    function buildContent()
-    {
-        var container = createElement("table");
-        container.className = "image-preview-container";
-        var naturalWidth = precomputedFeatures ? precomputedFeatures.naturalWidth : imageElement.naturalWidth;
-        var naturalHeight = precomputedFeatures ? precomputedFeatures.naturalHeight : imageElement.naturalHeight;
-        var offsetWidth = precomputedFeatures ? precomputedFeatures.offsetWidth : naturalWidth;
-        var offsetHeight = precomputedFeatures ? precomputedFeatures.offsetHeight : naturalHeight;
-        var description;
-        if (showDimensions) {
-            if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
-                description = WebInspector.UIString("%d \xd7 %d pixels", offsetWidth, offsetHeight);
-            else
-                description = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)", offsetWidth, offsetHeight, naturalWidth, naturalHeight);
-        }
-
-        container.createChild("tr").createChild("td", "image-container").appendChild(imageElement);
-        if (description)
-            container.createChild("tr").createChild("td").createChild("span", "description").textContent = description;
-        if (imageURL !== originalImageURL)
-            container.createChild("tr").createChild("td").createChild("span", "description").textContent = String.sprintf("currentSrc: %s", imageURL.trimMiddle(100));
-        userCallback(container);
-    }
+    container.createChild('tr').createChild('td', 'image-container').appendChild(imageElement);
+    if (description)
+      container.createChild('tr').createChild('td').createChild('span', 'description').textContent = description;
+    if (imageURL !== originalImageURL)
+      container.createChild('tr').createChild('td').createChild('span', 'description').textContent =
+          String.sprintf('currentSrc: %s', imageURL.trimMiddle(100));
+    userCallback(container);
+  }
 };
 
 /**
  * @param {!WebInspector.Target} target
  * @param {!WebInspector.Linkifier} linkifier
  * @param {!RuntimeAgent.StackTrace=} stackTrace
  * @return {!Element}
  */
-WebInspector.DOMPresentationUtils.buildStackTracePreviewContents = function(target, linkifier, stackTrace)
-{
-    var element = createElement("span");
-    element.style.display = "inline-block";
-    var shadowRoot = WebInspector.createShadowRootWithCoreStyles(element, "components/domUtils.css");
-    var contentElement = shadowRoot.createChild("table", "stack-preview-container");
+WebInspector.DOMPresentationUtils.buildStackTracePreviewContents = function(target, linkifier, stackTrace) {
+  var element = createElement('span');
+  element.style.display = 'inline-block';
+  var shadowRoot = WebInspector.createShadowRootWithCoreStyles(element, 'components/domUtils.css');
+  var contentElement = shadowRoot.createChild('table', 'stack-preview-container');
 
-    /**
-     * @param {!RuntimeAgent.StackTrace} stackTrace
-     */
-    function appendStackTrace(stackTrace)
-    {
-        for (var stackFrame of stackTrace.callFrames) {
-            var row = createElement("tr");
-            row.createChild("td").textContent = "\n";
-            row.createChild("td", "function-name").textContent = WebInspector.beautifyFunctionName(stackFrame.functionName);
-            var link = linkifier.maybeLinkifyConsoleCallFrame(target, stackFrame);
-            if (link) {
-                row.createChild("td").textContent = " @ ";
-                row.createChild("td").appendChild(link);
-            }
-            contentElement.appendChild(row);
-        }
+  /**
+   * @param {!RuntimeAgent.StackTrace} stackTrace
+   */
+  function appendStackTrace(stackTrace) {
+    for (var stackFrame of stackTrace.callFrames) {
+      var row = createElement('tr');
+      row.createChild('td').textContent = '\n';
+      row.createChild('td', 'function-name').textContent = WebInspector.beautifyFunctionName(stackFrame.functionName);
+      var link = linkifier.maybeLinkifyConsoleCallFrame(target, stackFrame);
+      if (link) {
+        row.createChild('td').textContent = ' @ ';
+        row.createChild('td').appendChild(link);
+      }
+      contentElement.appendChild(row);
     }
+  }
 
-    if (!stackTrace)
-        return element;
+  if (!stackTrace)
+    return element;
 
-    appendStackTrace(stackTrace);
+  appendStackTrace(stackTrace);
 
-    var asyncStackTrace = stackTrace.parent;
-    while (asyncStackTrace) {
-        if (!asyncStackTrace.callFrames.length) {
-            asyncStackTrace = asyncStackTrace.parent;
-            continue;
-        }
-        var row = contentElement.createChild("tr");
-        row.createChild("td").textContent = "\n";
-        row.createChild("td", "stack-preview-async-description").textContent = WebInspector.asyncStackTraceLabel(asyncStackTrace.description);
-        row.createChild("td");
-        row.createChild("td");
-        appendStackTrace(asyncStackTrace);
-        asyncStackTrace = asyncStackTrace.parent;
+  var asyncStackTrace = stackTrace.parent;
+  while (asyncStackTrace) {
+    if (!asyncStackTrace.callFrames.length) {
+      asyncStackTrace = asyncStackTrace.parent;
+      continue;
     }
+    var row = contentElement.createChild('tr');
+    row.createChild('td').textContent = '\n';
+    row.createChild('td', 'stack-preview-async-description').textContent =
+        WebInspector.asyncStackTraceLabel(asyncStackTrace.description);
+    row.createChild('td');
+    row.createChild('td');
+    appendStackTrace(asyncStackTrace);
+    asyncStackTrace = asyncStackTrace.parent;
+  }
 
-    return element;
+  return element;
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} justSelector
  * @return {string}
  */
-WebInspector.DOMPresentationUtils.fullQualifiedSelector = function(node, justSelector)
-{
-    if (node.nodeType() !== Node.ELEMENT_NODE)
-        return node.localName() || node.nodeName().toLowerCase();
-    return WebInspector.DOMPresentationUtils.cssPath(node, justSelector);
+WebInspector.DOMPresentationUtils.fullQualifiedSelector = function(node, justSelector) {
+  if (node.nodeType() !== Node.ELEMENT_NODE)
+    return node.localName() || node.nodeName().toLowerCase();
+  return WebInspector.DOMPresentationUtils.cssPath(node, justSelector);
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @return {string}
  */
-WebInspector.DOMPresentationUtils.simpleSelector = function(node)
-{
-    var lowerCaseName = node.localName() || node.nodeName().toLowerCase();
-    if (node.nodeType() !== Node.ELEMENT_NODE)
-        return lowerCaseName;
-    if (lowerCaseName === "input" && node.getAttribute("type") && !node.getAttribute("id") && !node.getAttribute("class"))
-        return lowerCaseName + "[type=\"" + node.getAttribute("type") + "\"]";
-    if (node.getAttribute("id"))
-        return lowerCaseName + "#" + node.getAttribute("id");
-    if (node.getAttribute("class"))
-        return (lowerCaseName === "div" ? "" : lowerCaseName) + "." + node.getAttribute("class").trim().replace(/\s+/g, ".");
+WebInspector.DOMPresentationUtils.simpleSelector = function(node) {
+  var lowerCaseName = node.localName() || node.nodeName().toLowerCase();
+  if (node.nodeType() !== Node.ELEMENT_NODE)
     return lowerCaseName;
+  if (lowerCaseName === 'input' && node.getAttribute('type') && !node.getAttribute('id') && !node.getAttribute('class'))
+    return lowerCaseName + '[type="' + node.getAttribute('type') + '"]';
+  if (node.getAttribute('id'))
+    return lowerCaseName + '#' + node.getAttribute('id');
+  if (node.getAttribute('class'))
+    return (lowerCaseName === 'div' ? '' : lowerCaseName) + '.' +
+        node.getAttribute('class').trim().replace(/\s+/g, '.');
+  return lowerCaseName;
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} optimized
  * @return {string}
  */
-WebInspector.DOMPresentationUtils.cssPath = function(node, optimized)
-{
-    if (node.nodeType() !== Node.ELEMENT_NODE)
-        return "";
+WebInspector.DOMPresentationUtils.cssPath = function(node, optimized) {
+  if (node.nodeType() !== Node.ELEMENT_NODE)
+    return '';
 
-    var steps = [];
-    var contextNode = node;
-    while (contextNode) {
-        var step = WebInspector.DOMPresentationUtils._cssPathStep(contextNode, !!optimized, contextNode === node);
-        if (!step)
-            break; // Error - bail out early.
-        steps.push(step);
-        if (step.optimized)
-            break;
-        contextNode = contextNode.parentNode;
-    }
+  var steps = [];
+  var contextNode = node;
+  while (contextNode) {
+    var step = WebInspector.DOMPresentationUtils._cssPathStep(contextNode, !!optimized, contextNode === node);
+    if (!step)
+      break;  // Error - bail out early.
+    steps.push(step);
+    if (step.optimized)
+      break;
+    contextNode = contextNode.parentNode;
+  }
 
-    steps.reverse();
-    return steps.join(" > ");
+  steps.reverse();
+  return steps.join(' > ');
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {boolean} optimized
  * @param {boolean} isTargetNode
  * @return {?WebInspector.DOMNodePathStep}
  */
-WebInspector.DOMPresentationUtils._cssPathStep = function(node, optimized, isTargetNode)
-{
-    if (node.nodeType() !== Node.ELEMENT_NODE)
-        return null;
+WebInspector.DOMPresentationUtils._cssPathStep = function(node, optimized, isTargetNode) {
+  if (node.nodeType() !== Node.ELEMENT_NODE)
+    return null;
 
-    var id = node.getAttribute("id");
-    if (optimized) {
-        if (id)
-            return new WebInspector.DOMNodePathStep(idSelector(id), true);
-        var nodeNameLower = node.nodeName().toLowerCase();
-        if (nodeNameLower === "body" || nodeNameLower === "head" || nodeNameLower === "html")
-            return new WebInspector.DOMNodePathStep(node.nodeNameInCorrectCase(), true);
+  var id = node.getAttribute('id');
+  if (optimized) {
+    if (id)
+      return new WebInspector.DOMNodePathStep(idSelector(id), true);
+    var nodeNameLower = node.nodeName().toLowerCase();
+    if (nodeNameLower === 'body' || nodeNameLower === 'head' || nodeNameLower === 'html')
+      return new WebInspector.DOMNodePathStep(node.nodeNameInCorrectCase(), true);
+  }
+  var nodeName = node.nodeNameInCorrectCase();
+
+  if (id)
+    return new WebInspector.DOMNodePathStep(nodeName + idSelector(id), true);
+  var parent = node.parentNode;
+  if (!parent || parent.nodeType() === Node.DOCUMENT_NODE)
+    return new WebInspector.DOMNodePathStep(nodeName, true);
+
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @return {!Array.<string>}
+   */
+  function prefixedElementClassNames(node) {
+    var classAttribute = node.getAttribute('class');
+    if (!classAttribute)
+      return [];
+
+    return classAttribute.split(/\s+/g).filter(Boolean).map(function(name) {
+      // The prefix is required to store "__proto__" in a object-based map.
+      return '$' + name;
+    });
+  }
+
+  /**
+   * @param {string} id
+   * @return {string}
+   */
+  function idSelector(id) {
+    return '#' + escapeIdentifierIfNeeded(id);
+  }
+
+  /**
+   * @param {string} ident
+   * @return {string}
+   */
+  function escapeIdentifierIfNeeded(ident) {
+    if (isCSSIdentifier(ident))
+      return ident;
+    var shouldEscapeFirst = /^(?:[0-9]|-[0-9-]?)/.test(ident);
+    var lastIndex = ident.length - 1;
+    return ident.replace(/./g, function(c, i) {
+      return ((shouldEscapeFirst && i === 0) || !isCSSIdentChar(c)) ? escapeAsciiChar(c, i === lastIndex) : c;
+    });
+  }
+
+  /**
+   * @param {string} c
+   * @param {boolean} isLast
+   * @return {string}
+   */
+  function escapeAsciiChar(c, isLast) {
+    return '\\' + toHexByte(c) + (isLast ? '' : ' ');
+  }
+
+  /**
+   * @param {string} c
+   */
+  function toHexByte(c) {
+    var hexByte = c.charCodeAt(0).toString(16);
+    if (hexByte.length === 1)
+      hexByte = '0' + hexByte;
+    return hexByte;
+  }
+
+  /**
+   * @param {string} c
+   * @return {boolean}
+   */
+  function isCSSIdentChar(c) {
+    if (/[a-zA-Z0-9_-]/.test(c))
+      return true;
+    return c.charCodeAt(0) >= 0xA0;
+  }
+
+  /**
+   * @param {string} value
+   * @return {boolean}
+   */
+  function isCSSIdentifier(value) {
+    return /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/.test(value);
+  }
+
+  var prefixedOwnClassNamesArray = prefixedElementClassNames(node);
+  var needsClassNames = false;
+  var needsNthChild = false;
+  var ownIndex = -1;
+  var elementIndex = -1;
+  var siblings = parent.children();
+  for (var i = 0; (ownIndex === -1 || !needsNthChild) && i < siblings.length; ++i) {
+    var sibling = siblings[i];
+    if (sibling.nodeType() !== Node.ELEMENT_NODE)
+      continue;
+    elementIndex += 1;
+    if (sibling === node) {
+      ownIndex = elementIndex;
+      continue;
     }
-    var nodeName = node.nodeNameInCorrectCase();
+    if (needsNthChild)
+      continue;
+    if (sibling.nodeNameInCorrectCase() !== nodeName)
+      continue;
 
-    if (id)
-        return new WebInspector.DOMNodePathStep(nodeName + idSelector(id), true);
-    var parent = node.parentNode;
-    if (!parent || parent.nodeType() === Node.DOCUMENT_NODE)
-        return new WebInspector.DOMNodePathStep(nodeName, true);
+    needsClassNames = true;
+    var ownClassNames = new Set(prefixedOwnClassNamesArray);
+    if (!ownClassNames.size) {
+      needsNthChild = true;
+      continue;
+    }
+    var siblingClassNamesArray = prefixedElementClassNames(sibling);
+    for (var j = 0; j < siblingClassNamesArray.length; ++j) {
+      var siblingClass = siblingClassNamesArray[j];
+      if (!ownClassNames.has(siblingClass))
+        continue;
+      ownClassNames.delete(siblingClass);
+      if (!ownClassNames.size) {
+        needsNthChild = true;
+        break;
+      }
+    }
+  }
 
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {!Array.<string>}
-     */
-    function prefixedElementClassNames(node)
-    {
-        var classAttribute = node.getAttribute("class");
-        if (!classAttribute)
-            return [];
+  var result = nodeName;
+  if (isTargetNode && nodeName.toLowerCase() === 'input' && node.getAttribute('type') && !node.getAttribute('id') &&
+      !node.getAttribute('class'))
+    result += '[type="' + node.getAttribute('type') + '"]';
+  if (needsNthChild) {
+    result += ':nth-child(' + (ownIndex + 1) + ')';
+  } else if (needsClassNames) {
+    for (var prefixedName of prefixedOwnClassNamesArray)
+      result += '.' + escapeIdentifierIfNeeded(prefixedName.substr(1));
+  }
 
-        return classAttribute.split(/\s+/g).filter(Boolean).map(function(name) {
-            // The prefix is required to store "__proto__" in a object-based map.
-            return "$" + name;
-        });
-    }
-
-    /**
-     * @param {string} id
-     * @return {string}
-     */
-    function idSelector(id)
-    {
-        return "#" + escapeIdentifierIfNeeded(id);
-    }
-
-    /**
-     * @param {string} ident
-     * @return {string}
-     */
-    function escapeIdentifierIfNeeded(ident)
-    {
-        if (isCSSIdentifier(ident))
-            return ident;
-        var shouldEscapeFirst = /^(?:[0-9]|-[0-9-]?)/.test(ident);
-        var lastIndex = ident.length - 1;
-        return ident.replace(/./g, function(c, i) {
-            return ((shouldEscapeFirst && i === 0) || !isCSSIdentChar(c)) ? escapeAsciiChar(c, i === lastIndex) : c;
-        });
-    }
-
-    /**
-     * @param {string} c
-     * @param {boolean} isLast
-     * @return {string}
-     */
-    function escapeAsciiChar(c, isLast)
-    {
-        return "\\" + toHexByte(c) + (isLast ? "" : " ");
-    }
-
-    /**
-     * @param {string} c
-     */
-    function toHexByte(c)
-    {
-        var hexByte = c.charCodeAt(0).toString(16);
-        if (hexByte.length === 1)
-            hexByte = "0" + hexByte;
-        return hexByte;
-    }
-
-    /**
-     * @param {string} c
-     * @return {boolean}
-     */
-    function isCSSIdentChar(c)
-    {
-        if (/[a-zA-Z0-9_-]/.test(c))
-            return true;
-        return c.charCodeAt(0) >= 0xA0;
-    }
-
-    /**
-     * @param {string} value
-     * @return {boolean}
-     */
-    function isCSSIdentifier(value)
-    {
-        return /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/.test(value);
-    }
-
-    var prefixedOwnClassNamesArray = prefixedElementClassNames(node);
-    var needsClassNames = false;
-    var needsNthChild = false;
-    var ownIndex = -1;
-    var elementIndex = -1;
-    var siblings = parent.children();
-    for (var i = 0; (ownIndex === -1 || !needsNthChild) && i < siblings.length; ++i) {
-        var sibling = siblings[i];
-        if (sibling.nodeType() !== Node.ELEMENT_NODE)
-            continue;
-        elementIndex += 1;
-        if (sibling === node) {
-            ownIndex = elementIndex;
-            continue;
-        }
-        if (needsNthChild)
-            continue;
-        if (sibling.nodeNameInCorrectCase() !== nodeName)
-            continue;
-
-        needsClassNames = true;
-        var ownClassNames = new Set(prefixedOwnClassNamesArray);
-        if (!ownClassNames.size) {
-            needsNthChild = true;
-            continue;
-        }
-        var siblingClassNamesArray = prefixedElementClassNames(sibling);
-        for (var j = 0; j < siblingClassNamesArray.length; ++j) {
-            var siblingClass = siblingClassNamesArray[j];
-            if (!ownClassNames.has(siblingClass))
-                continue;
-            ownClassNames.delete(siblingClass);
-            if (!ownClassNames.size) {
-                needsNthChild = true;
-                break;
-            }
-        }
-    }
-
-    var result = nodeName;
-    if (isTargetNode && nodeName.toLowerCase() === "input" && node.getAttribute("type") && !node.getAttribute("id") && !node.getAttribute("class"))
-        result += "[type=\"" + node.getAttribute("type") + "\"]";
-    if (needsNthChild) {
-        result += ":nth-child(" + (ownIndex + 1) + ")";
-    } else if (needsClassNames) {
-        for (var prefixedName of prefixedOwnClassNamesArray)
-            result += "." + escapeIdentifierIfNeeded(prefixedName.substr(1));
-    }
-
-    return new WebInspector.DOMNodePathStep(result, false);
+  return new WebInspector.DOMNodePathStep(result, false);
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} optimized
  * @return {string}
  */
-WebInspector.DOMPresentationUtils.xPath = function(node, optimized)
-{
-    if (node.nodeType() === Node.DOCUMENT_NODE)
-        return "/";
+WebInspector.DOMPresentationUtils.xPath = function(node, optimized) {
+  if (node.nodeType() === Node.DOCUMENT_NODE)
+    return '/';
 
-    var steps = [];
-    var contextNode = node;
-    while (contextNode) {
-        var step = WebInspector.DOMPresentationUtils._xPathValue(contextNode, optimized);
-        if (!step)
-            break; // Error - bail out early.
-        steps.push(step);
-        if (step.optimized)
-            break;
-        contextNode = contextNode.parentNode;
-    }
+  var steps = [];
+  var contextNode = node;
+  while (contextNode) {
+    var step = WebInspector.DOMPresentationUtils._xPathValue(contextNode, optimized);
+    if (!step)
+      break;  // Error - bail out early.
+    steps.push(step);
+    if (step.optimized)
+      break;
+    contextNode = contextNode.parentNode;
+  }
 
-    steps.reverse();
-    return (steps.length && steps[0].optimized ? "" : "/") + steps.join("/");
+  steps.reverse();
+  return (steps.length && steps[0].optimized ? '' : '/') + steps.join('/');
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @param {boolean=} optimized
  * @return {?WebInspector.DOMNodePathStep}
  */
-WebInspector.DOMPresentationUtils._xPathValue = function(node, optimized)
-{
-    var ownValue;
-    var ownIndex = WebInspector.DOMPresentationUtils._xPathIndex(node);
-    if (ownIndex === -1)
-        return null; // Error.
+WebInspector.DOMPresentationUtils._xPathValue = function(node, optimized) {
+  var ownValue;
+  var ownIndex = WebInspector.DOMPresentationUtils._xPathIndex(node);
+  if (ownIndex === -1)
+    return null;  // Error.
 
-    switch (node.nodeType()) {
+  switch (node.nodeType()) {
     case Node.ELEMENT_NODE:
-        if (optimized && node.getAttribute("id"))
-            return new WebInspector.DOMNodePathStep("//*[@id=\"" + node.getAttribute("id") + "\"]", true);
-        ownValue = node.localName();
-        break;
+      if (optimized && node.getAttribute('id'))
+        return new WebInspector.DOMNodePathStep('//*[@id="' + node.getAttribute('id') + '"]', true);
+      ownValue = node.localName();
+      break;
     case Node.ATTRIBUTE_NODE:
-        ownValue = "@" + node.nodeName();
-        break;
+      ownValue = '@' + node.nodeName();
+      break;
     case Node.TEXT_NODE:
     case Node.CDATA_SECTION_NODE:
-        ownValue = "text()";
-        break;
+      ownValue = 'text()';
+      break;
     case Node.PROCESSING_INSTRUCTION_NODE:
-        ownValue = "processing-instruction()";
-        break;
+      ownValue = 'processing-instruction()';
+      break;
     case Node.COMMENT_NODE:
-        ownValue = "comment()";
-        break;
+      ownValue = 'comment()';
+      break;
     case Node.DOCUMENT_NODE:
-        ownValue = "";
-        break;
+      ownValue = '';
+      break;
     default:
-        ownValue = "";
-        break;
-    }
+      ownValue = '';
+      break;
+  }
 
-    if (ownIndex > 0)
-        ownValue += "[" + ownIndex + "]";
+  if (ownIndex > 0)
+    ownValue += '[' + ownIndex + ']';
 
-    return new WebInspector.DOMNodePathStep(ownValue, node.nodeType() === Node.DOCUMENT_NODE);
+  return new WebInspector.DOMNodePathStep(ownValue, node.nodeType() === Node.DOCUMENT_NODE);
 };
 
 /**
  * @param {!WebInspector.DOMNode} node
  * @return {number}
  */
-WebInspector.DOMPresentationUtils._xPathIndex = function(node)
-{
-    // Returns -1 in case of error, 0 if no siblings matching the same expression, <XPath index among the same expression-matching sibling nodes> otherwise.
-    function areNodesSimilar(left, right)
-    {
-        if (left === right)
-            return true;
+WebInspector.DOMPresentationUtils._xPathIndex = function(node) {
+  // Returns -1 in case of error, 0 if no siblings matching the same expression, <XPath index among the same expression-matching sibling nodes> otherwise.
+  function areNodesSimilar(left, right) {
+    if (left === right)
+      return true;
 
-        if (left.nodeType() === Node.ELEMENT_NODE && right.nodeType() === Node.ELEMENT_NODE)
-            return left.localName() === right.localName();
+    if (left.nodeType() === Node.ELEMENT_NODE && right.nodeType() === Node.ELEMENT_NODE)
+      return left.localName() === right.localName();
 
-        if (left.nodeType() === right.nodeType())
-            return true;
+    if (left.nodeType() === right.nodeType())
+      return true;
 
-        // XPath treats CDATA as text nodes.
-        var leftType = left.nodeType() === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : left.nodeType();
-        var rightType = right.nodeType() === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : right.nodeType();
-        return leftType === rightType;
+    // XPath treats CDATA as text nodes.
+    var leftType = left.nodeType() === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : left.nodeType();
+    var rightType = right.nodeType() === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : right.nodeType();
+    return leftType === rightType;
+  }
+
+  var siblings = node.parentNode ? node.parentNode.children() : null;
+  if (!siblings)
+    return 0;  // Root node - no siblings.
+  var hasSameNamedElements;
+  for (var i = 0; i < siblings.length; ++i) {
+    if (areNodesSimilar(node, siblings[i]) && siblings[i] !== node) {
+      hasSameNamedElements = true;
+      break;
     }
-
-    var siblings = node.parentNode ? node.parentNode.children() : null;
-    if (!siblings)
-        return 0; // Root node - no siblings.
-    var hasSameNamedElements;
-    for (var i = 0; i < siblings.length; ++i) {
-        if (areNodesSimilar(node, siblings[i]) && siblings[i] !== node) {
-            hasSameNamedElements = true;
-            break;
-        }
+  }
+  if (!hasSameNamedElements)
+    return 0;
+  var ownIndex = 1;  // XPath indices start with 1.
+  for (var i = 0; i < siblings.length; ++i) {
+    if (areNodesSimilar(node, siblings[i])) {
+      if (siblings[i] === node)
+        return ownIndex;
+      ++ownIndex;
     }
-    if (!hasSameNamedElements)
-        return 0;
-    var ownIndex = 1; // XPath indices start with 1.
-    for (var i = 0; i < siblings.length; ++i) {
-        if (areNodesSimilar(node, siblings[i])) {
-            if (siblings[i] === node)
-                return ownIndex;
-            ++ownIndex;
-        }
-    }
-    return -1; // An error occurred: |node| not found in parent's children.
+  }
+  return -1;  // An error occurred: |node| not found in parent's children.
 };
 
 /**
- * @constructor
- * @param {string} value
- * @param {boolean} optimized
+ * @unrestricted
  */
-WebInspector.DOMNodePathStep = function(value, optimized)
-{
+WebInspector.DOMNodePathStep = class {
+  /**
+   * @param {string} value
+   * @param {boolean} optimized
+   */
+  constructor(value, optimized) {
     this.value = value;
     this.optimized = optimized || false;
-};
+  }
 
-WebInspector.DOMNodePathStep.prototype = {
-    /**
-     * @override
-     * @return {string}
-     */
-    toString: function()
-    {
-        return this.value;
-    }
+  /**
+   * @override
+   * @return {string}
+   */
+  toString() {
+    return this.value;
+  }
 };
 
 /**
  * @interface
  */
-WebInspector.DOMPresentationUtils.MarkerDecorator = function()
-{
-};
+WebInspector.DOMPresentationUtils.MarkerDecorator = function() {};
 
 WebInspector.DOMPresentationUtils.MarkerDecorator.prototype = {
-    /**
-     * @param {!WebInspector.DOMNode} node
-     * @return {?{title: string, color: string}}
-     */
-    decorate: function(node) { }
+  /**
+   * @param {!WebInspector.DOMNode} node
+   * @return {?{title: string, color: string}}
+   */
+  decorate: function(node) {}
 };
 
 /**
- * @constructor
  * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
- * @param {!Runtime.Extension} extension
+ * @unrestricted
  */
-WebInspector.DOMPresentationUtils.GenericDecorator = function(extension)
-{
+WebInspector.DOMPresentationUtils.GenericDecorator = class {
+  /**
+   * @param {!Runtime.Extension} extension
+   */
+  constructor(extension) {
     this._title = WebInspector.UIString(extension.title());
-    this._color = extension.descriptor()["color"];
+    this._color = extension.descriptor()['color'];
+  }
+
+  /**
+   * @override
+   * @param {!WebInspector.DOMNode} node
+   * @return {?{title: string, color: string}}
+   */
+  decorate(node) {
+    return {title: this._title, color: this._color};
+  }
 };
-
-WebInspector.DOMPresentationUtils.GenericDecorator.prototype = {
-    /**
-     * @override
-     * @param {!WebInspector.DOMNode} node
-     * @return {?{title: string, color: string}}
-     */
-    decorate: function(node)
-    {
-        return { title: this._title, color: this._color };
-    }
-};