Make the TimelineRecordTreeElement location subtitle live.

https://bugs.webkit.org/show_bug.cgi?id=127270

Reviewed by Joseph Pecoraro.

* Localizations/en.lproj/localizedStrings.js: Updated.

* UserInterface/SourceCodeLocation.js:
(WebInspector.SourceCodeLocation.prototype.originalLocationString):
(WebInspector.SourceCodeLocation.prototype.formattedLocationString):
(WebInspector.SourceCodeLocation.prototype.displayLocationString):
(WebInspector.SourceCodeLocation.prototype.updateDisplayString):
(WebInspector.SourceCodeLocation.prototype._locationString):
Support for a new nameStyle enum and a prefix for the location string.
Passing the prefix here lets it be italicized with the line number.
Support column number for SourceCode's without a URL too.

* UserInterface/TimelineRecordTreeElement.js:
(WebInspector.TimelineRecordTreeElement):
(WebInspector.TimelineRecordTreeElement.prototype.onattach):
Create a subtitle span to update the location inside. Update the tooltip on attach.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162421 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

+2014-01-20  Timothy Hatcher  <timothy@apple.com>
+
+        Make the TimelineRecordTreeElement location subtitle live.
+
+        https://bugs.webkit.org/show_bug.cgi?id=127270
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.originalLocationString):
+        (WebInspector.SourceCodeLocation.prototype.formattedLocationString):
+        (WebInspector.SourceCodeLocation.prototype.displayLocationString):
+        (WebInspector.SourceCodeLocation.prototype.updateDisplayString):
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        Support for a new nameStyle enum and a prefix for the location string.
+        Passing the prefix here lets it be italicized with the line number.
+        Support column number for SourceCode's without a URL too.
+
+        * UserInterface/TimelineRecordTreeElement.js:
+        (WebInspector.TimelineRecordTreeElement):
+        (WebInspector.TimelineRecordTreeElement.prototype.onattach):
+        Create a subtitle span to update the location inside. Update the tooltip on attach.
+
 2014-01-19  Timothy Hatcher  <timothy@apple.com>
 
         Generate better display names for timer and event Timeline records.

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

 var localizedStrings = new Object;

Source/WebInspectorUI/UserInterface/LayoutTimelineView.js

@@ -128,7 +128,7 @@ WebInspector.LayoutTimelineView.prototype = {
             return;
 
         for (var layoutTimelineRecord of this._pendingRecords) {
-            var treeElement = new WebInspector.TimelineRecordTreeElement(layoutTimelineRecord, true);
+            var treeElement = new WebInspector.TimelineRecordTreeElement(layoutTimelineRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
             var dataGridNode = new WebInspector.LayoutTimelineDataGridNode(layoutTimelineRecord, this.zeroTime);
 
             this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);

Source/WebInspectorUI/UserInterface/ScriptTimelineView.js

@@ -122,7 +122,7 @@ WebInspector.ScriptTimelineView.prototype = {
             return;
 
         for (var scriptTimelineRecord of this._pendingRecords) {
-            var treeElement = new WebInspector.TimelineRecordTreeElement(scriptTimelineRecord, true, true);
+            var treeElement = new WebInspector.TimelineRecordTreeElement(scriptTimelineRecord, WebInspector.SourceCodeLocation.NameStyle.Short, true);
             var dataGridNode = new WebInspector.ScriptTimelineDataGridNode(scriptTimelineRecord, this.zeroTime);
 
             this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);

Source/WebInspectorUI/UserInterface/SourceCodeLocation.js

@@ -48,11 +48,18 @@ WebInspector.SourceCodeLocation = function(sourceCode, lineNumber, columnNumber)
 WebInspector.SourceCodeLocation.DisplayLocationClassName = "display-location";
 
 WebInspector.SourceCodeLocation.LargeColumnNumber = 80;
+
+WebInspector.SourceCodeLocation.NameStyle = {
+    None: "none", // File name not included.
+    Short: "short", // Only the file name.
+    Full: "full" // Full URL is used.
+};
+
 WebInspector.SourceCodeLocation.ColumnStyle = {
     Hidden: "hidden",             // column numbers are not included.
     OnlyIfLarge: "only-if-large", // column numbers greater than 80 are shown.
     Shown: "shown"                // non-zero column numbers are shown.
-}
+};
 
 WebInspector.SourceCodeLocation.Event = {
     LocationChanged: "source-code-location-location-changed",
@@ -162,28 +169,28 @@ WebInspector.SourceCodeLocation.prototype = {
 
     // User presentable location strings: "file:lineNumber:columnNumber".
 
-    originalLocationString: function(columnStyle, fullURL)
+    originalLocationString: function(columnStyle, nameStyle, prefix)
     {
-        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, fullURL);
+        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, nameStyle, prefix);
     },
 
-    formattedLocationString: function(columnStyle, fullURL)
+    formattedLocationString: function(columnStyle, nameStyle, prefix)
     {
-        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, fullURL);
+        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, nameStyle, prefix);
     },
 
