DevTools: update repeat count only when element is requested

DevTools: update repeat count only when element is requested

The repeat counter only needs to be updated when the console message's
element is requested.

BUG=none

[luoe, 2017-02-18 02:55:36]

luoe@chromium.org changed reviewers:
+ lushnikov@chromium.org, pfeldman@chromium.org

[luoe, 2017-02-18 02:55:37]

ptal

[pfeldman, 2017-02-21 19:21:13]

https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
(left):

https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js:126:
this._updateRepeatCountElement();
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]

https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
(left):

https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js:126:
this._updateRepeatCountElement();
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)!

[pfeldman, 2017-02-27 17:53:17]

On 2017/02/23 01:09:34, luoe wrote:
>
https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
> File
third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js
> (left):
> 
>
https://codereview.chromium.org/2702913002/diff/1/third_party/WebKit/Source/d...
>
third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js:126:
> this._updateRepeatCountElement();
> 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)!

What are the absolute numbers on a heavy page? Are we spending 0.4ms or that is
multiplied by something? 0.4ms by itself does not look scary.

[luoe, 2017-02-27 19:41:34]

No real website I found had enough heavy console logging, so no noticeable
change.
I did a few small tests with the profiler, with 10 trials in each scenario, and
it's not that scary as I thought.

100 logs `for (var i=0; i < 100; i++) console.log(1)`
Before CL: average = 160ms
After CL: average = 303ms

1000 logs: `for (var i=0; i < 1000; i++) console.log(1)`
Before CL: average = 1365ms
After CL: average = 1904ms

Let's do it the other way as you suggested.  I'd like to land the dependency CL
first before asking for another look.

[pfeldman, 2017-03-01 23:24:09]

>> 1000 logs: `for (var i=0; i < 1000; i++) console.log(1)`

>> Before CL: average = 1365ms
>> After CL: average = 1904ms

What are you calculating here?

[luoe, 2017-05-08 17:54:18]

Description was changed from

==========
DevTools: update repeat count only when element is requested

The repeat counter only needs to be updated when the console message's
element is requested.

BUG=none
==========

to

==========
DevTools: update repeat count only when element is requested

The repeat counter only needs to be updated when the console message's
element is requested.

BUG=none
==========

[luoe, 2017-05-08 17:54:18]

luoe@chromium.org changed reviewers:
- lushnikov@chromium.org, pfeldman@chromium.org