DevTools: update repeat count only when element is requested

third_party/WebKit/Source/devtools/front_end/console/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 104 matching lines @@
     if (this._message.level === SDK.ConsoleMessage.MessageLevel.Warning)
       iconType = 'smallicon-warning';
     else if (this._message.level === SDK.ConsoleMessage.MessageLevel.Error)
       iconType = 'smallicon-error';
     else if (this._message.type === SDK.ConsoleMessage.MessageType.Command)
       iconType = 'smallicon-user-command';
     else if (this._message.type === SDK.ConsoleMessage.MessageType.Result)
       iconType = 'smallicon-command-result';
     this._decorationWrapper.appendChild(UI.Icon.create(iconType, 'message-level-icon'));
 
-    // Timestamps may affect repeat counter.
-    this._updateRepeatCountElement();

[pfeldman, 2017/02/21 19:21:12]

I'd rather do it the other way around and create it every time here as you do
with other elements.

[luoe, 2017/02/23 01:09:34]

I tried placing message.updateMessageElement() inside
ConsoleView._tryToCollapseMessages right after the call to
viewMessage.incrementRepeatCount().  Running `for (var
i=0;i<1000;i++){console.error(3);}` takes ~1.8x as long.

Time spent doing layout is about the same, (0.4ms), but the time spent
recalculating style jumps (from 0.05ms to 0.4ms)!

-
     /**
      * @param {number} timestamp
      * @param {boolean} full
      * @return {string}
      */
     function formatTimestamp(timestamp, full) {
       var date = new Date(timestamp);
       var yymmdd = date.getFullYear() + '-' + leadZero(date.getMonth() + 1, 2) + '-' + leadZero(date.getDate(), 2);
       var hhmmssfff = leadZero(date.getHours(), 2) + ':' + leadZero(date.getMinutes(), 2) + ':' +
           leadZero(date.getSeconds(), 2) + '.' + leadZero(date.getMilliseconds(), 3);
@@ skipping 810 matching lines @@
       formattedMessage = this._buildMessage(consoleMessage);
     contentElement.appendChild(formattedMessage);
 
     return this._contentElement;
   }
 
   /**
    * @return {!Element}
    */
   toMessageElement() {
-    if (this._element)
-      return this._element;
+    if (!this._element) {
+      this._element = createElement('div');
+      this.updateMessageElement();
+    }
 
-    this._element = createElement('div');
-    this.updateMessageElement();
+    // Update repeat count.
+    var show = this._repeatCount > 1;
+    this._repeatCountElement.textContent = show ? this._repeatCount : '';
+    this._repeatCountElement.classList.toggle('hidden', !show);
+    this._element.classList.toggle('repeated-message', show);
+
     return this._element;
   }
 
   updateMessageElement() {
     if (!this._element)
       return;
 
     this._element.className = 'console-message-wrapper';
     this._element.removeChildren();
     this._element.message = this;
@@ skipping 49 matching lines @@
 
   /**
    * @return {number}
    */
   repeatCount() {
     return this._repeatCount || 1;
   }
 
   resetIncrementRepeatCount() {
     this._repeatCount = 1;
-    this._updateRepeatCountElement();
   }
 
   incrementRepeatCount() {
     this._repeatCount++;
-    this._updateRepeatCountElement();
-  }
-
-  _updateRepeatCountElement() {
-    if (!this._repeatCountElement)
-      return;
-    var show = this._repeatCount > 1;
-    this._repeatCountElement.textContent = show ? this._repeatCount : '';
-    this._repeatCountElement.classList.toggle('hidden', !show);
-    if (this._element)
-      this._element.classList.toggle('repeated-message', show);
   }
 
   get text() {
     return this._message.messageText;
   }
 
   /**
    * @return {string}
    */
   toExportString() {
@@ skipping 181 matching lines @@
   toMessageElement() {
     if (!this._element) {
       super.toMessageElement();
       this._expandGroupIcon = UI.Icon.create('', 'expand-group-icon');
       this._contentElement.insertBefore(this._expandGroupIcon, this._contentElement.firstChild);
       this.setCollapsed(this._collapsed);
     }
     return this._element;
   }
 };