Web Inspector: UI polish for Edit Breakpoint dialog
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Aug 2016 23:46:07 +0000 (23:46 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Aug 2016 23:46:07 +0000 (23:46 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@204152 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg [deleted file]
Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg [deleted file]
Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js
Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css

index 2af3118..0f4ebd8 100644 (file)
@@ -1,5 +1,34 @@
 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>
+
         Web Inspector: Popover's arrow is misplaced
         https://bugs.webkit.org/show_bug.cgi?id=151236
         <rdar://problem/23527296>
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg b/Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg
deleted file mode 100644 (file)
index 14d19f6..0000000
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <path stroke="rgb(241, 242, 243)" stroke-width="2" d="M 4 9 L 12 9 M 8 5 L 8 13"/>
-    <path stroke="rgb(129, 129, 129)" stroke-width="2" d="M 4 8 L 12 8 M 8 4 L 8 12"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg b/Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg
deleted file mode 100644 (file)
index df921a4..0000000
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
-    <path stroke="rgb(241, 242, 243)" stroke-width="2" d="M 12 9 L 4 9"/>
-    <path stroke="rgb(129, 129, 129)" stroke-width="2" d="M 12 8 L 4 8"/>
-</svg>
index f9f75b1..7b7e099 100644 (file)
     margin-bottom: 3px;
 }
 
+.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);
 }
 
 .breakpoint-action-block-body {
index c2adb1d..fb0a1e0 100644 (file)
@@ -54,12 +54,15 @@ WebInspector.BreakpointActionView = class BreakpointActionView extends WebInspec
             picker.add(option);
         }
 
-        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));
         removeActionButton.title = WebInspector.UIString("Remove this breakpoint action");
index cfb25bf..25df67a 100644 (file)
     height: auto;
 }
 
+.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;
     margin-right: 4px;