[DevTools] Improved function preview everywhere

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

Index: third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
index d2e364d4d0f9751b3558f8bee03bf2a99922a468..73e29f79e0a47ddb2c20b694f7ff369c78058778 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -1051,6 +1051,8 @@ WebInspector.ObjectPropertiesSection.createNameElement = function(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
@@ -1058,7 +1060,8 @@ WebInspector.ObjectPropertiesSection.createNameElement = function(name)
 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);
@@ -1204,6 +1207,14 @@ WebInspector.ObjectPropertiesSection.formatObjectAsFunction = function(func, ele
             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");
@@ -1214,7 +1225,7 @@ WebInspector.ObjectPropertiesSection.formatObjectAsFunction = function(func, ele
 
         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;
         }
 
@@ -1231,7 +1242,7 @@ WebInspector.ObjectPropertiesSection.formatObjectAsFunction = function(func, ele
         {
             var tokenize = tokenizerFactory.createTokenizer("text/javascript");
             tokenize(text, processToken);
-            element.textContent = (functionName || "anonymous") + "(" + (params || []).join(", ") + ")";
+            element.createTextChild((functionName || "anonymous") + "(" + (params || []).join(", ") + ")");
         }
 
         var doneProcessing = false;