Bug 167035 – Web Inspector: no way to filter out all console messages or all evaluations/results

• Component: Web Inspector
• Status: RESOLVED FIXED

[Blaze Burg]

Sometimes a webpage is very spammy with logs, and there's no obvious way (aside from entering jibberish into the filter bar) to hide all console messages from the inspected web content.

Xcode has two sides in the area where the Split Console is, which they call the Debugger Area. You can switch between showing logging and a prompt side-by-side, or just one or the other. I don't really like this UI since it's hard to read both of them when split. Perhaps just having a drop-down or scope bar on the left side of the split console navigation bar would be sufficient for turning one or the other off.

[Radar WebKit Bug Importer]

<rdar://problem/30023523>

[Devin Rousso]

Created attachment 362071 [details]
Patch

[Joseph Pecoraro]

Comment on attachment 362071 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:78
> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Console, WI.UIString("Console"), {className: "console"}),

Console sounds more like `console` to me then the Web Inspector Quick Console.

[Devin Rousso]

Comment on attachment 362071 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:78
>> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Console, WI.UIString("Console"), {className: "console"}),
> 
> Console sounds more like `console` to me then the Web Inspector Quick Console.

I'm not entirely sure what you mean by that?  This patch isn't specific to the quick console.  It's about providing a way to filter commands/results entered into the console.

[Joseph Pecoraro]

(In reply to Devin Rousso from comment #4)
> Comment on attachment 362071 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=362071&action=review
> 
> >> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:78
> >> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Console, WI.UIString("Console"), {className: "console"}),
> > 
> > Console sounds more like `console` to me then the Web Inspector Quick Console.
> 
> I'm not entirely sure what you mean by that?  This patch isn't specific to
> the quick console.  It's about providing a way to filter commands/results
> entered into the console.

"entered into the console" that is the Web Inspector Quick Console, no?

[Devin Rousso]

Comment on attachment 362071 [details]
Patch

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

>>>> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:78
>>>> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Console, WI.UIString("Console"), {className: "console"}),
>>> 
>>> Console sounds more like `console` to me then the Web Inspector Quick Console.
>> 
>> I'm not entirely sure what you mean by that?  This patch isn't specific to the quick console.  It's about providing a way to filter commands/results entered into the console.
> 
> "entered into the console" that is the Web Inspector Quick Console, no?

Oooohhh.  I misunderstood what you were saying.

Yes, I am not entirely set on using "Console", as it's not really that clear.  Perhaps we could use "Inspector", or "Developer"?  I'd like some sort of name that clarifies that the filtering is based on commands/results entered by a developer (manually) into Web Inspector's Console tab/prompt.

[Joseph Pecoraro]

> Yes, I am not entirely set on using "Console", as it's not really that
> clear.  Perhaps we could use "Inspector", or "Developer"?  I'd like some
> sort of name that clarifies that the filtering is based on commands/results
> entered by a developer (manually) into Web Inspector's Console tab/prompt.

I like:

    "Prompt"
    "Console Prompt"
    "Inspector"

Some I like that aren't colloquial enough:

    "Quick Console"
    "REPL"
    "DevTools"

[Devin Rousso]

Created attachment 362876 [details]
Patch

[Timothy Hatcher]

Comment on attachment 362876 [details]
Patch

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

I like this, but it should be called Evaluations.

> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:87
> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Prompt, WI.UIString("Prompt"), {className: "prompt"}),

Evaluations?

[Timothy Hatcher]

Comment on attachment 362876 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/LogContentView.js:87
>> +            new WI.ScopeBarItem(WI.LogContentView.Scopes.Prompt, WI.UIString("Prompt"), {className: "prompt"}),
> 
> Evaluations?

Since the others are plural.

[Devin Rousso]

Created attachment 365375 [details]
Patch

[Timothy Hatcher]

Comment on attachment 365375 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/LogContentView.css:46
> +    background-color: darkgrey;

Does this need a dark mode color? Normally we don't use names unless it is white, black or transparent.

[EWS Watchlist]

Comment on attachment 365375 [details]
Patch

Attachment 365375 [details] did not pass mac-wk2-ews (mac-wk2):
Output: https://webkit-queues.webkit.org/results/11585519

New failing tests:
imported/w3c/web-platform-tests/mediacapture-record/MediaRecorder-constructor.html

[EWS Watchlist]

Created attachment 365412 [details]
Archive of layout-test-results from ews104 for mac-highsierra-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-highsierra-wk2  Platform: Mac OS X 10.13.6

[Devin Rousso]

Comment on attachment 365375 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/LogContentView.css:46
>> +    background-color: darkgrey;
> 
> Does this need a dark mode color? Normally we don't use names unless it is white, black or transparent.

It looked fine to me in dark mode.  We've used variations of grey as both light and dark before.  I'll upload a screenshot of it.

[Devin Rousso]

Created attachment 365429 [details]
[Image] After Patch is applied (Light)

[Devin Rousso]

Created attachment 365431 [details]
[Image] After Patch is applied (Dark)

[WebKit Commit Bot]

Comment on attachment 365375 [details]
Patch

Clearing flags on attachment: 365375

Committed r243260: <https://trac.webkit.org/changeset/243260>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.