Issue 726972 link

Starred by 1 user

Issue metadata

Status:	Fixed
Owner:	l...@chromium.org
Closed:	Nov 2017
Components:	Platform>DevTools
EstimatedDays:	----
NextAction:	----
OS:	----
Pri:	3
Type:	Bug

DevTools: encapsulate more components/panels with shadow DOM

Project Member Reported by l...@chromium.org, May 27 2017

Issue description

DevTools has a lot of 'components' in the general sense of the term.  Many drawers, sidebars, toolbars, and widgets could be encapsulated with shadow DOM.  While some are today, the coverage could be better.

The main benefit of doing so with shadow DOM is isolating styles, possibly improving performance and avoiding interference.

Project Member

Comment 1 by bugdroid1@chromium.org, May 27 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8823fc31cc8bf4a2033326d7214e77963ea74977

commit 8823fc31cc8bf4a2033326d7214e77963ea74977
Author: luoe <luoe@chromium.org>
Date: Sat May 27 04:55:58 2017

DevTools: migrate EventListenersSidebarPane to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2902553002
Cr-Commit-Position: refs/heads/master@{#475236}

[modify] https://crrev.com/8823fc31cc8bf4a2033326d7214e77963ea74977/third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css
[modify] https://crrev.com/8823fc31cc8bf4a2033326d7214e77963ea74977/third_party/WebKit/Source/devtools/front_end/sources/EventListenerBreakpointsSidebarPane.js
[modify] https://crrev.com/8823fc31cc8bf4a2033326d7214e77963ea74977/third_party/WebKit/Source/devtools/front_end/sources/eventListenerBreakpoints.css

Project Member

Comment 2 by bugdroid1@chromium.org, May 27 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/da68948cb526ff7b5737fd334152aba758e913aa

commit da68948cb526ff7b5737fd334152aba758e913aa
Author: luoe <luoe@chromium.org>
Date: Sat May 27 05:04:59 2017

DevTools: migrate ScopeChainSidebarPane to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2893393002
Cr-Commit-Position: refs/heads/master@{#475238}

[modify] https://crrev.com/da68948cb526ff7b5737fd334152aba758e913aa/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/da68948cb526ff7b5737fd334152aba758e913aa/third_party/WebKit/Source/devtools/front_end/sources/ScopeChainSidebarPane.js
[modify] https://crrev.com/da68948cb526ff7b5737fd334152aba758e913aa/third_party/WebKit/Source/devtools/front_end/sources/module.json
[add] https://crrev.com/da68948cb526ff7b5737fd334152aba758e913aa/third_party/WebKit/Source/devtools/front_end/sources/scopeChainSidebarPane.css
[modify] https://crrev.com/da68948cb526ff7b5737fd334152aba758e913aa/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css

Project Member

Comment 3 by bugdroid1@chromium.org, May 30 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0c645f037a2eb0950b6447c206c6fdda3e6bf32a

commit 0c645f037a2eb0950b6447c206c6fdda3e6bf32a
Author: luoe <luoe@chromium.org>
Date: Tue May 30 20:00:29 2017

DevTools: migrate WatchExpressionsSidebarPane to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2902543002
Cr-Commit-Position: refs/heads/master@{#475636}

[modify] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/error-in-watch-expressions.html
[modify] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
[modify] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/Source/devtools/front_end/sources/module.json
[modify] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css
[add] https://crrev.com/0c645f037a2eb0950b6447c206c6fdda3e6bf32a/third_party/WebKit/Source/devtools/front_end/sources/watchExpressionsSidebarPane.css

Project Member

Comment 4 by bugdroid1@chromium.org, Jun 7 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1406904015cba22c1af48fff00043f44accc4f94

commit 1406904015cba22c1af48fff00043f44accc4f94
Author: luoe <luoe@chromium.org>
Date: Wed Jun 07 00:17:03 2017

DevTools: move styles sidebar toolbar into StylesSidebarPane

This is part of an effort to migrate SSP to shadow DOM as its own component.

BUG= 726972 

Review-Url: https://codereview.chromium.org/2917033004
Cr-Commit-Position: refs/heads/master@{#477478}

[modify] https://crrev.com/1406904015cba22c1af48fff00043f44accc4f94/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js
[modify] https://crrev.com/1406904015cba22c1af48fff00043f44accc4f94/third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js
[modify] https://crrev.com/1406904015cba22c1af48fff00043f44accc4f94/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Project Member

Comment 5 by bugdroid1@chromium.org, Jun 8 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/71395e75bf75e447baeb4cf7a784ebd7c536c795

commit 71395e75bf75e447baeb4cf7a784ebd7c536c795
Author: luoe <luoe@chromium.org>
Date: Thu Jun 08 00:36:08 2017

DevTools: make EventListenersView a proper widget

BUG= 726972 

Review-Url: https://codereview.chromium.org/2930483003
Cr-Commit-Position: refs/heads/master@{#477831}

[modify] https://crrev.com/71395e75bf75e447baeb4cf7a784ebd7c536c795/third_party/WebKit/Source/devtools/front_end/elements/EventListenersWidget.js
[modify] https://crrev.com/71395e75bf75e447baeb4cf7a784ebd7c536c795/third_party/WebKit/Source/devtools/front_end/event_listeners/EventListenersView.js
[modify] https://crrev.com/71395e75bf75e447baeb4cf7a784ebd7c536c795/third_party/WebKit/Source/devtools/front_end/sources/ObjectEventListenersSidebarPane.js
[modify] https://crrev.com/71395e75bf75e447baeb4cf7a784ebd7c536c795/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css

Project Member

Comment 6 by bugdroid1@chromium.org, Jun 8 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ffbe0338c8f8acba7ec54e90d821049c341266ea

commit ffbe0338c8f8acba7ec54e90d821049c341266ea
Author: luoe <luoe@chromium.org>
Date: Thu Jun 08 00:37:08 2017

DevTools: migrate SSP Classes and ElementState toolbar widgets to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2924883002
Cr-Commit-Position: refs/heads/master@{#477832}

[modify] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
[modify] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js
[add] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/classesPaneWidget.css
[add] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/elementStatePaneWidget.css
[modify] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
[modify] https://crrev.com/ffbe0338c8f8acba7ec54e90d821049c341266ea/third_party/WebKit/Source/devtools/front_end/elements/module.json

Project Member

Comment 7 by bugdroid1@chromium.org, Jun 8 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1723af89f9dca5b35dc342ccdf36970fc49b548b

commit 1723af89f9dca5b35dc342ccdf36970fc49b548b
Author: luoe <luoe@chromium.org>
Date: Thu Jun 08 04:07:59 2017

DevTools: migrate MetricsSidebarPane to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2924873004
Cr-Commit-Position: refs/heads/master@{#477880}

[modify] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js
[modify] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
[modify] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
[add] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/front_end/elements/metricsSidebarPane.css
[modify] https://crrev.com/1723af89f9dca5b35dc342ccdf36970fc49b548b/third_party/WebKit/Source/devtools/front_end/elements/module.json

Project Member

Comment 8 by bugdroid1@chromium.org, Jun 9 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0254120193fa62034e87adab6d4484336e7c86aa

commit 0254120193fa62034e87adab6d4484336e7c86aa
Author: luoe <luoe@chromium.org>
Date: Fri Jun 09 01:57:26 2017

DevTools: migrate ComputedStyleWidget to shadow

The computedStylesSidebarPane.css was injected in both the widget's element and
its treeOutline. Now, there are two css files, one for each.

BUG= 726972 

Review-Url: https://codereview.chromium.org/2932593003
Cr-Commit-Position: refs/heads/master@{#478160}

[modify] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
[modify] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
[modify] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
[add] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/front_end/elements/computedStyleWidgetTree.css
[modify] https://crrev.com/0254120193fa62034e87adab6d4484336e7c86aa/third_party/WebKit/Source/devtools/front_end/elements/module.json

Project Member

Comment 9 by bugdroid1@chromium.org, Jun 11 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/75770b99c7a2a5a2a426881e5a766e4fcbb4648a

commit 75770b99c7a2a5a2a426881e5a766e4fcbb4648a
Author: luoe <luoe@chromium.org>
Date: Sun Jun 11 08:02:52 2017

DevTools: migrate StylesSidebarPane to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2927573004
Cr-Commit-Position: refs/heads/master@{#478531}

[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/LayoutTests/http/tests/inspector/elements-test.js
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/filter-matched-styles-hides-separators.html
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/style-update-during-selector-edit.html
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/ElementsSidebarPane.js
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/MetricsSidebarPane.js
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
[modify] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/module.json
[add] https://crrev.com/75770b99c7a2a5a2a426881e5a766e4fcbb4648a/third_party/WebKit/Source/devtools/front_end/elements/stylesSidebarPane.css

Project Member

Comment 10 by bugdroid1@chromium.org, Jul 20 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/23eca3d61bd69eeaec6ca6554f7fb99a7c566d14

commit 23eca3d61bd69eeaec6ca6554f7fb99a7c566d14
Author: luoe <luoe@chromium.org>
Date: Thu Jul 20 23:38:09 2017

DevTools: migrate PropertiesWidget to shadow

BUG= 726972 

Review-Url: https://codereview.chromium.org/2978713002
Cr-Commit-Position: refs/heads/master@{#488482}

[modify] https://crrev.com/23eca3d61bd69eeaec6ca6554f7fb99a7c566d14/third_party/WebKit/Source/devtools/front_end/elements/PropertiesWidget.js
[modify] https://crrev.com/23eca3d61bd69eeaec6ca6554f7fb99a7c566d14/third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css
[modify] https://crrev.com/23eca3d61bd69eeaec6ca6554f7fb99a7c566d14/third_party/WebKit/Source/devtools/front_end/elements/module.json
[add] https://crrev.com/23eca3d61bd69eeaec6ca6554f7fb99a7c566d14/third_party/WebKit/Source/devtools/front_end/elements/propertiesWidget.css

Comment 11 by l...@chromium.org, Nov 8 2017

Status: Fixed (was: Assigned)

No further major panels are planned to be shadowized at this time.

►

Issue 726972 link

Issue metadata

DevTools: encapsulate more components/panels with shadow DOM

Issue description

Comment 1 by bugdroid1@chromium.org, May 27 2017

Comment 1 Deleted

Comment 2 by bugdroid1@chromium.org, May 27 2017

Comment 2 Deleted

Comment 3 by bugdroid1@chromium.org, May 30 2017

Comment 3 Deleted

Comment 4 by bugdroid1@chromium.org, Jun 7 2017

Comment 4 Deleted

Comment 5 by bugdroid1@chromium.org, Jun 8 2017

Comment 5 Deleted

Comment 6 by bugdroid1@chromium.org, Jun 8 2017

Comment 6 Deleted

Comment 7 by bugdroid1@chromium.org, Jun 8 2017

Comment 7 Deleted

Comment 8 by bugdroid1@chromium.org, Jun 9 2017

Comment 8 Deleted

Comment 9 by bugdroid1@chromium.org, Jun 11 2017

Comment 9 Deleted

Comment 10 by bugdroid1@chromium.org, Jul 20 2017

Comment 10 Deleted

Comment 11 by l...@chromium.org, Nov 8 2017

Comment 11 Deleted

Sign in to add a comment