1069183 - Editing very long line in style editor (e.g. a gradient with lots of stops) make Firefox crash

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect, P2)

Description

[inscription]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20140916133140

Steps to reproduce:

Latest Nightly, on Windows 7, e10s disabled.
Go on the page http://bolknote.ru/files/webkit-purecss-image.html. Note : This page is a webkit demo so all the CSS has webkit prefix. 
Open the style editor, try and edit the background line. (this line is 156,000+ char long)


Actual results:

Firefox is not responding.
It looks like the style editor can't handle big lines, but this should not make the whole browser crash.

Comment 1

[Jan Sonntag]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20140918030202

Confirming this bug under Ubuntu 14.04. Just a mere click on the line is enough to render the browser unresponsive.

Comment 2

[Jan Sonntag]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0

Bug seems not to be reproducible under Firefox 32. Please mark this bug as a regression.

Comment 3

[inscription]

You're write. How do I mark a bug as a regression ? Is it sufficient to add the keyword "regression" or is there something else to do ?

Comment 4

[inscription]

right*

Comment 5

[Jan Sonntag]

It's okay like that :) You can also change the the platform to from "Windows 7" to "all" and change the status to NEW because I'm also experiencing this bug under Linux.
Currently searching for the commit that caused this regression.

Comment 6

[inscription]

Thanks for your help.
It looks like I don't have the rights to change the status to new (I can only choose between UNCONFIRMED and RESOLVED).

Comment 7

[Jan Sonntag]

Then we just have to wait until someone with the rights look over it.

Last good revision: 05436dd932bc
First bad revision: 87553a321db8
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=05436dd932bc&tochange=87553a321db8

Couldn't narrow it down further because I'm unfamiliar with mercurial.

Comment 8

[inscription]

If you're more familiar with git, you could have a look here : https://github.com/mozilla/gecko-dev

Comment 9

[Paul Silaghi, QA [:pauly]]

Thank you for your support, guys !

