- Revision
- 204152
- Author
- mattba...@apple.com
- Date
- 2016-08-04 16:46:07 -0700 (Thu, 04 Aug 2016)
Log 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.
Modified Paths
Removed Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (204151 => 204152)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-08-04 23:46:07 UTC (rev 204152)
@@ -1,5 +1,34 @@
2016-08-04 Matt Baker <mattba...@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 <mattba...@apple.com>
+
Web Inspector: Popover's arrow is misplaced
https://bugs.webkit.org/show_bug.cgi?id=151236
<rdar://problem/23527296>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg (204151 => 204152)
--- trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionAdd.svg 2016-08-04 23:46:07 UTC (rev 204152)
@@ -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>
Deleted: trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg (204151 => 204152)
--- trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/BreakpointActionRemove.svg 2016-08-04 23:46:07 UTC (rev 204152)
@@ -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>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css (204151 => 204152)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2016-08-04 23:46:07 UTC (rev 204152)
@@ -27,30 +27,28 @@
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;
+ background-color: transparent;
+ border: none;
+ opacity: 0.6;
}
-.breakpoint-action-append-button:active,
-.breakpoint-action-remove-button:active {
- filter: brightness(50%);
-}
-
.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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js (204151 => 204152)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js 2016-08-04 23:46:07 UTC (rev 204152)
@@ -54,12 +54,15 @@
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");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css (204151 => 204152)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2016-08-04 23:24:14 UTC (rev 204151)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css 2016-08-04 23:46:07 UTC (rev 204152)
@@ -70,6 +70,10 @@
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;
