DevTools: abbreviate full qualified names in object previews.

Review URL: https://codereview.chromium.org/1054973002

git-svn-id: svn://svn.chromium.org/blink/trunk@193081 bbb929c8-8fbe-4397-9dbb-9b2b20218538

11 files changed, 90 insertions, 65 deletions

diff --git a/third_party/WebKit/LayoutTests/inspector/console/console-dir-expected.txt b/third_party/WebKit/LayoutTests/inspector/console/console-dir-expected.txt
index 34ec2e9..973287f 100644
--- a/third_party/WebKit/LayoutTests/inspector/console/console-dir-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/console/console-dir-expected.txt
@@ -38,7 +38,7 @@ console-dir.html:24 function () {}
     length: 0
     name: ""
     prototype: Object
-    __proto__: function Empty() {}
+    __proto__: Empty() {}
     <function scope>
         Global: Window
 console-dir.html:28 outer.inner
@@ -54,7 +54,7 @@ console-dir.html:34 function __proto__() { [native code] }
     caller: null
     length: 0
     name: "__proto__"
-    __proto__: function Empty() {}
+    __proto__: Empty() {}
     <function scope>
         No Scopes
 console-dir.html:39 Uint8Array[400000000]
diff --git a/third_party/WebKit/LayoutTests/inspector/console/console-format-es6-expected.txt b/third_party/WebKit/LayoutTests/inspector/console/console-format-es6-expected.txt
index b04b187..5032580 100644
--- a/third_party/WebKit/LayoutTests/inspector/console/console-format-es6-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/console/console-format-es6-expected.txt
@@ -66,7 +66,7 @@ Symbol(a)
 console-format-es6.html:11 Object {a: Symbol(), Symbol(a): 2}
     a: Symbol()
     getter: (...)
-    get getter: function getter() {}
+    get getter: getter() {}
     Symbol(a): 2
     __proto__: Object
 console-format-es6.html:12 [Object]
@@ -77,7 +77,7 @@ globals[3]
 Object {a: Symbol(), Symbol(a): 2}
     a: Symbol()
     getter: (...)
-    get getter: function getter() {}
+    get getter: getter() {}
     Symbol(a): 2
     __proto__: Object
 console-format-es6.html:11 Map {Object {a: Symbol(), Symbol(a): 2} => Object {foo: 1}}
diff --git a/third_party/WebKit/LayoutTests/inspector/console/console-format-expected.txt b/third_party/WebKit/LayoutTests/inspector/console/console-format-expected.txt
index 3b7f312..5efd0a6 100644
--- a/third_party/WebKit/LayoutTests/inspector/console/console-format-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/console/console-format-expected.txt
@@ -168,14 +168,14 @@ globals[6]
     <p id="p">Tests that console logging dumps proper messages.</p>
 console-format.html:12 func()
 console-format.html:13 [function]
-    0: function () { return 1; }
+    0: () { return 1; }
     length: 1
     __proto__: Array[0]
 globals[7]
 func()
 console-format.html:12 multilinefunc()
 console-format.html:13 [function]
