[sources] Update remove watch expression icon to GM3.
Drive-by-fix: Also update size, color and cursor for the remove icon to
match what we use for the Breakpoints view.
Screenshot: https://imgur.com/PLXOhBZ.png
Bug: chromium:1427397
Change-Id: I03683aecae6e58afc5b0df3d59898b575b8402c0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4431860
Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
diff --git a/front_end/panels/sources/WatchExpressionsSidebarPane.ts b/front_end/panels/sources/WatchExpressionsSidebarPane.ts
index a667db2..447aa7c 100644
--- a/front_end/panels/sources/WatchExpressionsSidebarPane.ts
+++ b/front_end/panels/sources/WatchExpressionsSidebarPane.ts
@@ -460,7 +460,7 @@
private createWatchExpressionHeader(
expressionValue?: SDK.RemoteObject.RemoteObject, exceptionDetails?: Protocol.Runtime.ExceptionDetails): Element {
const headerElement = this.element.createChild('div', 'watch-expression-header');
- const deleteButton = UI.Icon.Icon.create('smallicon-cross', 'watch-expression-delete-button');
+ const deleteButton = UI.Icon.Icon.create('cross', 'watch-expression-delete-button');
this.resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
// 55 serves as a width threshold here (in px)
diff --git a/front_end/panels/sources/watchExpressionsSidebarPane.css b/front_end/panels/sources/watchExpressionsSidebarPane.css
index b9d0a0d..9e2471b 100644
--- a/front_end/panels/sources/watchExpressionsSidebarPane.css
+++ b/front_end/panels/sources/watchExpressionsSidebarPane.css
@@ -6,8 +6,13 @@
.watch-expression-delete-button {
position: absolute;
- top: 5px;
opacity: 0%;
+ background-color: var(--icon-default);
+ cursor: pointer;
+}
+
+.watch-expression-delete-button:hover {
+ background-color: var(--icon-default-hover);
}
:host-context(.-theme-with-dark-background) .watch-expression-delete-button {
