Bug 140385 – Web Inspector: Make message selection in the console more readable

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Nikita Vasilyev]

Problem description and proposed solutions: http://trac.webkit.org/wiki/InspectorConsoleSelection

(Since Bugzilla can’t display images inline, I used a wiki instead)

[Radar WebKit Bug Importer]

<rdar://problem/19454992>

[Jonathan Wells]

I like proposed solution 2. 

You could also have a lighter highlight behind the full text, as if to indicate that cmd-c will copy the text. Then if the user selects a subset of the full text, only that text has that lighter color highlight behind it. If the user deselects that text, say by single clicking within the same error, the highlight expands back to the full text. 

The sidebar highlight (darker) remains the same the whole time.

[Jonathan Wells]

Created attachment 244561 [details]
[VIDEO] highlighting concept.

[VIDEO] highlighting concept.

Here is a video with something along the lines of what I'm suggesting.

[Timothy Hatcher]

I like that.

[Nikita Vasilyev]

Jonathan, I agree on the highlight behind the full text.

If we ever decide to color code different messages types using background color (e.g. slightly yellow for console.warm) it would compete with the selection message background, but until when it’s fine.

[Nikita Vasilyev]

Created attachment 244570 [details]
Patch

[Nikita Vasilyev]

Created attachment 244571 [details]
Animated GIF with the patch applied

[Nikita Vasilyev]

Tim and I liked the solution 1 a little bit more so I went with that approach. Although, I added a slight background and source link highlight.

[Nikita Vasilyev]

(In reply to comment #2)
> You could also have a lighter highlight behind the full text, as if to
> indicate that cmd-c will copy the text. Then if the user selects a subset of
> the full text, only that text has that lighter color highlight behind it. If
> the user deselects that text, say by single clicking within the same error,
> the highlight expands back to the full text. 
> 
> The sidebar highlight (darker) remains the same the whole time.

This sounds like a good idea. It requires changes in JS and I’d prefer doing it as a separate patch.

[Timothy Hatcher]

Comment on attachment 244570 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/LogContentView.css:70
> +    background: hsl(0, 0%, 60%);

Maybe we should use hsl more for gray colors elsewhere.

> Source/WebInspectorUI/UserInterface/Views/LogContentView.css:75
> +    background: hsl(210, 100%, 49%);

Why not 50%?

[Timothy Hatcher]

Comment on attachment 244570 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/LogContentView.css:70
>> +    background: hsl(0, 0%, 60%);
> 
> Maybe we should use hsl more for gray colors elsewhere.

Or more colors in general, not just gray.

[Timothy Hatcher]

(In reply to comment #9)
> (In reply to comment #2)
> > You could also have a lighter highlight behind the full text, as if to
> > indicate that cmd-c will copy the text. Then if the user selects a subset of
> > the full text, only that text has that lighter color highlight behind it. If
> > the user deselects that text, say by single clicking within the same error,
> > the highlight expands back to the full text. 
> > 
> > The sidebar highlight (darker) remains the same the whole time.
> 
> This sounds like a good idea. It requires changes in JS and I’d prefer doing
> it as a separate patch.

We already hide the background selection color if you make a text selection. I think the only change would be to keep the dark sidebar color.

[Nikita Vasilyev]

(In reply to comment #10)
> Comment on attachment 244570 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=244570&action=review
> 
> > Source/WebInspectorUI/UserInterface/Views/LogContentView.css:70
> > +    background: hsl(0, 0%, 60%);
> 
> Maybe we should use hsl more for gray colors elsewhere.
> 
> > Source/WebInspectorUI/UserInterface/Views/LogContentView.css:75
> > +    background: hsl(210, 100%, 49%);
> 
> Why not 50%?

I used the exact same color as in DOM tree selection but converted it from RGB to HSL:

    .dom-tree-outline:focus li.selected .selection {
        background-color: rgb(0, 128, 252);
    }

[Nikita Vasilyev]

(In reply to comment #12)
> (In reply to comment #9)
> > (In reply to comment #2)
> > > You could also have a lighter highlight behind the full text, as if to
> > > indicate that cmd-c will copy the text. Then if the user selects a subset of
> > > the full text, only that text has that lighter color highlight behind it. If
> > > the user deselects that text, say by single clicking within the same error,
> > > the highlight expands back to the full text. 
> > > 
> > > The sidebar highlight (darker) remains the same the whole time.
> > 
> > This sounds like a good idea. It requires changes in JS and I’d prefer doing
> > it as a separate patch.
> 
> We already hide the background selection color if you make a text selection.
> I think the only change would be to keep the dark sidebar color.

Yes. Currently, when we select a portion of a console message, CSS class that is responsible for the border gets removed. So we need two different CSS classes. One for dark blue sidebar and another one for selected console message background.

[WebKit Commit Bot]

Comment on attachment 244570 [details]
Patch

Clearing flags on attachment: 244570

Committed r178620: <http://trac.webkit.org/changeset/178620>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.