-    0: function () {
+    0: () {
     length: 1
     __proto__: Array[0]
 globals[8]
@@ -226,7 +226,7 @@ globals[15]
         "x"
 console-format.html:12 Object {}
     length: (...)
-    get length: function length() { throw "Length called"; }
+    get length: length() { throw "Length called"; }
     __proto__: Object
 console-format.html:13 [Object]
     0: Object
@@ -235,7 +235,7 @@ console-format.html:13 [Object]
 globals[16]
 Object {}
     length: (...)
-    get length: function length() { throw "Length called"; }
+    get length: length() { throw "Length called"; }
     __proto__: Object
 console-format.html:12 NaN
 console-format.html:13 [NaN]
@@ -270,7 +270,7 @@ console-format.html:13 [Object]
 globals[21]
 Object {}
 console-format.html:12 [function]
-    0: function () {}
+    0: () {}
     length: 1
     __proto__: Array[0]
 console-format.html:13 [Array[1]]
@@ -300,9 +300,9 @@ globals[24]
     <svg id="svg-node"></svg>
 console-format.html:12 Object {}
     bar: (...)
-    get bar: function () { return this.bar; }
-    set bar: function (x) { this.bar = x; }
-    getFoo: function () { return this.foo; }
+    get bar: () { return this.bar; }
+    set bar: (x) { this.bar = x; }
+    getFoo: () { return this.foo; }
     __proto__: Object
 console-format.html:13 [Object]
     0: Object
@@ -311,9 +311,9 @@ console-format.html:13 [Object]
 globals[25]
 Object {}
     bar: (...)
-    get bar: function () { return this.bar; }
-    set bar: function (x) { this.bar = x; }
-    getFoo: function () { return this.foo; }
+    get bar: () { return this.bar; }
+    set bar: (x) { this.bar = x; }
+    getFoo: () { return this.foo; }
     __proto__: Object
 console-format.html:12 -0
 console-format.html:13 [-0]
@@ -328,47 +328,47 @@ globals[27]
 Object {}
 console-format.html:12 Object()
 console-format.html:13 [function]
-    0: function Object() { [native code] }
+    0: Object() { [native code] }
     length: 1
     __proto__: Array[0]
 globals[28]
 Object()
 console-format.html:12 Object {}
-    __defineGetter__: function __defineGetter__() { [native code] }
-    __defineSetter__: function __defineSetter__() { [native code] }
-    __lookupGetter__: function __lookupGetter__() { [native code] }
-    __lookupSetter__: function __lookupSetter__() { [native code] }
-    constructor: function Object() { [native code] }
-    hasOwnProperty: function hasOwnProperty() { [native code] }
-    isPrototypeOf: function isPrototypeOf() { [native code] }
-    propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
-    toLocaleString: function toLocaleString() { [native code] }
-    toString: function toString() { [native code] }
-    valueOf: function valueOf() { [native code] }
-    get __proto__: function __proto__() { [native code] }
-    set __proto__: function __proto__() { [native code] }
+    __defineGetter__: __defineGetter__() { [native code] }
+    __defineSetter__: __defineSetter__() { [native code] }
+    __lookupGetter__: __lookupGetter__() { [native code] }
+    __lookupSetter__: __lookupSetter__() { [native code] }
+    constructor: Object() { [native code] }
+    hasOwnProperty: hasOwnProperty() { [native code] }
+    isPrototypeOf: isPrototypeOf() { [native code] }
+    propertyIsEnumerable: propertyIsEnumerable() { [native code] }
+    toLocaleString: toLocaleString() { [native code] }
+    toString: toString() { [native code] }
+    valueOf: valueOf() { [native code] }
+    get __proto__: __proto__() { [native code] }
+    set __proto__: __proto__() { [native code] }
 console-format.html:13 [Object]
     0: Object
     length: 1
     __proto__: Array[0]
 globals[29]
 Object {}
-    __defineGetter__: function __defineGetter__() { [native code] }
-    __defineSetter__: function __defineSetter__() { [native code] }
-    __lookupGetter__: function __lookupGetter__() { [native code] }
-    __lookupSetter__: function __lookupSetter__() { [native code] }
-    constructor: function Object() { [native code] }
-    hasOwnProperty: function hasOwnProperty() { [native code] }
-    isPrototypeOf: function isPrototypeOf() { [native code] }
-    propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
-    toLocaleString: function toLocaleString() { [native code] }
-    toString: function toString() { [native code] }
-    valueOf: function valueOf() { [native code] }
-    get __proto__: function __proto__() { [native code] }
-    set __proto__: function __proto__() { [native code] }
+    __defineGetter__: __defineGetter__() { [native code] }
+    __defineSetter__: __defineSetter__() { [native code] }
+    __lookupGetter__: __lookupGetter__() { [native code] }
+    __lookupSetter__: __lookupSetter__() { [native code] }
+    constructor: Object() { [native code] }
+    hasOwnProperty: hasOwnProperty() { [native code] }
+    isPrototypeOf: isPrototypeOf() { [native code] }
+    propertyIsEnumerable: propertyIsEnumerable() { [native code] }
+    toLocaleString: toLocaleString() { [native code] }
+    toString: toString() { [native code] }
+    valueOf: valueOf() { [native code] }
+    get __proto__: __proto__() { [native code] }
+    set __proto__: __proto__() { [native code] }
 console-format.html:12 arrayLikeFunction(foo, bar, baz)
 console-format.html:13 [function]
-    0: function ( /**/ foo/**/, /*/**/bar,
+    0: ( /**/ foo/**/, /*/**/bar,
     length: 1
     __proto__: Array[0]
 globals[30]
diff --git a/third_party/WebKit/LayoutTests/inspector/extensions/extensions-sidebar-expected.txt b/third_party/WebKit/LayoutTests/inspector/extensions/extensions-sidebar-expected.txt
index 0f50e06..6bfc7e3 100644
--- a/third_party/WebKit/LayoutTests/inspector/extensions/extensions-sidebar-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/extensions/extensions-sidebar-expected.txt
@@ -6,7 +6,7 @@ RUNNING TEST: extension_testElementsSidebarPageReplacedWithObject
 Got onShown(), frame defined
 Got onShown(), frame not defined
 RUNNING TEST: extension_testElementsSidebarSetExpression
-elements sidebar content: titlef0: "expression"f1: undefinedf2: nullf3: Objectf4: Array[0]f5: Array[3]f6: Objectf7: 42f8: Locationf9: HTMLCollection[1]f10: function () {}f11: "foo"__proto__: Object
+elements sidebar content: titlef0: "expression"f1: undefinedf2: nullf3: Objectf4: Array[0]f5: Array[3]f6: Objectf7: 42f8: Locationf9: HTMLCollection[1]f10: () {}f11: "foo"__proto__: Object
 RUNNING TEST: extension_testElementsSidebarSetObject
 Watch sidebar created, callback arguments dump follows:
 {
@@ -48,7 +48,7 @@ RUNNING TEST: extension_testSourcesSidebarPageReplacedWithObject
 Got onShown(), frame defined
 Got onShown(), frame not defined
 RUNNING TEST: extension_testSourcesSidebarSetExpression
-sources sidebar content: titlef0: "expression"f1: undefinedf2: nullf3: Objectf4: Array[0]f5: Array[3]f6: Objectf7: 42f8: Locationf9: HTMLCollection[1]f10: function () {}__proto__: Object
+sources sidebar content: titlef0: "expression"f1: undefinedf2: nullf3: Objectf4: Array[0]f5: Array[3]f6: Objectf7: 42f8: Locationf9: HTMLCollection[1]f10: () {}__proto__: Object
 RUNNING TEST: extension_testSourcesSidebarSetExpressionOnShown
 setExpression onShown frame: undefined
 RUNNING TEST: extension_testSourcesSidebarSetObject
diff --git a/third_party/WebKit/LayoutTests/inspector/sources/debugger/async-callstack-scopes-expected.txt b/third_party/WebKit/LayoutTests/inspector/sources/debugger/async-callstack-scopes-expected.txt
index 693b7ee..843ce62 100644
--- a/third_party/WebKit/LayoutTests/inspector/sources/debugger/async-callstack-scopes-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/sources/debugger/async-callstack-scopes-expected.txt
@@ -26,7 +26,7 @@ Local
     this: Window
     x: 200
 Closure
-    callback: function innerTimeout2()
+    callback: innerTimeout2()
     makeClosureLocalVar: "local.2"
     n: 2
     withScope: Object
@@ -36,7 +36,7 @@ WindowGlobal
 3) timeout2 async-callstack-scopes.html:53
 Scope variables sidebar pane:
 Local
-    innerTimeout2: function innerTimeout2()
+    innerTimeout2: innerTimeout2()
     localInTimeout2: "timeout2"
     this: Window
 WindowGlobal
@@ -60,7 +60,7 @@ Local
     this: Window
     x: 100
 Closure
-    callback: function innerTimeout1()
+    callback: innerTimeout1()
     makeClosureLocalVar: "local.1"
     n: 1
     withScope: Object
@@ -70,7 +70,7 @@ WindowGlobal
 6) timeout1 async-callstack-scopes.html:42
 Scope variables sidebar pane:
 Local
-    innerTimeout1: function innerTimeout1()
+    innerTimeout1: innerTimeout1()
     localInTimeout1: "timeout1"
     this: Window
 WindowGlobal
diff --git a/third_party/WebKit/LayoutTests/inspector/sources/debugger/properties-special-expected.txt b/third_party/WebKit/LayoutTests/inspector/sources/debugger/properties-special-expected.txt
index 55941dc..1c63b58 100644
--- a/third_party/WebKit/LayoutTests/inspector/sources/debugger/properties-special-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/sources/debugger/properties-special-expected.txt
@@ -12,19 +12,19 @@ properties-special.html:11 function (a,b) { return a + b; }
     length: 2
     name: ""
     prototype: Object
-    __proto__: function Empty() {}
+    __proto__: Empty() {}
     <function scope>
 properties-special.html:12 function () { [native code] }
     arguments: (...)
-    get arguments: function ThrowTypeError() { [native code] }
-    set arguments: function ThrowTypeError() { [native code] }
+    get arguments: ThrowTypeError() { [native code] }
+    set arguments: ThrowTypeError() { [native code] }
     caller: (...)
-    get caller: function ThrowTypeError() { [native code] }
-    set caller: function ThrowTypeError() { [native code] }
+    get caller: ThrowTypeError() { [native code] }
+    set caller: ThrowTypeError() { [native code] }
     length: 1
     name: ""
-    __proto__: function Empty() {}
-    [[TargetFunction]]: function (a,b) { return a + b; }
+    __proto__: Empty() {}
+    [[TargetFunction]]: (a,b) { return a + b; }
     [[BoundThis]]: Object
     [[BoundArgs]]: Array[1]
 
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 85786df..0acb4e6 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -1026,7 +1026,7 @@ WebInspector.ObjectPropertiesSection.createValueElement = function(value, wasThr
         suffix = "\"";
     } else if (type === "function" && typeof description === "string") {
         // Render function description until the first \n.
-        valueText = /.*/.exec(description)[0].replace(/\s+$/g, "");
+        valueText = /.*/.exec(description)[0].replace(/\s+$/g, "").replace(/^function /, "");
     } else if (type !== "object" || subtype !== "node") {
         valueText = description;
     }
diff --git a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
index 8d58ac7..cf986de 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
@@ -23,14 +23,28 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
             parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
             return true;
         }
-        if (description && preview.subtype !== "array")
-            parentElement.createTextChildren(description, " ");
+        if (description && preview.subtype !== "array") {
+            var text = preview.subtype ? description : this._abbreviateFullQualifiedClassName(description);
+            parentElement.createTextChildren(text, " ");
+        }
         if (preview.entries)
             return this._appendEntriesPreview(parentElement, preview);
         return this._appendPropertiesPreview(parentElement, preview, object);
     },
 
     /**
+     * @param {string} description
+     * @return {string}
+     */
+    _abbreviateFullQualifiedClassName: function(description)
+    {
+        var abbreviatedDescription = description.split(".");
+        for (var i = 0; i < abbreviatedDescription.length - 1; ++i)
+            abbreviatedDescription[i] = abbreviatedDescription[i].trimMiddle(3);
+        return abbreviatedDescription.join(".");
+    },
+
+    /**
      * @param {!Element} parentElement
      * @param {!RuntimeAgent.ObjectPreview} preview
      * @param {?WebInspector.RemoteObject} object
@@ -157,6 +171,11 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
             return span;
         }
 
+        if (type === "object" && !subtype) {
+            span.textContent = this._abbreviateFullQualifiedClassName(description);
+            return span;
+        }
+
         span.textContent = description;
         return span;
     }
diff --git a/third_party/WebKit/Source/devtools/front_end/components/objectValue.css b/third_party/WebKit/Source/devtools/front_end/components/objectValue.css
index 51e2eea5b..d2b57a4 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/objectValue.css
+++ b/third_party/WebKit/Source/devtools/front_end/components/objectValue.css
@@ -20,7 +20,6 @@
 
 .object-value-function::before {
     content: "function";
-    cursor: pointer;
     color: rgb(170, 13, 145);
     padding-right: 5px;
 }
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js b/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
index c5b1d91..76e8596 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
@@ -851,20 +851,27 @@ WebInspector.JavaScriptSourceFrame.prototype = {
                 ++renderedNameCount;
             }
 
+            var widgetChanged = true;
             if (oldWidget) {
+                widgetChanged = false;
                 for (var name of widget.__nameToToken.keys()) {
                     var oldText = oldWidget.__nameToToken.get(name) ? oldWidget.__nameToToken.get(name).textContent : "";
                     var newText = widget.__nameToToken.get(name) ? widget.__nameToToken.get(name).textContent : "";
                     if (newText !== oldText) {
+                        widgetChanged = true;
                         // value has changed, update it.
                         WebInspector.runCSSAnimationOnce(/** @type {!Element} */ (widget.__nameToToken.get(name)), "source-frame-value-update-highlight");
                     }
                 }
-                this._valueWidgets.delete(i);
-                this.textEditor.removeDecoration(i, oldWidget);
+                if (widgetChanged) {
+                    this._valueWidgets.delete(i);
+                    this.textEditor.removeDecoration(i, oldWidget);
+                }
+            }
+            if (widgetChanged) {
+                this._valueWidgets.set(i, widget);
+                this.textEditor.addDecoration(i, widget);
             }
-            this._valueWidgets.set(i, widget);
-            this.textEditor.addDecoration(i, widget);
         }
     },
 
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SplitView.js b/third_party/WebKit/Source/devtools/front_end/ui/SplitView.js
index 06eccac..6bce777 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/SplitView.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SplitView.js
@@ -349,7 +349,7 @@ WebInspector.SplitView.prototype = {
      */
     showBoth: function(animate)
     {
-       if (this._showMode === WebInspector.SplitView.ShowMode.Both)
+        if (this._showMode === WebInspector.SplitView.ShowMode.Both)
             animate = false;
 
         this._cancelAnimation();