Bug 122897 – Web Inspector: logged objects are highlighted in blue

• Component: Web Inspector
• Status: RESOLVED FIXED

[Dave Coffin]

Created attachment 214365 [details]
Screenshot of problem

When highlighting objects in the console output, the entire object is highlighted blue.

[Radar WebKit Bug Importer]

<rdar://problem/15241424>

[Antoine Quint]

This is due to being able to select multiple rows in the console log to copy to the clipboard.

[Timothy Hatcher]

We did attempt to fix it though, but it regressed. It should not select the row if you are clicking and arrow to expand the object.

[Dave Coffin]

Tim- you did fix it I suppose, but the area you have to click is like 2px, and when you expand it doesn't unhighlight. I guess I have a larger problem with the highlighting in general, its ugly and you lose all syntax highlighting. I've attached a suggestion for better selecting in the console (IMO).

[Dave Coffin]

Created attachment 214381 [details]
a suggestion for nicer looking and easier to read highlighting

[Joseph Pecoraro]

(In reply to comment #5)
> Created an attachment (id=214381) [details]
> a suggestion for nicer looking and easier to read highlighting

I've consistently complained about this behavior in the JS Console. I like this highlighting idea!

[Timothy Hatcher]

We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color.

[Antoine Quint]

(In reply to comment #7)
> We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color.

I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console.

[Antoine Quint]

Created attachment 214436 [details]
Patch

[Antoine Quint]

<rdar://problem/13839762>

[Antoine Quint]

Created attachment 214438 [details]
Screenshot showing result of patch

[Timothy Hatcher]

(In reply to comment #8)
> (In reply to comment #7)
> > We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color.
> 
> I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console.

It would be no different than a text selection (same color in fact).

[Antoine Quint]

(In reply to comment #12)
> (In reply to comment #8)
> > (In reply to comment #7)
> > > We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color.
> > 
> > I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console.
> 
> It would be no different than a text selection (same color in fact).

Updating the patch with "highlight".

[Antoine Quint]

Created attachment 214501 [details]
Patch

[Joseph Pecoraro]

Comment on attachment 214501 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review

r=me

So we'll now get the light highlight everywhere? Does it look good everywhere? I think it'll be good, it'll especially be an improvement for DOMNode / Object interaction.

> Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.svg:-1
> -<?xml version="1.0" encoding="utf-8"?>

Could you also remove these sag files from the Visual Studio project files? Lame, I know. But we don't need to be proactive adding files, just removing them =).

    shell> ack -a UserInputPromptPreviousSelected.svg
    WebInspectorUI.vcxproj/WebInspectorUI.vcxproj
    539:    <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg" />

    WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters
    1698:    <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg">

[Antoine Quint]

(In reply to comment #15)
> (From update of attachment 214501 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review
> 
> r=me
> 
> So we'll now get the light highlight everywhere? Does it look good everywhere? I think it'll be good, it'll especially be an improvement for DOMNode / Object interaction.
> 
> > Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.svg:-1
> > -<?xml version="1.0" encoding="utf-8"?>
> 
> Could you also remove these sag files from the Visual Studio project files? Lame, I know. But we don't need to be proactive adding files, just removing them =).
> 
>     shell> ack -a UserInputPromptPreviousSelected.svg
>     WebInspectorUI.vcxproj/WebInspectorUI.vcxproj
>     539:    <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg" />
> 
>     WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters
>     1698:    <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg">

Will remove in commit.

[Joseph Pecoraro]

Comment on attachment 214501 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review

> Source/WebInspectorUI/UserInterface/LogContentView.css:-147
> -.console-messages:focus .console-group.collapsed .console-item.selected .console-group-title::before {
> -    background-image: -webkit-canvas(disclosure-triangle-small-closed-selected);
> -}

Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages.

    WebInspector._generateDisclosureTriangleImages = function()
    {
        var specifications = {};
        specifications["normal"] = {fillColor: [0, 0, 0, 0.5]};
        specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]};
        specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
        specifications["selected-active"] = {fillColor: [255, 255, 255, 1]};

        generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-");
        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-");

        generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-");
        generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
    }

It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all.
And you can avoid "selected" for the top two, but probably still need it for the bottom two.

[Antoine Quint]

Created attachment 214508 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 214508 [details]
Patch for landing

Clearing flags on attachment: 214508

Committed r157600: <http://trac.webkit.org/changeset/157600>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Timothy Hatcher]

Comment on attachment 214501 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review

>> Source/WebInspectorUI/UserInterface/LogContentView.css:-147
>> -}
> 
> Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages.
> 
>     WebInspector._generateDisclosureTriangleImages = function()
>     {
>         var specifications = {};
>         specifications["normal"] = {fillColor: [0, 0, 0, 0.5]};
>         specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]};
>         specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
>         specifications["selected-active"] = {fillColor: [255, 255, 255, 1]};
> 
>         generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-");
>         generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-");
> 
>         generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-");
>         generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
>     }
> 
> It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all.
> And you can avoid "selected" for the top two, but probably still need it for the bottom two.

Not completely. DOM tree and DataGrid use disclosure-triangle-tiny-open, which still has selected and active.

[Joseph Pecoraro]

(In reply to comment #21)
> (From update of attachment 214501 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review
> 
> >> Source/WebInspectorUI/UserInterface/LogContentView.css:-147
> >> -}
> > 
> > Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages.
> > 
> >     WebInspector._generateDisclosureTriangleImages = function()
> >     {
> >         var specifications = {};
> >         specifications["normal"] = {fillColor: [0, 0, 0, 0.5]};
> >         specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]};
> >         specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
> >         specifications["selected-active"] = {fillColor: [255, 255, 255, 1]};
> > 
> >         generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-");
> >         generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-");
> > 
> >         generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-");
> >         generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
> >     }
> > 
> > It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all.
> > And you can avoid "selected" for the top two, but probably still need it for the bottom two.
> 
> Not completely. DOM tree and DataGrid use disclosure-triangle-tiny-open, which still has selected and active.

I don't see anything using "selected-active".
And yep, I was only saying "-small-" could avoid "selected", but "-tiny-" does still need it.