DevTools: Add timestamp support in the console

Source/devtools/front_end/ConsoleViewMessage.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 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
@@ skipping 826 matching lines @@
 
     /**
      * @return {boolean}
      */
     matchesRegex: function(regexObject)
     {
         regexObject.lastIndex = 0;
         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}
      */
     toMessageElement: function()
     {
         if (this._element)
             return this._element;
 
         var element = document.createElement("div");
         element.message = this;
@@ skipping 15 matching lines @@
             element.classList.add("console-error-level");
             break;
         case WebInspector.ConsoleMessage.MessageLevel.Info:
             element.classList.add("console-info-level");
             break;
         }
 
         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)
             this.updateRepeatCount();
 
         return element;
     },
 
     _populateStackTraceTreeElement: function(parentTreeElement)
     {
@@ skipping 25 matching lines @@
             return;
 
         if (!this.repeatCountElement) {
             this.repeatCountElement = document.createElement("span");
             this.repeatCountElement.className = "bubble";
 
             this._element.insertBefore(this.repeatCountElement, this._element.firstChild);
             this._element.classList.add("repeated-message");
         }
         this.repeatCountElement.textContent = this._message.repeatCount;
+        this._updateTimestamp();
     },
 
     /**
      * @return {string}
      */
     toString: function()
     {
         var sourceString;
         switch (this._message.source) {
             case WebInspector.ConsoleMessage.MessageSource.XML:
@@ skipping 81 matching lines @@
         }
 
         return sourceString + " " + typeString + " " + levelString + ": " + this.formattedMessage().textContent + "\n" + this._message.url + " line " + this._message.line;
     },
 
     get text()
     {
         return this._message.messageText;
     }
 }