Bug 107793 – Web Inspector: Add explanation for Console object expansion behaviour

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Sergey Ryazanov]

http://crbug.com/166134

Steps to reproduce the problem:
1. Use console.log for logging an object.
2. Observe that the state of the object at the moment of logging is logged in italics.
3. Expand the object in the log with a mouse click. The state of the object is shown at the moment of expanding, not in italics.

Become confused if you do not know about rationale behind the behavior.

What is the expected behavior?
Explain the meaning of italics and why is the state of the object shown at the moment of expanding and not at the moment of logging.
Just a tiny informational icon with a hover popup would be enough.

What went wrong?
Developers without prior knowledge of the meaning of italics in console.log output, have a reason to believe that console.log shows the state at the time of logging and the expanding is only created to make the output manageble.

Did this work before? Yes Before  issue 50316  was fixed the situation was more confusing, but at least it was obviously confusing and wrong, so the developer would notice that. After  issue 50316  has been fixed, it is now subtly confusing.

[Sergey Ryazanov]

Created attachment 184419 [details]
Patch

[Sergey Ryazanov]

Created attachment 184420 [details]
Screenshot of the feature

[Pavel Feldman]

Comment on attachment 184419 [details]
Patch

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

> Source/WebCore/inspector/front-end/ConsoleMessage.js:308
> +        var note = section.element.querySelector(".header > .title").createChild("span", "object-info-state-note");

You should not reach out for ObjectPropertiesSection internals from here - it is better to have this code in the object properties section itself. You can add ObjectPropertiesSection.prototype.showExpansionHint(enabled) to control it from here, default it to false.

> Source/WebCore/inspector/front-end/inspector.css:1216
> +    display: none;

We try to be minimalistic wrt styles - sounds like alignment ones are not needed here.

> Source/WebCore/inspector/front-end/inspector.css:1224
> +    font-size: 10px;

We typically inherit font proeprties.

[Pavel Feldman]

Comment on attachment 184420 [details]
Screenshot of the feature

I'd move hint box one pixel up and two pixels to the left + bump "i" 1 pixel up. You might also want to add text shadow for it.

[Sergey Ryazanov]

Created attachment 184442 [details]
Patch

[Sergey Ryazanov]

Created attachment 184444 [details]
Updated screenshot

[Sergey Ryazanov]