-    displayLocationString: function(columnStyle, fullURL)
+    displayLocationString: function(columnStyle, nameStyle, prefix)
     {
-        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, fullURL);
+        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, nameStyle, prefix);
     },
 
     tooltipString: function()
     {
         if (!this.hasDifferentDisplayLocation())
-            return this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true);
+            return this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full);
 
-        var tooltip = WebInspector.UIString("Located at %s").format(this.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
-        tooltip += "\n" + WebInspector.UIString("Originally %s").format(this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
+        var tooltip = WebInspector.UIString("Located at %s").format(this.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full));
+        tooltip += "\n" + WebInspector.UIString("Originally %s").format(this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full));
         return tooltip;
     },
 
@@ -240,7 +247,7 @@ WebInspector.SourceCodeLocation.prototype = {
         }, this);
     },
 
-    populateLiveDisplayLocationString: function(element, propertyName)
+    populateLiveDisplayLocationString: function(element, propertyName, columnStyle, nameStyle, prefix)
     {
         var currentDisplay = undefined;
 
@@ -252,17 +259,11 @@ WebInspector.SourceCodeLocation.prototype = {
             currentDisplay = showAlternativeLocation;
 
             if (!showAlternativeLocation) {
-                element[propertyName] = this.displayLocationString();
-
-                if (this.hasDifferentDisplayLocation())
-                    element.classList.add(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-                else
-                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-            } else {
-                if (this.hasDifferentDisplayLocation()) {
-                    element[propertyName] = this.originalLocationString();
-                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-                }
+                element[propertyName] = this.displayLocationString(columnStyle, nameStyle, prefix);
+                element.classList.toggle(WebInspector.SourceCodeLocation.DisplayLocationClassName, this.hasDifferentDisplayLocation());
+            } else if (this.hasDifferentDisplayLocation()) {
+                element[propertyName] = this.originalLocationString(columnStyle, nameStyle, prefix);
+                element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
             }
         }
 
@@ -288,25 +289,35 @@ WebInspector.SourceCodeLocation.prototype = {
 
     // Private
 
-    _locationString: function(sourceCode, lineNumber, columnNumber, columnStyle, fullURL)
+    _locationString: function(sourceCode, lineNumber, columnNumber, columnStyle, nameStyle, prefix)
     {
         console.assert(sourceCode);
         if (!sourceCode)
             return "";
 
         columnStyle = columnStyle || WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge;
+        nameStyle = nameStyle || WebInspector.SourceCodeLocation.NameStyle.Short;
+        prefix = prefix || "";
 
-        var string = fullURL && sourceCode.url ? sourceCode.url : sourceCode.displayName;
-        if (sourceCode.url) {
-            string += ":" + (lineNumber + 1); // The user visible line number is 1-based.
-            if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Shown && columnNumber > 0)
-                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
-            else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge && columnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
-                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
-        } else
-            string += WebInspector.UIString(" (line %d)").format(lineNumber + 1); // The user visible line number is 1-based.
-
-        return string;
+        var lineString = lineNumber + 1; // The user visible line number is 1-based.
+        if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Shown && columnNumber > 0)
+            lineString += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+        else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge && columnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
+            lineString += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+
+        switch (nameStyle) {
+        case WebInspector.SourceCodeLocation.NameStyle.None:
+            return prefix + lineString;
+
+        case WebInspector.SourceCodeLocation.NameStyle.Short:
+        case WebInspector.SourceCodeLocation.NameStyle.Full:
+            var lineSuffix = sourceCode.url ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
+            return prefix + (nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && sourceCode.url ? sourceCode.url : sourceCode.displayName) + lineSuffix;
+
+        default:
+            console.error("Unknown nameStyle: " + nameStyle);
+            return prefix + lineString;
+        }
     },
 
     _resetMappedLocation: function()

Source/WebInspectorUI/UserInterface/SourceCodeTimelineTreeElement.js

@@ -23,13 +23,15 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, showFullLocationSubtitle, includeTimerIdentifierInMainTitle)
+WebInspector.SourceCodeTimelineTreeElement = function(sourceCodeTimeline, subtitleNameStyle, includeTimerIdentifierInMainTitle)
 {
     console.assert(sourceCodeTimeline);
 
     this._sourceCodeTimeline = sourceCodeTimeline;
 
-    WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], showFullLocationSubtitle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
+    subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
+
+    WebInspector.TimelineRecordTreeElement.call(this, sourceCodeTimeline.records[0], subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
 };
 
 WebInspector.SourceCodeTimelineTreeElement.prototype = {

Source/WebInspectorUI/UserInterface/TimelineRecordTreeElement.js

@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.TimelineRecordTreeElement = function(timelineRecord, showFullLocationSubtitle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
+WebInspector.TimelineRecordTreeElement = function(timelineRecord, subtitleNameStyle, includeTimerIdentifierInMainTitle, sourceCodeLocation, representedObject)
 {
     console.assert(timelineRecord);
 
@@ -34,15 +34,12 @@ WebInspector.TimelineRecordTreeElement = function(timelineRecord, showFullLocati
     var subtitle = "";
 
     if (this._sourceCodeLocation) {
-        // FIXME: This needs to live update the subtitle in response to the WebInspector.SourceCodeLocation.Event.DisplayLocationChanged event.
-
-        if (showFullLocationSubtitle) {
-            subtitle = this._sourceCodeLocation.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge);
-        } else {
-            subtitle = WebInspector.UIString("line ") + (this._sourceCodeLocation.displayLineNumber + 1); // The user visible line number is 1-based.
-            if (this._sourceCodeLocation.displayColumnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
-                subtitle += ":" + (this._sourceCodeLocation.displayColumnNumber + 1); // The user visible column number is 1-based.
-        }
+        subtitle = document.createElement("span");
+
+        if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
+            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, subtitleNameStyle);
+        else
+            this._sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
     }
 
     var iconStyleClass = null;
@@ -102,6 +99,9 @@ WebInspector.TimelineRecordTreeElement = function(timelineRecord, showFullLocati
     WebInspector.GeneralTreeElement.call(this, [iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
 
     this.small = true;
+
+    if (this._sourceCodeLocation)
+        this.tooltipHandledSeparately = true;
 };
 
 WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = "style-record";
@@ -127,5 +127,20 @@ WebInspector.TimelineRecordTreeElement.prototype = {
     {
         var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : "";
         return {text: [this.mainTitle, url || "", this._record.details || ""]};
+    },
+
+    // Protected
+
+    onattach: function()
+    {
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+
+        console.assert(this.element);
+
+        if (!this.tooltipHandledSeparately)
+            return;
+
+        var tooltipPrefix = this.mainTitle + "\n";
+        this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
     }
 };