DevTools: [SSP] render selectors effectively

DevTools: [SSP] render selectors effectively

Currently, the selectors in styles sidebar pane are rendered each in a
separate span, which makes them ctrl-clickable.

This is needed to help in SourceMap debugging, as different selectors
might be coming from different places in sources. (see crbug.com/266416)

However, as it generates a lot of DOM nodes, this patch stitches unmatched
selectors together in a single element. The selectors, however,
are rendered separately as the user hits Ctrl and hovers over the section.

BUG=628409
R=pfeldman, dgozman

Committed: https://crrev.com/59dfe5a201bde760a7ff95e7cc66e00967cd7f02
Cr-Commit-Position: refs/heads/master@{#405934}

[lushnikov, 2016-07-14 22:52:05]

please, take a look!

[lushnikov, 2016-07-14 22:52:50]

The CQ bit was checked by lushnikov@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-07-14 22:53:57]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[pfeldman, 2016-07-14 23:14:42]

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:572:
if (this._sectionUnderMouse !== newSection) {
I don't think you need sectionUnderMouse field.

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:1217:
setHoverableSelectorsMode: function(value)
Merge this with the method below and only trigger when necessary?
_hoverableSelectorsMode would not be needed then. Also, you don't need to go
back. Once expanded, it can stay detailed.

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:1286:
_renderSimplifiedSelectors: function(selectors, matchingSelectorIndexes)
Replace this with:

function renderSimplifiedSelectors(selectors, matches) {
    var currentMatching = false;
    var text = "";
    for (var i = 0; i < selectors.length; ++i) {
        if (i)
            text += ", ";
        if (currentMatching === matches[i])
            text + selectors[i];
        else if (text !== ", ")
            this._createSelectorElement(text);
        currentMatching = matches[i];
    }
    this._createSelectorElement(text);
}

[commit-bot: I haz the power, 2016-07-15 00:14:45]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-07-15 00:14:46]

Dry run: This issue passed the CQ dry run.

[lushnikov, 2016-07-15 00:49:23]

Please, take another look

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:572:
if (this._sectionUnderMouse !== newSection) {
On 2016/07/14 23:14:41, pfeldman wrote:
> I don't think you need sectionUnderMouse field.

Done.

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:1217:
setHoverableSelectorsMode: function(value)
On 2016/07/14 23:14:41, pfeldman wrote:
> Merge this with the method below and only trigger when necessary?
> _hoverableSelectorsMode would not be needed then. Also, you don't need to go
> back. Once expanded, it can stay detailed.

Couldn't get rid of this method, even though i now preserve the selectors
expanded.

https://codereview.chromium.org/2146233003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:1286:
_renderSimplifiedSelectors: function(selectors, matchingSelectorIndexes)
On 2016/07/14 23:14:41, pfeldman wrote:
> Replace this with:
> 
> function renderSimplifiedSelectors(selectors, matches) {
>     var currentMatching = false;
>     var text = "";
>     for (var i = 0; i < selectors.length; ++i) {
>         if (i)
>             text += ", ";
>         if (currentMatching === matches[i])
>             text + selectors[i];
>         else if (text !== ", ")
>             this._createSelectorElement(text);
>         currentMatching = matches[i];
>     }
>     this._createSelectorElement(text);
> }

Done.

[lushnikov, 2016-07-15 18:52:35]

The CQ bit was checked by lushnikov@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-07-15 18:53:30]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[pfeldman, 2016-07-15 21:13:01]

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:571:
var selectorElement =
this._elementUnderMouse.enclosingNodeOrSelfWithClass("selector");
Both are ugly. please fetch section object instead.

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:574:
sectionElement._section.setHoverableSelectorsMode(true);
makeHoverableSelectorsMode()

[lushnikov, 2016-07-15 21:26:04]

please, take another look

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
(right):

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:571:
var selectorElement =
this._elementUnderMouse.enclosingNodeOrSelfWithClass("selector");
On 2016/07/15 21:13:01, pfeldman wrote:
> Both are ugly. please fetch section object instead.

As per offline discussion, I'll simplify this code in a follow-up

https://codereview.chromium.org/2146233003/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js:574:
sectionElement._section.setHoverableSelectorsMode(true);
On 2016/07/15 21:13:01, pfeldman wrote:
> makeHoverableSelectorsMode()

Done.

[lushnikov, 2016-07-15 21:26:12]

The CQ bit was checked by lushnikov@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-07-15 21:26:54]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[pfeldman, 2016-07-15 21:35:15]

lgtm

[lushnikov, 2016-07-15 21:46:31]

The CQ bit was unchecked by lushnikov@chromium.org

[lushnikov, 2016-07-15 21:46:32]

The CQ bit was checked by lushnikov@chromium.org

[commit-bot: I haz the power, 2016-07-15 21:46:48]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-15 23:28:16]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-07-15 23:28:17]

Try jobs failed on following builders:
  linux_chromium_chromeos_rel_ng on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[lushnikov, 2016-07-16 04:06:00]

The CQ bit was checked by lushnikov@chromium.org

[commit-bot: I haz the power, 2016-07-16 04:06:12]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-16 04:34:43]

Committed patchset #3 (id:40001)

[commit-bot: I haz the power, 2016-07-16 04:34:45]

CQ bit was unchecked.

[commit-bot: I haz the power, 2016-07-16 04:36:41]

Description was changed from

==========
DevTools: [SSP] render selectors effectively

Currently, the selectors in styles sidebar pane are rendered each in a
separate span, which makes them ctrl-clickable.

This is needed to help in SourceMap debugging, as different selectors
might be coming from different places in sources. (see crbug.com/266416)

However, as it generates a lot of DOM nodes, this patch stitches unmatched
selectors together in a single element. The selectors, however,
are rendered separately as the user hits Ctrl and hovers over the section.

BUG=628409
R=pfeldman, dgozman
==========

to

==========
DevTools: [SSP] render selectors effectively

Currently, the selectors in styles sidebar pane are rendered each in a
separate span, which makes them ctrl-clickable.

This is needed to help in SourceMap debugging, as different selectors
might be coming from different places in sources. (see crbug.com/266416)

However, as it generates a lot of DOM nodes, this patch stitches unmatched
selectors together in a single element. The selectors, however,
are rendered separately as the user hits Ctrl and hovers over the section.

BUG=628409
R=pfeldman, dgozman

Committed: https://crrev.com/59dfe5a201bde760a7ff95e7cc66e00967cd7f02
Cr-Commit-Position: refs/heads/master@{#405934}
==========

[commit-bot: I haz the power, 2016-07-16 04:36:42]

Patchset 3 (id:??) landed as
https://crrev.com/59dfe5a201bde760a7ff95e7cc66e00967cd7f02
Cr-Commit-Position: refs/heads/master@{#405934}