DevTools: remove old minus icon in watches

- Avoid showing scrollbar when creating new watch
- Fix object watch alignment
- Replace "minus" icon with "cross"

Screenshot: https://imgur.com/a/pdrKIey

Bug: 910683
Change-Id: I554f08295a4c92c954167f5e09f55f104d285bfb
Reviewed-on: https://chromium-review.googlesource.com/c/1357602Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#613310}

third_party/blink/renderer/devtools/BUILD.gn

@@ -939,7 +939,6 @@ devtools_image_files = [
   "front_end/Images/chromeRight.png",
   "front_end/Images/chromeSelect.png",
   "front_end/Images/chromeSelect_2x.png",
-  "front_end/Images/deleteIcon.png",
   "front_end/Images/errorWave.png",
   "front_end/Images/errorWave_2x.png",
   "front_end/Images/ic_info_black_18dp.svg",

third_party/blink/renderer/devtools/front_end/sources/WatchExpressionsSidebarPane.js

@@ -365,9 +365,10 @@ Sources.WatchExpression = class extends Common.Object {
     this._result = result || null;
 
     const headerElement = createElementWithClass('div', 'watch-expression-header');
-    const deleteButton = headerElement.createChild('button', 'watch-expression-delete-button');
-    deleteButton.title = Common.UIString('Delete watch expression');
+    const deleteButton = UI.Icon.create('smallicon-cross', 'watch-expression-delete-button');
+    deleteButton.title = ls`Delete watch expression`;
     deleteButton.addEventListener('click', this._deleteWatchExpression.bind(this), false);
+    headerElement.appendChild(deleteButton);
 
     const titleElement = headerElement.createChild('div', 'watch-expression-title');
     this._nameElement = ObjectUI.ObjectPropertiesSection.createNameElement(this._expression);
@@ -389,6 +390,7 @@ Sources.WatchExpression = class extends Common.Object {
       headerElement.classList.add('watch-expression-object-header');
       this._objectPropertiesSection = new ObjectUI.ObjectPropertiesSection(result, headerElement, this._linkifier);
       this._objectPresentationElement = this._objectPropertiesSection.element;
+      this._objectPresentationElement.classList.add('watch-expression-object');
       this._expandController.watchSection(/** @type {string} */ (this._expression), this._objectPropertiesSection);
       const objectTreeElement = this._objectPropertiesSection.objectTreeElement();
       objectTreeElement.toggleOnClick = false;

third_party/blink/renderer/devtools/front_end/sources/watchExpressionsSidebarPane.css

@@ -5,21 +5,20 @@
  */
 
 .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;
+    top: 5px;
+    right: 6px;
+    cursor: pointer;
+    opacity: 0;
+    min-width: 20px;
 }
 
 .watch-expression-header:hover .watch-expression-delete-button {
-    display: inline;
+    opacity: 0.5;
+}
+
+.watch-expression-header:hover .watch-expression-delete-button:hover {
+    opacity: 1;
 }
 
 .watch-expressions {
@@ -36,7 +35,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     line-height: 20px;
-    margin-left: 11px;
+    margin-left: 16px;
 }
 
 .watch-expression-object-header .watch-expression-title {
@@ -86,19 +85,23 @@
 
 .watch-expression-text-prompt-proxy {
     margin: 2px 12px;
+    padding-bottom: 3px;
 }
 
 .watch-expression-header {
     flex: auto;
-    padding: 0 6px;
 }
 
 .watch-expression-object-header {
-    margin-left: -12px;
-    padding-left: 12px;
+    margin-left: -16px;
+    padding-left: 15px;
 }
 
 .watch-expression-header:hover {
     background-color: #F0F0F0;
-    padding-right: 14px;
+    padding-right: 28px;
+}
+
+.watch-expression-object {
+    padding-left: 5px;
 }