Bug 104877

Summary:

Web Inspector: need to visually distinguish UA shadow roots

Product:

WebKit

Reporter:

Sergey G. Grekhov <sgrekhov>

Component:

Web Inspector (Deprecated)

Assignee:

Web Components Team <webcomponents-bugzilla>

Status:

RESOLVED INVALID

Severity:

Enhancement

CC:

apavlov, dglazkov, keishi, loislo, morrita, pfeldman, pmuellr, shinyak, vsevik, webcomponents-bugzilla, web-inspector-bugs, webkit.review.bot, yurys

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

All

Bug Depends on:

105311

Bug Blocks:

62220

Attachments:

Description	Flags
Patch	none

Sergey G. Grekhov

Reported 2012-12-12 21:20:09 PST

If Show Shadow DOM option is enabled in the inspector settings it shows ShadowRoots created by UA. For example tags like <video controls>, <datails>, <summary>, <input type="text"> contains build in ShadowRoot objects. Inspector shows them as #shadow-root. Problem is that when user creates Shadow roots they looks in the inspector exactly in the same way (as #shadow-root). It surprise users because they can see in the inspector additional ShadowRoots and treat them like a bug. Request is to show UA-created ShadowRoots in the different way, for example like #webkit-shadow-root

Attachments
Patch (5.05 KB, patch) 2012-12-17 18:43 PST, Shinya Kawanaka	no flags	Details Formatted Diff Diff
View All Add attachment proposed patch, testcase, etc.

Shinya Kawanaka

Comment 1 2012-12-17 18:43:23 PST

Created attachment 179854 [details] Patch

WebKit Review Bot

Comment 2 2012-12-17 20:34:46 PST

Comment on attachment 179854 [details] Patch Clearing flags on attachment: 179854 Committed r137979: <http://trac.webkit.org/changeset/137979>

WebKit Review Bot

Comment 3 2012-12-17 20:34:49 PST

All reviewed patches have been landed. Closing bug.

Pavel Feldman

Comment 4 2012-12-17 22:06:49 PST

Comment on attachment 179854 [details] Patch I am not a fan of this change since $0.nodeName will not match the value in the elements panel now. We could do #shadow-root (internal) or #shadow-root (user agent) #shadow-root (webkit) instead.

Yury Semikhatsky

Comment 5 2012-12-17 22:13:57 PST

(In reply to comment #4) > (From update of attachment 179854 [details]) > I am not a fan of this change since $0.nodeName will not match the value in the elements panel now. We could do #shadow-root (internal) or #shadow-root (user agent) #shadow-root (webkit) instead. Good point, we should pass shadow root origin as a separate property. This way nodeName will match the value in the console and can still show the origin in the Elements panel. Sergey, can you take care of this?

Shinya Kawanaka

Comment 6 2012-12-17 22:45:18 PST

Thanks for taking care of this. Actually ShadowRoot.nodeName should return '#document-fragment' instead of '#shadow-root' (See Bug 104995). So if we would like to match nodeName and displayed name, we should show #document-fragment (shadow root) or something, I think. But showing '#shadow-root' might be user friendly... Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root?

Pavel Feldman

Comment 7 2012-12-17 22:48:12 PST

> Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level.

Shinya Kawanaka

Comment 8 2012-12-17 22:51:45 PST

(In reply to comment #7) > > Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? > > The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level. Hmm... OK. I would like to hear Dimitri's thought about how we show ShadowRoot in the elements tab.

Pavel Feldman

Comment 9 2012-12-17 23:01:55 PST

(In reply to comment #8) > (In reply to comment #7) > > > Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? > > > > The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level. > > Hmm... OK. > > I would like to hear Dimitri's thought about how we show ShadowRoot in the elements tab. Context for Dimitri: I think inspector should render shadow root titles as: node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(user agent)" : "") Today that would be: #shadow-root (user agent) or #shadow-root If you change the nodeName for roots in the future, inspector will update its display name accordingly.

Pavel Feldman

Comment 10 2012-12-17 23:03:15 PST

> Hmm... OK. Sorry? If you think it is confusing / have an opinion on this one, please speak up.

Shinya Kawanaka

Comment 11 2012-12-18 00:35:07 PST

(In reply to comment #10) > > Hmm... OK. > > Sorry? If you think it is confusing / have an opinion on this one, please speak up. As a web developer, I would like to see string 'shadow-root' somewhere. just showing 'document fragment' seems confusing. So, I would like to see something like this: node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(useragent shadow root)" : "(shadow root)") # Note that ShadowRoot.nodeName should be '#document-fragment'.

Dimitri Glazkov (Google)

Comment 12 2012-12-18 07:47:48 PST

(In reply to comment #11) > (In reply to comment #10) > > > Hmm... OK. > > > > Sorry? If you think it is confusing / have an opinion on this one, please speak up. > > As a web developer, I would like to see string 'shadow-root' somewhere. just showing 'document fragment' seems confusing. > > So, I would like to see something like this: > node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(useragent shadow root)" : "(shadow root)") > > # Note that ShadowRoot.nodeName should be '#document-fragment'. I defer to Inspector folks to find the right way to do visualize this. We do have a bug 104995, where we're showing "#shadow-root" as nodeName today, and that should be fixed soon, switching over to "#document-fragment". This will make displaying shadow root a bit more challenging, but perhaps it just need to be addressed with proper visualization. For instance, instead of showing nodeName, put some sort of a clickable badge/menu/etc. This particular change seems ill-fitting either way -- neither showing the current nodeName nor clearly explaining the distinction between UA/author shadow roots very well.

WebKit Review Bot

Comment 13 2012-12-18 08:34:22 PST

Re-opened since this is blocked by bug 105311

Brian Burg

Comment 14 2014-12-12 13:40:58 PST

Closing as invalid, as this bug pertains to the old inspector UI and/or its tests. Please file a new bug (https://www.webkit.org/new-inspector-bug) if the bug/feature/issue is still relevant to WebKit trunk.

Note You need to log in before you can comment on or make changes to this bug.