(In reply to comment #3)
> (From update of attachment 184419 [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=184419&action=review
> 
> > Source/WebCore/inspector/front-end/ConsoleMessage.js:308
> > +        var note = section.element.querySelector(".header > .title").createChild("span", "object-info-state-note");
> 
> You should not reach out for ObjectPropertiesSection internals from here - it is better to have this code in the object properties section itself. You can add ObjectPropertiesSection.prototype.showExpansionHint(enabled) to control it from here, default it to false.

It exposed on the same level as section.element (now I made it clear by removing querySelector) which this code already uses. So I don't think it's violation of encapsulation.

> > Source/WebCore/inspector/front-end/inspector.css:1216
> > +    display: none;
> 
> We try to be minimalistic wrt styles - sounds like alignment ones are not needed here.

Removed vertical-align. text-align is essential.

> > Source/WebCore/inspector/front-end/inspector.css:1224
> > +    font-size: 10px;
> 
> We typically inherit font proeprties.

Didn't get what are you suggesting. Inherited value is 11px. So I need make font smaller or enlarge the box.

[Pavel Feldman]

Comment on attachment 184442 [details]
Patch

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

Slightly adjusted style below. Otherwise looks good.

> Source/WebCore/inspector/front-end/inspector.css:1215
> +.object-info-state-note {

Here is my version (round balloon):

width: 12px;
height: 12px;
background-color: rgb(179, 203, 247);
color: white;
text-align: center;
border-radius: 5px;
line-height: 13px;
margin: 0 8px;

[WebKit Review Bot]

Comment on attachment 184442 [details]
Patch

Attachment 184442 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/16080877

New failing tests:
inspector/console/console-tests.html
inspector/console/console-log-document-proto.html
inspector/console/console-external-array.html
inspector/console/console-log-toString-object.html
inspector/console/console-big-array.html
inspector/console/console-eval-syntax-error.html
inspector/console/console-message-format.html
inspector/console/console-format.html
inspector/console/console-object-constructor-name.html
inspector/console/console-dir.html
inspector/console/console-eval-undefined-override.html
inspector/console/console-dirxml.html
inspector/console/console-object-preview.html
inspector/console/console-format-collections.html

[Sergey Ryazanov]

Created attachment 184669 [details]
Patch

[Sergey Ryazanov]

Created attachment 184670 [details]
Updated screenshot

[WebKit Review Bot]

Comment on attachment 184669 [details]
Patch

Rejecting attachment 184669 [details] from commit-queue.

Failed to run "['/mnt/git/webkit-commit-queue/Tools/Scripts/webkit-patch', '--status-host=queues.webkit.org', '--bot-id=gce-cq-03', 'apply-attachment', '--no-update', '--non-interactive', 184669, '--port=chromium-xvfb']" exit_code: 2 cwd: /mnt/git/webkit-commit-queue

Last 500 characters of output:
webkit-commit-queue

Parsed 4 diffs from patch file(s).
patch: **** Can't create file /tmp/ppSAsOFf : No space left on device
patch: **** Can't create file /tmp/ppZm1GVf : No space left on device
patch: **** Can't create file /tmp/ppkY8lre : No space left on device
patch: **** Can't create file /tmp/ppEgfH4d : No space left on device

Failed to run "[u'/mnt/git/webkit-commit-queue/Tools/Scripts/svn-apply', '--force', '--reviewer', 'Pavel Feldman']" exit_code: 2 cwd: /mnt/git/webkit-commit-queue

Full output: http://queues.webkit.org/results/16122141

[WebKit Review Bot]

Comment on attachment 184669 [details]
Patch

Rejecting attachment 184669 [details] from commit-queue.

Failed to run "['/mnt/git/webkit-commit-queue/Tools/Scripts/webkit-patch', '--status-host=queues.webkit.org', '--bot-id=gce-cq-03', 'apply-attachment', '--no-update', '--non-interactive', 184669, '--port=chromium-xvfb']" exit_code: 2 cwd: /mnt/git/webkit-commit-queue

Last 500 characters of output:
webkit-commit-queue

Parsed 4 diffs from patch file(s).
patch: **** Can't create file /tmp/ppWivw1O : No space left on device
patch: **** Can't create file /tmp/ppMKFNdP : No space left on device
patch: **** Can't create file /tmp/ppgPhXRO : No space left on device
patch: **** Can't create file /tmp/ppQEj7iN : No space left on device

Failed to run "[u'/mnt/git/webkit-commit-queue/Tools/Scripts/svn-apply', '--force', '--reviewer', 'Pavel Feldman']" exit_code: 2 cwd: /mnt/git/webkit-commit-queue

Full output: http://queues.webkit.org/results/16123124

[WebKit Review Bot]

Comment on attachment 184669 [details]
Patch

Rejecting attachment 184669 [details] from commit-queue.

New failing tests:
inspector/console/console-tests.html
inspector/console/console-log-document-proto.html
inspector/console/console-external-array.html
inspector/console/console-log-toString-object.html
inspector/console/console-big-array.html
inspector/console/console-eval-syntax-error.html
inspector/console/console-message-format.html
inspector/console/console-format.html
inspector/console/console-object-constructor-name.html
inspector/console/console-dir.html
inspector/console/console-eval-undefined-override.html
inspector/console/console-dirxml.html
inspector/console/console-object-preview.html
inspector/console/console-format-collections.html
Full output: http://queues.webkit.org/results/16120230

[Sergey Ryazanov]

Created attachment 184718 [details]
Patch

[WebKit Review Bot]

Comment on attachment 184718 [details]
Patch

Clearing flags on attachment: 184718

Committed r140813: <http://trac.webkit.org/changeset/140813>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.