Web Inspector: Console: vertically align icons with text

[Nikita Vasilyev]

Created attachment 170500 [details]
Hover bug

Key points:

— Add subtle background color for console.error and console.warn to make it more apparent
— Properly align icons with text
— Add subtle gradient for group titles
— Use non-monospace font for source links to make them more readable and more distinguishable from the code
— Remove gray background on mouse over (introduced by https://bugs.webkit.org/show_bug.cgi?id=98701). It overlays background of elements; see attached hover-bug.png

[Nikita Vasilyev]

Created attachment 170501 [details]
Mockup (before/after)

[Nikita Vasilyev]

Created attachment 170503 [details]
Patch

[Nikita Vasilyev]

Code used on the mockup:

console.log('This is log message');
console.debug('This is debug message');
console.error('This is error message');
console.info('This is info message');
console.warn('This is warning message');
console.log('');
console.group('Group 1');

    console.log('content of a group');
    console.group('Nested group');

        for (var i = 3; i < 7; i++)
            console.log('%i * Pi =', i, i * Math.PI);

        var j = 42;
        while (j--)
            console.warn('ACHTUNG');

        console.log('Multiline message\nsecond line\nthird line.');

    console.groupEnd('Nested group');
    throw new Error('Example');

console.groupEnd('Group 1');

[Pavel Feldman]

(In reply to comment #0)
> Created an attachment (id=170500) [details]
> Hover bug
> 
> Key points:
> 
> — Add subtle background color for console.error and console.warn to make it more apparent

Not sure I like this one.

> — Properly align icons with text
> — Add subtle gradient for group titles

I definitely don't like this one.

> — Use non-monospace font for source links to make them more readable and more distinguishable from the code

Console should be monospace

> — Remove gray background on mouse over (introduced by https://bugs.webkit.org/show_bug.cgi?id=98701). It overlays background of elements; see attached hover-bug.png

[Nikita Vasilyev]

(In reply to comment #4)
> Console should be monospace

I made non-monospace only links. Why should they be monospace?

Benefits of monospace font:
— predictable caret movement between rows.
— l, I, i, o, O, and 0 are easy to distinguish.

Downsides:
— too wide
— less readable

[Pavel Feldman]

> I made non-monospace only links. Why should they be monospace?

- Maybe because I perceive console as a terminal.
- Mostly, because whenever something is related to source code (and I think file path is somewhat related to code), I try to use <code> (monospace).

[Nikita Vasilyev]

Created attachment 171825 [details]
Mockup. Align icons with text and increase padding between messages by 2px

https://bugs.webkit.org/show_bug.cgi?id=100489 I dig animated GIF by Mike.

[Nikita Vasilyev]

Created attachment 171827 [details]
Patch. Align icons with text and increase padding between messages by 2px

Pavel, I made a small patch that doesn’t have changes you don’t like

[Alexander Pavlov (apavlov)]

Comment on attachment 171827 [details]
Patch. Align icons with text and increase padding between messages by 2px

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

Please make sure you don't break what https://bugs.webkit.org/show_bug.cgi?id=100105 fixed. Can you attach a screenshot with all possible combinations of console message types? (nested groups, errors, warnings et al.)

> Source/WebCore/inspector/front-end/inspector.css:-909
> -    border-top: 1px solid rgb(240, 240, 240);

I would not touch this without a severe reason, since it was flipped from border-bottom a week ago, to fix https://bugs.webkit.org/show_bug.cgi?id=100105.

[Nikita Vasilyev]

Created attachment 171835 [details]
Mockup. Align icons with text and increase padding between messages by 2px

This patch doesn’t seem to introduce any bugs. However, https://bugs.webkit.org/show_bug.cgi?id=100105 seems to do: take a look at a link right next to the "ACHTUNG".

[Nikita Vasilyev]

Created attachment 171879 [details]
Patch

I’ve made a testcase for bug 100105. http://elv1s.ru/x/long-js-filename-test.html
My `.console-message {overflow: hidden}` solution works exactly the same as the one by Mike but with less code, e.g. 1 line of code versus 5.

[Pavel Feldman]

Comment on attachment 171879 [details]
Patch

Is this still relevant? Please restore r? if it is.

[Nikita Vasilyev]

Comment on attachment 171879 [details]
Patch

Yes, still relevant.

[Pavel Feldman]

Comment on attachment 171879 [details]
Patch

Clearing r? - it has been there for ages, probably obsolete.

[Mátyás Mustoha]

Created attachment 204156 [details]
Updated patch

[Csaba Osztrogonác]

Comment on attachment 204156 [details]
Updated patch

r-, because the old inspector UI was removed.