Changeset 204152 in webkit

Timestamp:

Aug 4, 2016, 4:46:07 PM (9 years ago)

Author:

Matt Baker

Message:

Web Inspector: UI polish for Edit Breakpoint dialog
​https://bugs.webkit.org/show_bug.cgi?id=160566
<rdar://problem/27706378>

Reviewed by Timothy Hatcher.

• UserInterface/Images/BreakpointActionAdd.svg: Removed.
• UserInterface/Images/BreakpointActionRemove.svg: Removed.

Use Plus13.svg and Minus.svg instead.

• UserInterface/Views/BreakpointActionView.css:

(.breakpoint-action-button-container):
(.breakpoint-action-append-button,):
(.breakpoint-action-append-button):
(.breakpoint-action-remove-button):
Button styles should match Xcode.
(.breakpoint-action-append-button:active,): Deleted.
Brightness on activation no longer needed.

• UserInterface/Views/BreakpointActionView.js:

(WebInspector.BreakpointActionView):
Add a button container so buttons can float together.

• UserInterface/Views/BreakpointPopoverController.css:

(.wide .edit-breakpoint-popover-condition > .CodeMirror):
Increase condition field width by the same amount as the popover.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Images/BreakpointActionAdd.svg (deleted)
• UserInterface/Images/BreakpointActionRemove.svg (deleted)
• UserInterface/Views/BreakpointActionView.css (modified) (1 diff)
• UserInterface/Views/BreakpointActionView.js (modified) (1 diff)
• UserInterface/Views/BreakpointPopoverController.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-08-04  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: UI polish for Edit Breakpoint dialog
+        https://bugs.webkit.org/show_bug.cgi?id=160566
+        <rdar://problem/27706378>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Images/BreakpointActionAdd.svg: Removed.
+        * UserInterface/Images/BreakpointActionRemove.svg: Removed.
+        Use Plus13.svg and Minus.svg instead.
+
+        * UserInterface/Views/BreakpointActionView.css:
+        (.breakpoint-action-button-container):
+        (.breakpoint-action-append-button,):
+        (.breakpoint-action-append-button):
+        (.breakpoint-action-remove-button):
+        Button styles should match Xcode.
+        (.breakpoint-action-append-button:active,): Deleted.
+        Brightness on activation no longer needed.
+
+        * UserInterface/Views/BreakpointActionView.js:
+        (WebInspector.BreakpointActionView):
+        Add a button container so buttons can float together.
+
+        * UserInterface/Views/BreakpointPopoverController.css:
+        (.wide .edit-breakpoint-popover-condition > .CodeMirror):
+        Increase condition field width by the same amount as the popover.
+
 2016-08-04  Matt Baker  <mattbaker@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css

@@ -28 +28 @@
 }
 
+.breakpoint-action-button-container {
+    float: right;
+}
+
 .breakpoint-action-append-button,
 .breakpoint-action-remove-button {
-    border: 1px solid hsl(0, 0%, 66%);
-    border-radius: 10px;
-    background-size: 16px 16px;
     background-origin: border-box;
-    width: 16px;
-    height: 16px;
-    float: right;
-    margin-left: 2px;
+    width: 13px;
+    height: 13px;
+    margin-left: 5px;
     margin-top: 2px;
-}
-
-.breakpoint-action-append-button:active,
-.breakpoint-action-remove-button:active {
-    filter: brightness(50%);
+    background-color: transparent;
+    border: none;
+    opacity: 0.6;
 }
 
 .breakpoint-action-append-button {
-    background-image: url(../Images/BreakpointActionAdd.svg), linear-gradient(to bottom, hsl(0, 0%, 98%), hsl(0, 0%, 78%));
+    background-image: url(../Images/Plus13.svg);
 }
 
 .breakpoint-action-remove-button {
-    background-image: url(../Images/BreakpointActionRemove.svg), linear-gradient(to bottom, hsl(0, 0%, 98%), hsl(0, 0%, 78%));
+    background-image: url(../Images/Minus.svg);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js

@@ -55 +55 @@
         }
 
-        var appendActionButton = header.appendChild(document.createElement("button"));
+        let buttonContainerElement = header.appendChild(document.createElement("div"));
+        buttonContainerElement.classList.add("breakpoint-action-button-container");
+
+        let appendActionButton = buttonContainerElement.appendChild(document.createElement("button"));
         appendActionButton.className = "breakpoint-action-append-button";
         appendActionButton.addEventListener("click", this._appendActionButtonClicked.bind(this));
         appendActionButton.title = WebInspector.UIString("Add new breakpoint action after this action");
 
-        var removeActionButton = header.appendChild(document.createElement("button"));
+        let removeActionButton = buttonContainerElement.appendChild(document.createElement("button"));
         removeActionButton.className = "breakpoint-action-remove-button";
         removeActionButton.addEventListener("click", this._removeAction.bind(this));

trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css

@@ -71 +71 @@
 }
 
+.wide .edit-breakpoint-popover-condition > .CodeMirror {
+    width: 360px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content width. */
+}
+
 #edit-breakpoint-popover-ignore {
     width: 40px;