[DevTools] Improved function preview everywhere

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 1033 matching lines @@
 WebInspector.ObjectPropertiesSection.createNameElement = function(name)
 {
     var nameElement = createElementWithClass("span", "name");
     if (/^\s|\s$|^$|\n/.test(name))
         nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
     else
         nameElement.textContent = name;
     return nameElement;
 }
 
+WebInspector.ObjectPropertiesSection._functionPrefixSource = "^(?:async\\s)?function\\*?\\s";

[Dan Ehrenberg, 2016/09/28 07:20:21]

Does this path have to handle async arrow functions? If so, you may want to edit
this RegExp to highlight that async as a function prefix.

[kozy, 2016/09/28 15:32:46]

I'll address arrow functions in separate CL.

[lushnikov, 2016/09/28 18:53:19]

You can avoid double-escaping by using regex directly:

WebInspector.ObjectPropertiesSection._functionPrefix = /..../;

and use WebInspector.ObjectPropertiesSection._functionPrefix.source in :1063

[kozy, 2016/09/28 19:42:03]

Done.

+
 /**
  * @param {?string=} description
  * @return {string} valueText
  */
 WebInspector.ObjectPropertiesSection.valueTextForFunctionDescription = function(description)
 {
     var text = description.replace(/^function [gs]et /, "function ");
-    var matches = /^function\s([^)]*)/.exec(text);
+    var functionPrefixWithArguments = new RegExp(WebInspector.ObjectPropertiesSection._functionPrefixSource + "([^)]*)");
+    var matches = functionPrefixWithArguments.exec(text);
     if (!matches) {
         // process shorthand methods
         matches = /[^(]*(\([^)]*)/.exec(text);
     }
     var match = matches ? matches[1] : null;
     return match ? match.replace(/\n/g, " ") + ")" : (text || "");
 }
 
 /**
  * @param {!WebInspector.RemoteObject} value
@@ skipping 125 matching lines @@
      * @param {?WebInspector.DebuggerModel.FunctionDetails} response
      */
     function didGetDetails(response)
     {
         if (!response) {
             var valueText = WebInspector.ObjectPropertiesSection.valueTextForFunctionDescription(func.description);
             element.createTextChild(valueText);
             return;
         }
 
+        var functionPrefix = new RegExp(WebInspector.ObjectPropertiesSection._functionPrefixSource);
+        var matched = func.description.match(functionPrefix);
+        if (matched) {
+            var prefix = createElementWithClass("span", "function-prefix");
+            prefix.textContent = matched[0];
+            element.appendChild(prefix);
+        }
+
         if (linkify && response && response.location) {
             var anchor = createElement("span");
             element.classList.add("linkified");
             element.appendChild(anchor);
             element.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, response.location, undefined));
             element = anchor;
         }
 
         var text = func.description.substring(0, 200);
         if (includePreview) {
-            element.textContent = text.replace(/^function /, "") + (func.description.length > 200 ? "\u2026" : "");
+            element.createTextChild(text.replace(functionPrefix, "") + (func.description.length > 200 ? "\u2026" : ""));
             return;
         }
 
         // Now parse description and get the real params and title.
         self.runtime.extension(WebInspector.TokenizerFactory).instance().then(processTokens);
 
         var params = null;
         var functionName = response ? response.functionName : "";
 
         /**
          * @param {!WebInspector.TokenizerFactory} tokenizerFactory
          */
         function processTokens(tokenizerFactory)
         {
             var tokenize = tokenizerFactory.createTokenizer("text/javascript");
             tokenize(text, processToken);
-            element.textContent = (functionName || "anonymous") + "(" + (params || []).join(", ") + ")";
+            element.createTextChild((functionName || "anonymous") + "(" + (params || []).join(", ") + ")");
         }
 
         var doneProcessing = false;
 
         /**
          * @param {string} token
          * @param {?string} tokenType
          * @param {number} column
          * @param {number} newColumn
          */
@@ skipping 105 matching lines @@
 
             result = currentName + (result ? "." + result : "");
             current = current.parent;
         }
         var treeOutlineId = treeElement.treeOutline[WebInspector.ObjectPropertiesSectionExpandController._treeOutlineId];
         result = treeOutlineId + (result ? ":" + result : "");
         treeElement[WebInspector.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
         return result;
     }
 }