DevTools: clean up ObjectPropertiesSection.createValueElement

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

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * 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:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 119 matching lines @@
   }
 
   /**
    * @param {?string=} description
    * @param {boolean=} includePreview
    * @param {string=} defaultName
    * @return {!Element} valueElement
    */
   static valueElementForFunctionDescription(description, includePreview, defaultName) {
     var valueElement = createElementWithClass('span', 'object-value-function');
-    var text = description.replace(/^function [gs]et /, 'function ');
+    var text = description ? description.replace(/^function [gs]et /, 'function ') : '';
     defaultName = defaultName || '';
 
     // This set of best-effort regular expressions captures common function descriptions.
     // Ideally, some parser would provide prefix, arguments, function body text separately.
     var isAsync = text.startsWith('async function ');
     var isGenerator = text.startsWith('function* ');
     var isGeneratorShorthand = text.startsWith('*');
     var isBasic = !isGenerator && text.startsWith('function ');
     var isClass = text.startsWith('class ') || text.startsWith('class{');
     var firstArrowIndex = text.indexOf('=>');
@@ skipping 80 matching lines @@
   }
 
   /**
    * @param {!SDK.RemoteObject} value
    * @param {boolean} wasThrown
    * @param {!Element=} parentElement
    * @param {!Components.Linkifier=} linkifier
    * @return {!Element}
    */
   static createValueElement(value, wasThrown, parentElement, linkifier) {
-    var valueElement = createElementWithClass('span', 'value');
+    var valueElement;
     var type = value.type;
     var subtype = value.subtype;
     var description = value.description;
-    var prefix;
-    var valueText;
-    var suffix;
-    if (wasThrown) {
-      prefix = '[Exception: ';
-      valueText = description;
-      suffix = ']';
-    } else if (type === 'string' && typeof description === 'string') {
-      // Render \n as a nice unicode cr symbol.
-      prefix = '"';
-      valueText = description.replace(/\n/g, '\u21B5');
-      suffix = '"';
-    } else if (type !== 'object' || subtype !== 'node') {
-      valueText = description;
-    }
-
-    if (type === 'function') {
-      valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(description);
-    } else if (type !== 'number' || valueText.indexOf('e') === -1) {
-      valueElement.setTextContentTruncatedIfNeeded(valueText || '');
-      if (prefix)
-        valueElement.insertBefore(createTextNode(prefix), valueElement.firstChild);
-      if (suffix)
-        valueElement.createTextChild(suffix);
-    } else {
-      var numberParts = valueText.split('e');
-      var mantissa = valueElement.createChild('span', 'object-value-scientific-notation-mantissa');
-      mantissa.textContent = numberParts[0];
-      var exponent = valueElement.createChild('span', 'object-value-scientific-notation-exponent');
-      exponent.textContent = 'e' + numberParts[1];
-      valueElement.classList.add('object-value-scientific-notation-number');
-      if (parentElement)  // FIXME: do it in the caller.
-        parentElement.classList.add('hbox');
-    }
-
-    if (wasThrown)
-      valueElement.classList.add('error');
-    if (subtype || type)
-      valueElement.classList.add('object-value-' + (subtype || type));
-
-    if (type === 'object' && subtype === 'node' && description) {
-      Components.DOMPresentationUtils.createSpansForNodeTitle(valueElement, description);
-      valueElement.addEventListener('click', mouseClick, false);
-      valueElement.addEventListener('mousemove', mouseMove, false);
-      valueElement.addEventListener('mouseleave', mouseLeave, false);
-    } else {
-      valueElement.title = description || '';
-    }
-
     if (type === 'object' && subtype === 'internal#location') {
       var rawLocation = value.debuggerModel().createRawLocationByScriptId(
           value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
       if (rawLocation && linkifier)
         return linkifier.linkifyRawLocation(rawLocation, '');
-      valueElement.textContent = '<unknown>';
+      valueElement = createUnknownInternalLocationElement();
+      valueElement.title = description;
+    } else if (type === 'string' && typeof description === 'string') {
+      valueElement = createStringElement();
+      valueElement.title = description;

[dgozman, 2017/01/09 23:58:52]

Let's set title inside of respective functions.

[luoe, 2017/01/10 22:22:11]

Done.

+    } else if (type === 'function') {
+      valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(description);
+      valueElement.title = description;
+    } else if (type === 'object' && subtype === 'node' && description) {
+      valueElement = createNodeElement();
+    } else if (type === 'number' && description && description.indexOf('e') !== -1) {
+      valueElement = createNumberWithExponentElement();
+      valueElement.title = description;
+      if (parentElement)  // FIXME: do it in the caller.
+        parentElement.classList.add('hbox');
+    } else {
+      valueElement = createElementWithClass('span', 'object-value-' + (subtype || type));
+      valueElement.setTextContentTruncatedIfNeeded(description);
+      valueElement.title = description;

[dgozman, 2017/01/09 23:58:52]

description || ''

[luoe, 2017/01/10 22:22:11]

Done.

     }
 
-    function mouseMove() {
-      SDK.DOMModel.highlightObjectAsDOMNode(value);
+    if (wasThrown) {
+      var wrapperElement = createElementWithClass('span', 'error value');
+      wrapperElement.createTextChild('[' + Common.UIString('Exception') + ': ');
+      wrapperElement.appendChild(valueElement);
+      wrapperElement.createTextChild(']');
+      return wrapperElement;
     }
+    valueElement.classList.add('value');

[dgozman, 2017/01/09 23:58:52]

Don't you need this in case of wasThrown?

[luoe, 2017/01/10 22:22:11]

It's covered in line 272 on the wrapper.

+    return valueElement;
 
-    function mouseLeave() {
-      SDK.DOMModel.hideDOMNodeHighlight();
+    /**
+     * @return {!Element}
+     */
+    function createUnknownInternalLocationElement() {
+      var valueElement = createElementWithClass('span');
+      valueElement.textContent = '<' + Common.UIString('unknown') + '>';
+      return valueElement;
     }
 
     /**
-     * @param {!Event} event
+     * @return {!Element}
      */
-    function mouseClick(event) {
-      Common.Revealer.reveal(value);
-      event.consume(true);
+    function createStringElement() {
+      var valueElement = createElementWithClass('span', 'object-value-string');
+      valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
+      valueElement.createTextChild('').setTextContentTruncatedIfNeeded(description.replace(/\n/g, '\u21B5'));
+      valueElement.createChild('span', 'object-value-string-quote').textContent = '"';
+      return valueElement;
     }
 
-    return valueElement;
+    /**
+     * @return {!Element}
+     */
+    function createNodeElement() {
+      var valueElement = createElementWithClass('span', 'object-value-node');
+      Components.DOMPresentationUtils.createSpansForNodeTitle(valueElement, /** @type {string} */ (description));
+      valueElement.addEventListener('click', event => {
+        Common.Revealer.reveal(value);
+        event.consume(true);
+      }, false);
+      valueElement.addEventListener('mousemove', () => SDK.DOMModel.highlightObjectAsDOMNode(value), false);
+      valueElement.addEventListener('mouseleave', SDK.DOMModel.hideDOMNodeHighlight, false);

[dgozman, 2017/01/09 23:58:52]

() => SDK.DOMModel.hideDOMNodeHighlight()

[luoe, 2017/01/10 22:22:11]

Done.

+      return valueElement;
+    }
+
+    /**
+     * @return {!Element}
+     */
+    function createNumberWithExponentElement() {
+      var valueElement = createElementWithClass('span', 'object-value-number');
+      var numberParts = description.split('e');
+      valueElement.createChild('span', 'object-value-scientific-notation-mantissa').textContent = numberParts[0];
+      valueElement.createChild('span', 'object-value-scientific-notation-exponent').textContent = 'e' + numberParts[1];
+      valueElement.classList.add('object-value-scientific-notation-number');
+      return valueElement;
+    }
   }
 
   /**
    * @param {!SDK.RemoteObject} object
    * @return {boolean}
    */
   static _needsAlternateTitle(object) {
     return object && object.hasChildren && !object.customPreview() && object.subtype !== 'node' &&
         object.type !== 'function' && (object.type !== 'object' || object.preview);
   }
@@ skipping 1028 matching lines @@
     }
     var treeOutlineId = treeElement.treeOutline[Components.ObjectPropertiesSectionExpandController._treeOutlineId];
     result = treeOutlineId + (result ? ':' + result : '');
     treeElement[Components.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
     return result;
   }
 };
 
 Components.ObjectPropertiesSectionExpandController._cachedPathSymbol = Symbol('cachedPath');
 Components.ObjectPropertiesSectionExpandController._treeOutlineId = Symbol('treeOutlineId');