(In reply to Jan Sonntag from comment #7)
> Couldn't narrow it down further because I'm unfamiliar with mercurial.
Did you get this pushlog with mozregression ?

Comment 10

[Jan Sonntag]

Yes, after testing the nightlies it also checked the tinderbox builds and gave me this summary.

Comment 11

[Heather Arthur [:harth]]

Probably bug 971662

Comment 12

[Jan Sonntag]

I just finished a complete bisection with git and the cause of this bug is definitely bug 971662

Comment 13

[Jan Sonntag]

The exact commit causing the bug is commit c469c25e0e45 Patrick Brosset — Bug 971662 - part 2 - Highlight nodes matching style-editor selectors on mouseover; r=harth

Comment 14

[Patrick Brosset <:pbro>]

The state machine we use right now to know which type of CSS token the mouse is currently over doesn't have any sort of mechanism to bail out when the parsing takes too much time.

That's the function that probably makes the browser freeze: http://mxr.mozilla.org/mozilla-central/source/browser/devtools/sourceeditor/css-autocompleter.js#917

Comment 15

[Jan Sonntag]

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
BuildID: 20160205030204

This bug is still present in the recent Nightly build.

Comment 16

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Tom, maybe this is an area you can help with, given recent work on CSS tokenizing?

Comment 17

[Tom Tromey :tromey]

I took a look at this.

css-autocompleter has a lot of issues.  In my playing the one that matters most is here:

https://dxr.mozilla.org/mozilla-central/source/devtools/client/sourceeditor/css-autocompleter.js#1188

This code is calling resolveState once per token in order to find the end of a CSS value.
resolveState then re-tokenizes the input text and runs its state machine over the result.
So, that's pretty bad.

This particular spot is readily fixed, I think, by using a much simpler forward scan to
find the end of the value.  However I think other such issues may remain.

I also noticed a lot of unnecessary allocation and other confusion in this code.  I'll attach
some cleanups.

Comment 18

[Tom Tromey :tromey]

I meant to mention that in my testing, I didn't even have to edit to see the problem behavior.
I just had to click somewhere in the value on that line.
Also, strangely, I could not reproduce this bug with e10s enabled.  I don't have any theory
explaining that.

Comment 19

[Tom Tromey :tromey]

Attachment: fix eslint warnings in css-autocompleter.js

Straightforward eslint cleanup.

Comment 20

[Tom Tromey :tromey]

Attachment: css-autocompleter code cleanups

I changed resolveState to accept separate parameters rather than a
caret object, to make it clear that this object isn't modified in
resolveState.

With this plus some other minor rearrangements I was able to reduce
the number of calls to limit(), and to arrange to split the source
string only once.  This saves a lot of redundant allocation with, IMO,
no loss of clarity.

I removed a confusing and possibly wrong special case involving empty
lines from traverseForward.

Comment 21

[Tom Tromey :tromey]

Attachment: simplify css-autocompleter scan for end of css value

Simplify the forward scan in the CSS_STATES.value case to avoid n^2
behavior.

Comment 22

[Tom Tromey :tromey]

It would be great if someone wanted to give this a try.
I'm not 100% certain whether I reproduced the original bug or managed to find another one.

I suspect that, even after this patch, the code could be made to work poorly
by having a very long selector.  I think there are probably other bad cases as well.
Still, these patches represent some progress, I think.

Comment 23

[Jan Sonntag]

I have tested again with the latest Nightly after applying your patches and the issue seems a lot better for me. At least Firefox doesn't hang itself anymore after clicking on the line. There are still lockups, when i try to mark parts in the middle or end of the string but your patches are definitely a step forward.

Thanks for your efforts,

Jan

Comment 24

[Tom Tromey :tromey]

(In reply to Jan Sonntag from comment #23)
> I have tested again with the latest Nightly after applying your patches and
> the issue seems a lot better for me. At least Firefox doesn't hang itself
> anymore after clicking on the line. There are still lockups, when i try to
> mark parts in the middle or end of the string but your patches are
> definitely a step forward.

Thanks for trying this!  I appreciate it.
Do you have steps to reproduce the other lockups?  I'd like to see if I can
find those too.

Comment 25

[Jan Sonntag]

Unfortunately I can't provide very clear steps on this. I just opened the the test url and started the style editor. Then I scrolled to the middle of the big css line in question and started marking little portions of it repeatedly. After about 10-15 times, Firefox hangs with 100% CPU use in one core.
If you know a way to profile this issue (callgrind maybe?) I would help with that.

Comment 26

[Tom Tromey :tromey]

Even with the patch I can also randomly reproduce a hang.
It's harder to do now, and difficult to figure out where it is happening :(

Comment 27

[Tom Tromey :tromey]

I managed to reproduce it and attach with gdb, then examine the stack.
It's definitely happening under traverseBackwards, so I think just more N^2 behavior here.
Basically all this logic behaves very badly and getInfoAt should be rewritten.

Comment 29

[Patrick Brosset <:pbro>]

Triaging (filter on CLIMBING SHOES).

Comment 30

[Nicolas Chevobbe [:nchevobbe]]

Still happening, we should really look into it

Comment 31

[Nicolas Chevobbe [:nchevobbe]]

Here's a page that shows the slowpath without freezing Firefox:

data:text/html,<meta charset=utf8><style>div {width: 100px; height: 100px;background%3A -webkit-radial-gradient(%239f6f64%2C %239f6f64) 1px 1px%2C-webkit-radial-gradient(%238b6456%2C %238b6456) 1px 2px%2C-webkit-radial-gradient(%23a68b79%2C %23a68b79) 1px 3px%2C-webkit-radial-gradient(%23a3917c%2C %23a3917c) 1px 4px%2C-webkit-radial-gradient(%23907e6a%2C %23907e6a) 1px 5px%2C-webkit-radial-gradient(%23917d6a%2C %23917d6a) 1px 6px%2C-webkit-radial-gradient(%23a08476%2C %23a08476) 1px 7px%2C-webkit-radial-gradient(%238f7264%2C %238f7264) 1px 8px%2C-webkit-radial-gradient(%23937668%2C %23937668) 1px 9px%2C-webkit-radial-gradient(%23a68a7c%2C %23a68a7c) 1px 10px%2C-webkit-radial-gradient(%239e8576%2C %239e8576) 1px 11px%2C-webkit-radial-gradient(%23917a68%2C %23917a68) 1px 12px%2C-webkit-radial-gradient(%2398816f%2C %2398816f) 1px 13px%2C-webkit-radial-gradient(%238f7665%2C %238f7665) 1px 14px%2C-webkit-radial-gradient(%237e6151%2C %237e6151) 1px 15px%2C-webkit-radial-gradient(%237d5e4f%2C %237d5e4f) 1px 16px%2C-webkit-radial-gradient(%23948172%2C %23948172) 1px 17px%2C-webkit-radial-gradient(%238b7a6a%2C %238b7a6a) 1px 18px%2C-webkit-radial-gradient(%238c7b6b%2C %238c7b6b) 1px 19px%2C-webkit-radial-gradient(%238a7766%2C %238a7766) 1px 20px%2C-webkit-radial-gradient(%23816655%2C %23816655) 1px 21px%2C-webkit-radial-gradient(%23ac8575%2C %23ac8575) 1px 22px%2C-webkit-radial-gradient(%23dcaa99%2C %23dcaa99) 1px 23px%2C-webkit-radial-gradient(%23f4b9aa%2C %23f4b9aa) 1px 24px%2C-webkit-radial-gradient(%23e7a792%2C %23e7a792) 1px 25px%2C-webkit-radial-gradient(%23c3816c%2C %23c3816c) 1px 26px%2C-webkit-radial-gradient(%23a96752%2C %23a96752) 1px 27px%2C-webkit-radial-gradient(%23a35f49%2C %23a35f49) 1px 28px%2C-webkit-radial-gradient(%239d5b44%2C %239d5b44) 1px 29px%2C-webkit-radial-gradient(%23995944%2C %23995944) 1px 30px%2C-webkit-radial-gradient(%23955741%2C %23955741) 1px 31px%2C-webkit-radial-gradient(%238a4f38%2C %238a4f38) 1px 32px%2C-webkit-radial-gradient(%23964d3b%2C %23964d3b) 1px 33px%2C-webkit-radial-gradient(%23894a38%2C %23894a38) 1px 34px%2C-webkit-radial-gradient(%23855644%2C %23855644) 1px 35px%2C-webkit-radial-gradient(%238a6c5b%2C %238a6c5b) 1px 36px%2C-webkit-radial-gradient(%238d7968%2C %238d7968) 1px 37px%2C-webkit-radial-gradient(%238b7e6f%2C %238b7e6f) 1px 38px%2C-webkit-radial-gradient(%2382796b%2C %2382796b) 1px 39px%2C-webkit-radial-gradient(%23756d60%2C %23756d60) 1px 40px%2C-webkit-radial-gradient(%236d6d5c%2C %236d6d5c) 1px 41px%2C-webkit-radial-gradient(%23827d6e%2C %23827d6e) 1px 42px%2C-webkit-radial-gradient(%237c6f60%2C %237c6f60) 1px 43px%2C-webkit-radial-gradient(%23866f5f%2C %23866f5f) 1px 44px%2C-webkit-radial-gradient(%238f6e5f%2C %238f6e5f) 1px 45px%2C-webkit-radial-gradient(%238b5f53%2C %238b5f53) 1px 46px%2C-webkit-radial-gradient(%23a67566%2C %23a67566) 1px 47px%2C-webkit-radial-gradient(%23c28d7f%2C %23c28d7f) 1px 48px%2C-webkit-radial-gradient(%23d59a89%2C %23d59a89) 1px 49px%2C-webkit-radial-gradient(%23db9f8c%2C %23db9f8c) 1px 50px%2C-webkit-radial-gradient(%23e1a38e%2C %23e1a38e) 1px 51px%2C-webkit-radial-gradient(%23e6a691%2C %23e6a691) 1px 52px%2C-webkit-radial-gradient(%23eaaa95%2C %23eaaa95) 1px 53px%2C-webkit-radial-gradient(%23e8a893%2C %23e8a893) 1px 54px%2C-webkit-radial-gradient(%23e3a590%2C %23e3a590) 1px 55px%2C-webkit-radial-gradient(%239b5d55%2C %239b5d55) 2px 1px%2C-webkit-radial-gradient(%23885247%2C %23885247) 2px 2px%2C-webkit-radial-gradient(%239c7064%2C %239c7064) 2px 3px%2C-webkit-radial-gradient(%23b99a8b%2C %23b99a8b) 2px 4px%2C-webkit-radial-gradient(%23a8917f%2C %23a8917f) 2px 5px%2C-webkit-radial-gradient(%23a28b79%2C %23a28b79) 2px 6px%2C-webkit-radial-gradient(%23a08574%2C %23a08574) 2px 7px%2C-webkit-radial-gradient(%23a18071%2C %23a18071) 2px 8px%2C-webkit-radial-gradient(%23978070%2C %23978070) 2px 9px%2C-webkit-radial-gradient(%23988473%2C %23988473) 2px 10px%2C-webkit-radial-gradient(%2393806f%2C %2393806f) 2px 11px%2C-webkit-radial-gradient(%23907d6c%2C %23907d6c) 2px 12px%2C-webkit-radial-gradient(%2395836f%2C %2395836f) 2px 13px%2C-webkit-radial-gradient(%2394806d%2C %2394806d) 2px 14px%2C-webkit-radial-gradient(%23927968%2C %23927968) 2px 15px%2C-webkit-radial-gradient(%23987d6b%2C %23987d6b) 2px 16px%2C-webkit-radial-gradient(%23a18d7a%2C %23a18d7a) 2px 17px%2C-webkit-radial-gradient(%239b8773%2C %239b8773) 2px 18px%2C-webkit-radial-gradient(%239a826d%2C %239a826d) 2px 19px%2C-webkit-radial-gradient(%23a78974%2C %23a78974) 2px 20px%2C-webkit-radial-gradient(%23b78f7a%2C %23b78f7a) 2px 21px%2C-webkit-radial-gradient(%23e6b59e%2C %23e6b59e) 2px 22px%2C-webkit-radial-gradient(%23ffc1ac%2C %23ffc1ac) 2px 23px%2C-webkit-radial-gradient(%23f5b19d%2C %23f5b19d) 2px 24px%2C-webkit-radial-gradient(%23f0ae99%2C %23f0ae99) 2px 25px%2C-webkit-radial-gradient(%23d08e79%2C %23d08e79) 2px 26px%2C-webkit-radial-gradient(%23b97762%2C %23b97762) 2px 27px%2C-webkit-radial-gradient(%23af6d58%2C %23af6d58) 2px 28px%2C-webkit-radial-gradient(%23a5634e%2C %23a5634e) 2px 29px%2C-webkit-radial-gradient(%239f5f4a%2C %239f5f4a) 2px 30px%2C-webkit-radial-gradient(%239b5d47%2C %239b5d47) 2px 31px%2C-webkit-radial-gradient(%2393553f%2C %2393553f) 2px 32px%2C-webkit-radial-gradient(%238e4a34%2C %238e4a34) 2px 33px%2C-webkit-radial-gradient(%23914f3a%2C %23914f3a) 2px 34px%2C-webkit-radial-gradient(%238c4d3b%2C %238c4d3b) 2px 35px%2C-webkit-radial-gradient(%23844f3f%2C %23844f3f) 2px 36px%2C-webkit-radial-gradient(%23855e50%2C %23855e50) 2px 37px%2C-webkit-radial-gradient(%23876e5f%2C %23876e5f) 2px 38px%2C-webkit-radial-gradient(%237a6b5d%2C %237a6b5d) 2px 39px%2C-webkit-radial-gradient(%23685f51%2C %23685f51) 2px 40px%2C-webkit-radial-gradient(%235a4937%2C %235a4937) 2px 41px%2C-webkit-radial-gradient(%23776352%2C %23776352) 2px 42px%2C-webkit-radial-gradient(%23755a49%2C %23755a49) 2px 43px%2C-webkit-radial-gradient(%238a6556%2C %238a6556) 2px 44px%2C-webkit-radial-gradient(%23ad8070%2C %23ad8070) 2px 45px%2C-webkit-radial-gradient(%23c18a7b%2C %23c18a7b) 2px 46px%2C-webkit-radial-gradient(%23db9c8e%2C %23db9c8e) 2px 47px%2C-webkit-radial-gradient(%23e8a596%2C %23e8a596) 2px 48px%2C-webkit-radial-gradient(%23e3a792%2C %23e3a792) 2px 49px%2C-webkit-radial-gradient(%23e4a893%2C %23e4a893) 2px 50px%2C-webkit-radial-gradient(%23e6a892%2C %23e6a892) 2px 51px%2C-webkit-radial-gradient(%23e6a892%2C %23e6a892) 2px 52px%2C-webkit-radial-gradient(%23e7ac95%2C %23e7ac95) 2px 53px%2C-webkit-radial-gradient(%23eaae99%2C %23eaae99) 2px 54px%2C-webkit-radial-gradient(%23e9af99%2C %23e9af99) 2px 55px%2C-webkit-radial-gradient(%23b2786e%2C %23b2786e) 3px 1px%2C-webkit-radial-gradient(%23b98179%2C %23b98179) 3px 2px%2C-webkit-radial-gradient(%23a17167%2C %23a17167) 3px 3px%2C-webkit-radial-gradient(%23b58f82%2C %23b58f82) 3px 4px%2C-webkit-radial-gradient(%23bda291%2C %23bda291) 3px 5px%2C-webkit-radial-gradient(%23a7907e%2C %23a7907e) 3px 6px%2C-webkit-radial-gradient(%23947767%2C %23947767) 3px 7px%2C-webkit-radial-gradient(%23b49383%2C %23b49383) 3px 8px%2C-webkit-radial-gradient(%23a6927f%2C %23a6927f) 3px 9px%2C-webkit-radial-gradient(%23978473%2C %23978473) 3px 10px%2C-webkit-radial-gradient(%23897866%2C %23897866) 3px 11px%2C-webkit-radial-gradient(%23857764%2C %23857764) 3px 12px%2C-webkit-radial-gradient(%238a7967%2C %238a7967) 3px 13px%2C-webkit-radial-gradient(%23907e6a%2C %23907e6a) 3px 14px%2C-webkit-radial-gradient(%239a8470%2C %239a8470) 3px 15px%2C-webkit-radial-gradient(%23a08875%2C %23a08875) 3px 16px%2C-webkit-radial-gradient(%239a826d%2C %239a826d) 3px 17px%2C-webkit-radial-gradient(%239f856e%2C %239f856e) 3px 18px%2C-webkit-radial-gradient(%23a1846c%2C %23a1846c) 3px 19px%2C-webkit-radial-gradient(%23c3a288%2C %23c3a288) 3px 20px%2C-webkit-radial-gradient(%23e3bda0%2C %23e3bda0) 3px 21px%2C-webkit-radial-gradient(%23f8ceaf%2C %23f8ceaf) 3px 22px%2C-webkit-radial-gradient(%23f5c8a8%2C %23f5c8a8) 3px 23px%2C-webkit-radial-gradient(%23edbf9d%2C %23edbf9d) 3px 24px%2C-webkit-radial-gradient(%23e8ad96%2C %23e8ad96) 3px 25px%2C-webkit-radial-gradient(%23d59a83%2C %23d59a83) 3px 26px%2C-webkit-radial-gradient(%23c58772%2C %23c58772) 3px 27px%2C-webkit-radial-gradient(%23b77964%2C %23b77964) 3px 28px%2C-webkit-radial-gradient(%23a96b56%2C %23a96b56) 3px 29px%2C-webkit-radial-gradient(%23a36550%2C %23a36550) 3px 30px%2C-webkit-radial-gradient(%23a1634d%2C %23a1634d) 3px 31px%2C-webkit-radial-gradient(%239c5e48%2C %239c5e48) 3px 32px%2C-webkit-radial-gradient(%23965b42%2C %23965b42) 3px 33px%2C-webkit-radial-gradient(%2393513c%2C %2393513c) 3px 34px%2C-webkit-radial-gradient(%238c4634%2C %238c4634) 3px 35px%2C-webkit-radial-gradient(%238b4839%2C %238b4839) 3px 36px%2C-webkit-radial-gradient(%238a5042%2C %238a5042) 3px 37px%2C-webkit-radial-gradient(%23855a4b%2C %23855a4b) 3px 38px%2C-webkit-radial-gradient(%23856455%2C %23856455) 3px 39px%2C-webkit-radial-gradient(%238b705f%2C %238b705f) 3px 40px%2C-webkit-radial-gradient(%23a26d5f%2C %23a26d5f) 3px 41px%2C-webkit-radial-gradient(%23b27f71%2C %23b27f71) 3px 42px%2C-webkit-radial-gradient(%23ba8877%2C %23ba8877) 3px 43px%2C-webkit-radial-gradient(%23c99785%2C %23c99785) 3px 44px%2C-webkit-radial-gradient(%23d8a490%2C %23d8a490) 3px 45px%2C-webkit-radial-gradient(%23dda792%2C %23dda792) 3px 46px%2C-webkit-radial-gradient(%23e9b09c%2C %23e9b09c) 3px 47px%2C-webkit-radial-gradient(%23e7af98%2C %23e7af98) 3px 48px%2C-webkit-radial-gradient(%23e7ad96%2C %23e7ad96) 3px 49px%2C-webkit-radial-gradient(%23e9af98%2C %23e9af98) 3px 50px%2C-webkit-radial-gradient(%23e8ae98%2C %23e8ae98) 3px 51px%2C-webkit-radial-gradient(%23e5ab95%2C %23e5ab95) 3px 52px%2C-webkit-radial-gradient(%23e5ad96%2C %23e5ad96) 3px 53px%2C-webkit-radial-gradient(%23eab29b%2C %23eab29b) 3px 54px%2C-webkit-radial-gradient(%23ebb5a0%2C %23ebb5a0) 3px 55px%2C-webkit-radial-gradient(%23aa8778%2C %23aa8778) 4px 1px%2C-webkit-radial-gradient(%23c7a194%2C %23c7a194) 4px 2px%2C-webkit-radial-gradient(%23a17b6e%2C %23a17b6e) 4px 3px%2C-webkit-radial-gradient(%23937165%2C %23937165) 4px 4px%2C-webkit-radial-gradient(%23a88f7e%2C %23a88f7e) 4px 5px%2C-webkit-radial-gradient(%23b19a88%2C %23b19a88) 4px 6px%2C-webkit-radial-gradient(%23af9281%2C %23af9281) 4px 7px%2C-webkit-radial-gradient(%23a68472%2C %23a68472) 4px 8px%2C-webkit-radial-gradient(%238f7b68%2C %238f7b68) 4px 9px%2C-webkit-radial-gradient(%23887662%2C %23887662) 4px 10px%2C-webkit-radial-gradient(%23857462%2C %23857462) 4px 11px%2C-webkit-radial-gradient(%23867563%2C %23867563) 4px 12px%2C-webkit-radial-gradient(%238a7766%2C %238a7766) 4px 13px%2C-webkit-radial-gradient(%238f7b68%2C %238f7b68) 4px 14px%2C-webkit-radial-gradient(%23957d6a%2C %23957d6a) 4px 15px%2C-webkit-radial-gradient(%23997e6c%2C %23997e6c) 4px 16px%2C-webkit-radial-gradient(%239c8670%2C %239c8670) 4px 17px%2C-webkit-radial-gradient(%239e826c%2C %239e826c) 4px 18px%2C-webkit-radial-gradient(%23af8b74%2C %23af8b74) 4px 19px%2C-webkit-radial-gradient(%23e3b89f%2C %23e3b89f) 4px 20px%2C-webkit-radial-gradient(%23f6c7ad%2C %23f6c7ad) 4px 21px%2C-webkit-radial-gradient(%23f3c4a7%2C %23f3c4a7) 4px 22px%2C-webkit-radial-gradient(%23f0c3a3%2C %23f0c3a3) 4px 23px%2C-webkit-radial-gradient(%23f0c6a3%2C %23f0c6a3) 4px 24px%2C-webkit-radial-gradient(%23ebb69e%2C %23ebb69e) 4px 25px%2C-webkit-radial-gradient(%23e4af97%2C %23e4af97) 4px 26px%2C-webkit-radial-gradient(%23d59f8a%2C %23d59f8a) 4px 27px%2C-webkit-radial-gradient(%23c48b79%2C %23c48b79) 4px 28px%2C-webkit-radial-gradient(%23b47968%2C %23b47968) 4px 29px%2C-webkit-radial-gradient(%23a96d5a%2C %23a96d5a) 4px 30px%2C-webkit-radial-gradient(%23a0624d%2C %23a0624d) 4px 31px%2C-webkit-radial-gradient(%239a5c47%2C %239a5c47) 4px 32px%2C-webkit-radial-gradient(%23995e47%2C %23995e47) 4px 33px%2C-webkit-radial-gradient(%23914f3a%2C %23914f3a) 4px 34px%2C-webkit-radial-gradient(%23904a38%2C %23904a38) 4px 35px%2C-webkit-radial-gradient(%23904b3b%2C %23904b3b) 4px 36px%2C-webkit-radial-gradient(%23874b3a%2C %23874b3a) 4px 37px%2C-webkit-radial-gradient(%238e5747%2C %238e5747) 4px 38px%2C-webkit-radial-gradient(%23b67c6e%2C %23b67c6e) 4px 39px%2C-webkit-radial-gradient(%23dba092%2C %23dba092) 4px 40px%2C-webkit-radial-gradient(%23de9989%2C %23de9989) 4px 41px%2C-webkit-radial-gradient(%23df9c8b%2C %23df9c8b) 4px 42px%2C-webkit-radial-gradient(%23e3a590%2C %23e3a590) 4px 43px%2C-webkit-radial-gradient(%23ecb29c%2C %23ecb29c) 4px 44px%2C-webkit-radial-gradient(%23f2baa3%2C %23f2baa3) 4px 45px%2C-webkit-radial-gradient(%23efbaa2%2C %23efbaa2) 4px 46px%2C-webkit-radial-gradient(%23ebb79f%2C %23ebb79f) 4px 47px%2C-webkit-radial-gradient(%23e9b59d%2C %23e9b59d) 4px 48px%2C-webkit-radial-gradient(%23efb7a0%2C %23efb7a0) 4px 49px%2C-webkit-radial-gradient(%23f0b8a1%2C %23f0b8a1) 4px 50px%2C-webkit-radial-gradient(%23efb7a0%2C %23efb7a0) 4px 51px%2C-webkit-radial-gradient(%23ecb39f%2C %23ecb39f) 4px 52px;}</style><div>

Here's a profile recorded when moving the mouse on the line: https://share.firefox.dev/3EZ68G2

A lot of time is spent in getInfoAt, called from highlightSelectorAt, and it's mostly going through the tokens of the line.
We should definitely have a bail mechanism so we stop the function after X time (for example 500ms, that seems already pretty high)

Comment 32

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Turn CSSCompleter into a proper ES6 class. r=#devtools.

Comment 33

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] CSSCompleter code cleanups. r=#devtools.

resolveState now takes separate line and column parameters rather than a caret object
to make it clear the object isn't modified in resolveState.
Reduce the number of calls to the limit function, as well as the number of
split operation we do on the source.
Removes a confusing case involving empty lines in traverseForward.

Comment 34

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Use InspectorCSSParser to search for end of CSS value in CSSCompleter. r=#devtools.

This is cheaper than using traverseForward, that we were using before.

Comment 35

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Replace resolveState peek function with native Array#at calls. r=#devtools.

Comment 36

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Avoid too many tokenization in CSSCompleter. r=#devtools.

resolveState now directly accepts an array of tokens so it won't do the tokenization,
and we take advantage of this in traverseBackwards, where we can pass the tokens
we computed at the top of getInfoAt and pop the last token from the stack until
we found the start of the "expression" we're interested in.

browser_css_statemachine.js is updated to test the 2 ways resolveState can be
called (with source + line + column, or with tokens).

Comment 37

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Turn CSSCompleter state constant into static Symbol property for faster lookups. r=#devtools

For some reason, having those as top level const in the module was triggering
a slow path (GetNameIC would show up a lot in profile).
This is way faster when those are used as static properties.

Having the state constants as symbol means that we can't use a json file for
the browser_css_statemachine.js test cases, so we move the data back in the test file.
We take this as an opportunity to re-arrange the test a bit (e.g. we don't need
to display results in the tab).

Comment 38

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1069183 - [devtools] Don't mutate upper-scope variable in traverseForward. r=ochameau.

Comment 39

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/334e28a3dff4
[devtools] Turn CSSCompleter into a proper ES6 class. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/83eb5b2d46d3
[devtools] CSSCompleter code cleanups. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/aa8e51f30e3d
[devtools] Use InspectorCSSParser to search for end of CSS value in CSSCompleter. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/d1d5b73d822e
[devtools] Replace resolveState peek function with native Array#at calls. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/661182d61339
[devtools] Avoid too many tokenization in CSSCompleter. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/5f2cabf6ee6b
[devtools] Turn CSSCompleter state constant into static Symbol property for faster lookups. r=devtools-reviewers,ochameau
https://hg.mozilla.org/integration/autoland/rev/0d61a9e0b976
[devtools] Don't mutate upper-scope variable in traverseForward. r=ochameau,devtools-reviewers.

Comment 40

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/334e28a3dff4
https://hg.mozilla.org/mozilla-central/rev/83eb5b2d46d3
https://hg.mozilla.org/mozilla-central/rev/aa8e51f30e3d
https://hg.mozilla.org/mozilla-central/rev/d1d5b73d822e
https://hg.mozilla.org/mozilla-central/rev/661182d61339
https://hg.mozilla.org/mozilla-central/rev/5f2cabf6ee6b
https://hg.mozilla.org/mozilla-central/rev/0d61a9e0b976