DevTools: migrate WatchExpressionsSidebarPane to shadow
BUG=726972
Review-Url: https://codereview.chromium.org/2902543002
Cr-Commit-Position: refs/heads/master@{#475636}
diff --git a/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/error-in-watch-expressions.html b/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/error-in-watch-expressions.html
index af2ae8b9..aff2084 100644
--- a/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/error-in-watch-expressions.html
+++ b/third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/error-in-watch-expressions.html
@@ -18,7 +18,7 @@
function step1()
{
- InspectorTest.addResult(watchExpressionsPane.element.textContent.indexOf("<not available>") !== -1 ? "SUCCESS" : "FAILED");
+ InspectorTest.addResult(watchExpressionsPane.contentElement.textContent.indexOf("<not available>") !== -1 ? "SUCCESS" : "FAILED");
// Clear watch expressions after execution.
watchExpressionsPane._deleteAllButtonClicked();
diff --git a/third_party/WebKit/Source/devtools/BUILD.gn b/third_party/WebKit/Source/devtools/BUILD.gn
index d883a11..98f59d6 100644
--- a/third_party/WebKit/Source/devtools/BUILD.gn
+++ b/third_party/WebKit/Source/devtools/BUILD.gn
@@ -585,6 +585,7 @@
"front_end/sources/TabbedEditorContainer.js",
"front_end/sources/threadsSidebarPane.css",
"front_end/sources/ThreadsSidebarPane.js",
+ "front_end/sources/watchExpressionsSidebarPane.css",
"front_end/sources/WatchExpressionsSidebarPane.js",
"front_end/sources/WorkspaceMappingTip.js",
"front_end/sources/XHRBreakpointsSidebarPane.js",
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
index 7685f59..b4f74a8 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/sources/WatchExpressionsSidebarPane.js
@@ -35,8 +35,9 @@
*/
Sources.WatchExpressionsSidebarPane = class extends UI.ThrottledWidget {
constructor() {
- super();
+ super(true);
this.registerRequiredCSS('object_ui/objectValue.css');
+ this.registerRequiredCSS('sources/watchExpressionsSidebarPane.css');
/** @type {!Array.<!Sources.WatchExpression>} */
this._watchExpressions = [];
@@ -47,8 +48,8 @@
this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this.update, this);
- this._bodyElement = this.element.createChild('div', 'vbox watch-expressions');
- this._bodyElement.addEventListener('contextmenu', this._contextMenu.bind(this), false);
+ this.contentElement.classList.add('watch-expressions');
+ this.contentElement.addEventListener('contextmenu', this._contextMenu.bind(this), false);
this._expandController = new ObjectUI.ObjectPropertiesSectionExpandController();
UI.context.addFlavorChangeListener(SDK.ExecutionContext, this.update, this);
@@ -93,9 +94,9 @@
*/
doUpdate() {
this._linkifier.reset();
- this._bodyElement.removeChildren();
+ this.contentElement.removeChildren();
this._watchExpressions = [];
- this._emptyElement = this._bodyElement.createChild('div', 'gray-info-message');
+ this._emptyElement = this.contentElement.createChild('div', 'gray-info-message');
this._emptyElement.textContent = Common.UIString('No Watch Expressions');
var watchExpressionStrings = this._watchExpressionsSetting.get();
for (var i = 0; i < watchExpressionStrings.length; ++i) {
@@ -117,7 +118,7 @@
var watchExpression = new Sources.WatchExpression(expression, this._expandController, this._linkifier);
watchExpression.addEventListener(
Sources.WatchExpression.Events.ExpressionUpdated, this._watchExpressionUpdated, this);
- this._bodyElement.appendChild(watchExpression.element());
+ this.contentElement.appendChild(watchExpression.element());
this._watchExpressions.push(watchExpression);
return watchExpression;
}
@@ -129,7 +130,7 @@
var watchExpression = /** @type {!Sources.WatchExpression} */ (event.data);
if (!watchExpression.expression()) {
this._watchExpressions.remove(watchExpression);
- this._bodyElement.removeChild(watchExpression.element());
+ this.contentElement.removeChild(watchExpression.element());
this._emptyElement.classList.toggle('hidden', !!this._watchExpressions.length);
}
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/module.json b/third_party/WebKit/Source/devtools/front_end/sources/module.json
index 1242c5e..3dfa1de 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/module.json
+++ b/third_party/WebKit/Source/devtools/front_end/sources/module.json
@@ -670,6 +670,7 @@
"sourcesSearch.css",
"sourcesView.css",
"threadsSidebarPane.css",
+ "watchExpressionsSidebarPane.css",
"dialog.css"
]
}
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css b/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css
index cc1be1f..790456602 100644
--- a/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css
+++ b/third_party/WebKit/Source/devtools/front_end/sources/sourcesPanel.css
@@ -68,107 +68,6 @@
cursor: auto;
}
-.watch-expression-delete-button {
- width: 10px;
- height: 10px;
- background-image: url(Images/deleteIcon.png);
- background-position: 0 0;
- background-color: transparent;
- background-repeat: no-repeat;
- border: 0 none transparent;
- position: absolute;
- top: 4px;
- right: 3px;
- display: none;
-}
-
-.watch-expression-header:hover .watch-expression-delete-button {
- display: inline;
-}
-
-.watch-expressions {
- overflow-x: hidden;
- min-height: 26px;
-}
-
-.watch-expressions .dimmed {
- opacity: 0.6;
-}
-
-.watch-expression-title {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 16px;
- margin-left: 11px;
-}
-
-.watch-expression-object-header .watch-expression-title {
- margin-left: 1px;
-}
-
-.watch-expression {
- position: relative;
- padding: 1px 0px 1px 6px;
- flex: none;
- min-height: 20px;
-}
-
-.watch-expressions .name {
- color: rgb(136, 19, 145);
- flex: none;
- white-space: nowrap;
- text-overflow: ellipsis ;
- overflow: hidden;
-}
-
-.watch-expression-error {
- color: red;
-}
-
-.-theme-with-dark-background .watch-expression-error {
- color: hsl(0, 100%, 65%);
-}
-
-.watch-expressions-separator {
- flex: none;
-}
-
-.watch-expressions .value {
- white-space: nowrap;
- display: inline;
-}
-
-.watch-expression .text-prompt {
- text-overflow: clip;
- overflow: hidden;
- white-space: nowrap;
- padding-left: 4px;
- -webkit-user-select: text;
-}
-
-.watch-expression-text-prompt-proxy {
- margin-left: 12px;
-}
-
-.watch-expression-header {
- flex: auto;
-}
-
-.watch-expression-object-header {
- margin-left: -12px;
- padding-left: 12px;
-}
-
-.watch-expression-header:hover {
- background-color: #F0F0F0;
- padding-right: 14px;
-}
-
-.sidebar-pane-stack .watch-expressions {
- margin-top: 0px;
-}
-
.event-listeners-sidebar-pane .toolbar {
border-bottom: 1px solid #eee;
}
diff --git a/third_party/WebKit/Source/devtools/front_end/sources/watchExpressionsSidebarPane.css b/third_party/WebKit/Source/devtools/front_end/sources/watchExpressionsSidebarPane.css
new file mode 100644
index 0000000..c9431eb0
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/sources/watchExpressionsSidebarPane.css
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.watch-expression-delete-button {
+ width: 10px;
+ height: 10px;
+ background-image: url(Images/deleteIcon.png);
+ background-position: 0 0;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: 0 none transparent;
+ position: absolute;
+ top: 4px;
+ right: 3px;
+ display: none;
+}
+
+.watch-expression-header:hover .watch-expression-delete-button {
+ display: inline;
+}
+
+.watch-expressions {
+ overflow-x: hidden;
+ min-height: 26px;
+}
+
+.watch-expressions .dimmed {
+ opacity: 0.6;
+}
+
+.watch-expression-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 16px;
+ margin-left: 11px;
+}
+
+.watch-expression-object-header .watch-expression-title {
+ margin-left: 1px;
+}
+
+.watch-expression {
+ position: relative;
+ padding: 1px 0px 1px 6px;
+ flex: none;
+ min-height: 20px;
+}
+
+.watch-expressions .name {
+ color: rgb(136, 19, 145);
+ flex: none;
+ white-space: nowrap;
+ text-overflow: ellipsis ;
+ overflow: hidden;
+}
+
+.watch-expression-error {
+ color: red;
+}
+
+:host-context(.-theme-with-dark-background) .watch-expression-error {
+ color: hsl(0, 100%, 65%);
+}
+
+.watch-expressions-separator {
+ flex: none;
+}
+
+.watch-expressions .value {
+ white-space: nowrap;
+ display: inline;
+}
+
+.watch-expression .text-prompt {
+ text-overflow: clip;
+ overflow: hidden;
+ white-space: nowrap;
+ padding-left: 4px;
+ -webkit-user-select: text;
+}
+
+.watch-expression-text-prompt-proxy {
+ margin-left: 12px;
+}
+
+.watch-expression-header {
+ flex: auto;
+}
+
+.watch-expression-object-header {
+ margin-left: -12px;
+ padding-left: 12px;
+}
+
+.watch-expression-header:hover {
+ background-color: #F0F0F0;
+ padding-right: 14px;
+}
