DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

JavaScriptBreakpointsSidebarPane, DOMBreakpointsSidebarPane, and
XHRBreakpointsSidebarPane now have their own stylesheets, and all are
encapsulated with shadow DOM.

BUG=none

Review-Url: https://codereview.chromium.org/2900843002
Cr-Commit-Position: refs/heads/master@{#476535}
Committed: https://chromium.googlesource.com/chromium/src/+/1a13ea2825f58403c809c835411257df77e3b175

[luoe, 2017-05-22 18:45:44]

luoe@chromium.org changed reviewers:
+ dgozman@chromium.org

[luoe, 2017-05-22 18:45:45]

Please take a look

This is part of an effort to move more things into components.

Some of the css rules are unused/need cleaning, but I'd like to do clean sources
styles together in a separate patch.

[luoe, 2017-05-24 23:35:09]

luoe@chromium.org changed reviewers:
+ einbinder@chromium.org

[dgozman, 2017-05-25 00:15:34]

Let's just remove it!

[luoe, 2017-05-30 20:55:56]

Description was changed from

==========
DevTools: migrate BreakpointsSidebarPaneBase and clients to shadow

BUG=none
==========

to

==========
DevTools: remove BreakpointsSidebarPaneBase and move clients to shadow

DOMBreakpointsSidebarPane and XHRBreakpointsSidebarPane are now encapsulated.

BUG=none
==========

[luoe, 2017-05-30 20:56:05]

Please take a look

[dgozman, 2017-05-30 21:53:39]

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js:40:
this._listElement = createElementWithClass('ol', 'breakpoint-list');
While we are here, let's change ol to div.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js:128:
this.contentElement.replaceChild(this._emptyElement, this._listElement);
Just toggle a hidden class and leave them both in DOM?

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css:56:
.breakpoint-condition {
Let's remove this file, splitting useful parts of it into
domBreakpointsSidebarPane.css and xhrBreakpointsSidebarPane.css. For example, I
doubt this selector is being used, or that dom breakpoints support editing.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/components/domBreakpointsSidebarPane.css
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/domBreakpointsSidebarPane.css:1:
.breakpoint-list > li {
Copyright.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:14:
this._listElement = createElementWithClass('ol', 'breakpoint-list');
ol -> div

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:81:
var element = createElement('li');
li -> div

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:123:
this.contentElement.replaceChild(this._listElement, this._emptyElement);
Toggle hidden class.

[luoe, 2017-05-31 02:56:42]

Description was changed from

==========
DevTools: remove BreakpointsSidebarPaneBase and move clients to shadow

DOMBreakpointsSidebarPane and XHRBreakpointsSidebarPane are now encapsulated.

BUG=none
==========

to

==========
DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

JavaScriptBreakpointsSidebarPane, DOMBreakpointsSidebarPane, and
XHRBreakpointsSidebarPane now have their own stylesheets, and all are
encapsulated with shadow DOM.

BUG=none
==========

[luoe, 2017-05-31 03:04:07]

Patchset #3 (id:40001) has been deleted

[luoe, 2017-05-31 03:09:25]

Starting to feel like I'm doing two things in one CL, but they're still related.
 Maybe it's better as 2 CLs?

Please take a look.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js:40:
this._listElement = createElementWithClass('ol', 'breakpoint-list');
On 2017/05/30 21:53:39, dgozman wrote:
> While we are here, let's change ol to div.

Done.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js:128:
this.contentElement.replaceChild(this._emptyElement, this._listElement);
On 2017/05/30 21:53:39, dgozman wrote:
> Just toggle a hidden class and leave them both in DOM?

Done.  Yeah, that's simpler.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/breakpointsList.css:56:
.breakpoint-condition {
On 2017/05/30 21:53:39, dgozman wrote:
> Let's remove this file, splitting useful parts of it into
> domBreakpointsSidebarPane.css and xhrBreakpointsSidebarPane.css. For example,
I
> doubt this selector is being used, or that dom breakpoints support editing.

Done.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/components/domBreakpointsSidebarPane.css
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/components/domBreakpointsSidebarPane.css:1:
.breakpoint-list > li {
On 2017/05/30 21:53:39, dgozman wrote:
> Copyright.

Done.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:14:
this._listElement = createElementWithClass('ol', 'breakpoint-list');
On 2017/05/30 21:53:39, dgozman wrote:
> ol -> div

Done.

https://codereview.chromium.org/2900843002/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:123:
this.contentElement.replaceChild(this._listElement, this._emptyElement);
On 2017/05/30 21:53:39, dgozman wrote:
> Toggle hidden class.

Done.

[dgozman, 2017-05-31 17:36:33]

The files are marked as modified, not removed. Could you please double-check?

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:126:
_removeListElement(element) {
JSDoc please.

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/eventListenerBreakpoints.css
(left):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/eventListenerBreakpoints.css:32:
background-color: rgb(255, 255, 194);
Why is this not needed anymore?

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/xhrBreakpointsSidebarPane.css
(right):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/xhrBreakpointsSidebarPane.css:24:
#breakpoint-condition-input {
Change this from id to class.

[luoe, 2017-05-31 18:22:37]

The files are marked as modified not removed because an earlier patch set exists
where those files were not deleted.  Based on a test, I think the only way to
get rietveld to see it as deleted is to make a new CL.

I did a test CL (https://codereview.chromium.org/2920513002) with the same
starting code as this CL's patch set 4.  After deleting all the files and
uploading another patch set to the test CL, the deleted files show 'M' instead
of 'D'.

Next, I did another test CL (https://codereview.chromium.org/2914793003/) with
the same steps, and then I deleted the first patch set.  Doing so didn't change
the second patch set's 'M's at all.

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js
(right):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/XHRBreakpointsSidebarPane.js:126:
_removeListElement(element) {
On 2017/05/31 17:36:33, dgozman wrote:
> JSDoc please.

Done, thanks.

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/eventListenerBreakpoints.css
(left):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/eventListenerBreakpoints.css:32:
background-color: rgb(255, 255, 194);
On 2017/05/31 17:36:33, dgozman wrote:
> Why is this not needed anymore?

breakpoint-hit-marker is the only element that actually needs the
background-color.  The breakpoint-hit element's bounding box (outlined in red in
the link) is always contained inside the marker: http://imgur.com/a/ixHyp

Since this actually falls outside of this CL's scope, I can undo this change.

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/xhrBreakpointsSidebarPane.css
(right):

https://codereview.chromium.org/2900843002/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/xhrBreakpointsSidebarPane.css:24:
#breakpoint-condition-input {
On 2017/05/31 17:36:33, dgozman wrote:
> Change this from id to class.

Done.

[dgozman, 2017-06-01 17:56:08]

Thank you for explanations! lgtm

[luoe, 2017-06-01 17:57:14]

The CQ bit was checked by luoe@chromium.org

[commit-bot: I haz the power, 2017-06-01 17:57:49]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-06-01 18:01:49]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2017-06-01 18:01:51]

Try jobs failed on following builders:
  android_compile_dbg on master.tryserver.chromium.android (JOB_FAILED,
https://build.chromium.org/p/tryserver.chromium.android/builders/android_comp...)
  android_cronet on master.tryserver.chromium.android (JOB_FAILED,
https://build.chromium.org/p/tryserver.chromium.android/builders/android_cron...)
  cast_shell_android on master.tryserver.chromium.android (JOB_FAILED,
https://build.chromium.org/p/tryserver.chromium.android/builders/cast_shell_a...)
  linux_android_rel_ng on master.tryserver.chromium.android (JOB_FAILED,
https://build.chromium.org/p/tryserver.chromium.android/builders/linux_androi...)
  chromium_presubmit on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)
  ios-simulator on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios-simulator/bui...)

[luoe, 2017-06-01 21:56:12]

The CQ bit was checked by luoe@chromium.org

[luoe, 2017-06-01 21:56:13]

The patchset sent to the CQ was uploaded after l-g-t-m from dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/2900843002/#ps90001
(title: "rebase again")

[commit-bot: I haz the power, 2017-06-01 21:57:08]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-06-01 22:00:56]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2017-06-01 22:00:58]

Try jobs failed on following builders:
  ios-simulator on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios-simulator/bui...)
  ios-simulator-xcode-clang on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios-simulator-xco...)
  mac_chromium_compile_dbg_ng on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_comp...)
  mac_chromium_rel_ng on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)

[luoe, 2017-06-02 00:44:10]

The CQ bit was checked by luoe@chromium.org

[luoe, 2017-06-02 00:44:10]

The patchset sent to the CQ was uploaded after l-g-t-m from dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/2900843002/#ps110001
(title: "rebase again")

[commit-bot: I haz the power, 2017-06-02 00:44:51]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-06-02 02:55:32]

CQ is committing da patch.

Bot data: {"patchset_id": 110001, "attempt_start_ts": 1496364250156390,
"parent_rev": "aedc4ed0310bbe11835f2af3d062f9f03030a5f2", "commit_rev":
"1a13ea2825f58403c809c835411257df77e3b175"}

[commit-bot: I haz the power, 2017-06-02 02:55:44]

Description was changed from

==========
DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

JavaScriptBreakpointsSidebarPane, DOMBreakpointsSidebarPane, and
XHRBreakpointsSidebarPane now have their own stylesheets, and all are
encapsulated with shadow DOM.

BUG=none
==========

to

==========
DevTools: remove BreakpointsSidebarPaneBase and breakpointsList.css

JavaScriptBreakpointsSidebarPane, DOMBreakpointsSidebarPane, and
XHRBreakpointsSidebarPane now have their own stylesheets, and all are
encapsulated with shadow DOM.

BUG=none

Review-Url: https://codereview.chromium.org/2900843002
Cr-Commit-Position: refs/heads/master@{#476535}
Committed:
https://chromium.googlesource.com/chromium/src/+/1a13ea2825f58403c809c8354112...
==========

[commit-bot: I haz the power, 2017-06-02 02:55:45]

Committed patchset #6 (id:110001) as
https://chromium.googlesource.com/chromium/src/+/1a13ea2825f58403c809c8354112...