DevTools: Add timestamp support in the console

Source/devtools/front_end/ConsoleViewMessage.js

Index: Source/devtools/front_end/ConsoleViewMessage.js
diff --git a/Source/devtools/front_end/ConsoleViewMessage.js b/Source/devtools/front_end/ConsoleViewMessage.js
index 5815e514758e53b8bbf49d209d5aeba6570e136c..d55be44a479eecf1d9989e2b4bfcad4adcc53ed2 100644
--- a/Source/devtools/front_end/ConsoleViewMessage.js
+++ b/Source/devtools/front_end/ConsoleViewMessage.js
@@ -844,6 +844,23 @@ WebInspector.ConsoleViewMessage.prototype = {
         return regexObject.test(this._formattedMessageText()) || (!!this._anchorElement && regexObject.test(this._anchorElement.textContent));
     },
 
+    _updateTimestamp: function()
+    {
+        if (!this.timestampElement)

[apavlov, 2014/03/06 09:56:20]

I suspect it should always be present (see below).

+            return;
+
+        var date = new Date(this._message.timestamp * 1000);

[apavlov, 2014/03/06 09:56:20]

This is the only client of ConsoleMessage.timestamp. Let's store the
milliseconds so that you won't have to /1000 in the ctor and *1000 here.

+        var str = date.getFullYear() + "-"
+            + ("0" + (date.getMonth() + 1)).slice(-2) + "-"

[apavlov, 2014/03/06 09:56:20]

This slicing is relatively slow, and I suspect it can dramatically slow down the
inspector when handling zillions of messages (an easily reproducible situation).
You can also extract this into a nested function:

/**
 * @param {number} value
 * @return {string}
 */
function zeroPad(value)
{
    return (value < 10 ? "0" : "") + value;
}

+            + ("0" + date.getDate()).slice(-2) + " "
+            + ("0" + date.getHours()).slice(-2) + ":"
+            + ("0" + date.getMinutes()).slice(-2) + ":"
+            + ("0" + date.getSeconds()).slice(-2) + "."
+            + date.getMilliseconds();

[eustas, 2014/03/06 15:40:05]

Milliseconds should be padded.

+
+        this.timestampElement.textContent = str;
+    },
+
     /**
      * @return {!Element}
      */
@@ -879,6 +896,14 @@ WebInspector.ConsoleViewMessage.prototype = {
         if (this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
             element.classList.add("console-group-title");
 
+        if (WebInspector.settings.consoleTimestampsEnabled.get()) {

[apavlov, 2014/03/06 09:56:20]

We should also think of a way to add/remove the timestamps quickly upon the
setting switch. Perhaps, the timestamp element should also be present, but just
hidden with CSS when the setting is off.

+            this.timestampElement = document.createElement("span");

[apavlov, 2014/03/06 09:56:20]

This snippet can be written as:

this.timestampElement = element.createChild("span", "console-timestamp");
this._updateTiemstamp();

+            this.timestampElement.className = "console-timestamp";
+            this._updateTimestamp();
+
+            element.appendChild(this.timestampElement);
+        }
+
         element.appendChild(this.formattedMessage());
 
         if (this._message.repeatCount > 1)
@@ -924,6 +949,7 @@ WebInspector.ConsoleViewMessage.prototype = {
             this._element.classList.add("repeated-message");
         }
         this.repeatCountElement.textContent = this._message.repeatCount;
+        this._updateTimestamp();
     },
 
     /**