Web Inspector: Event breakpoints: text field and completion popover fonts should...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Jan 2019 22:52:31 +0000 (22:52 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Jan 2019 22:52:31 +0000 (22:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=193249

Reviewed by Matt Baker.

* UserInterface/Views/EventBreakpointPopover.css:
(.popover .event-breakpoint-content > .event-type > input): Added.
(.popover .event-breakpoint-content > .event-type > input::placeholder): Added.
* UserInterface/Views/EventBreakpointPopover.js:
(WI.EventBreakpointPopover.prototype.show):
(WI.EventBreakpointPopover.prototype._showSuggestionsView):
Subtract the <input> border and padding from the bounds position so the <input> text lines
up with the `WI.CompletionSuggestionsView` text.

* UserInterface/Views/CompletionSuggestionsView.js:
(WI.CompletionSuggestionsView):
Drive-by: force `dir=ltr` to match the `text-align: left;` CSS styling.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@239953 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js
Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css
Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js

index 7ce5c16..339ec71 100644 (file)
@@ -1,3 +1,23 @@
+2019-01-14  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Event breakpoints: text field and completion popover fonts should match
+        https://bugs.webkit.org/show_bug.cgi?id=193249
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/EventBreakpointPopover.css:
+        (.popover .event-breakpoint-content > .event-type > input): Added.
+        (.popover .event-breakpoint-content > .event-type > input::placeholder): Added.
+        * UserInterface/Views/EventBreakpointPopover.js:
+        (WI.EventBreakpointPopover.prototype.show):
+        (WI.EventBreakpointPopover.prototype._showSuggestionsView):
+        Subtract the <input> border and padding from the bounds position so the <input> text lines
+        up with the `WI.CompletionSuggestionsView` text.
+
+        * UserInterface/Views/CompletionSuggestionsView.js:
+        (WI.CompletionSuggestionsView):
+        Drive-by: force `dir=ltr` to match the `text-align: left;` CSS styling.
+
 2019-01-14  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Styles: pressing Down key on empty value field shouldn't discard completion popover
index a6bb2de..d76fb18 100644 (file)
@@ -36,6 +36,7 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
         this._moveIntervalIdentifier = null;
 
         this._element = document.createElement("div");
+        this._element.setAttribute("dir", "ltr");
         this._element.classList.add("completion-suggestions", WI.Popover.IgnoreAutoDismissClassName);
 
         this._containerElement = document.createElement("div");
index 4a42ece..a5bc037 100644 (file)
     display: flex;
     margin-top: 4px;
 }
+
+.popover .event-breakpoint-content > .event-type > input {
+    font-family: Menlo, monospace;
+    text-align: left;
+}
+
+.popover .event-breakpoint-content > .event-type > input::placeholder {
+    font-family: system-ui;
+}
index c38ba0a..8a018c1 100644 (file)
@@ -82,6 +82,7 @@ WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.Popover
             this._typeSelectElement.hidden = true;
 
         this._domEventNameInputElement = typeContainer.appendChild(document.createElement("input"));
+        this._domEventNameInputElement.setAttribute("dir", "ltr");
         this._domEventNameInputElement.placeholder = WI.UIString("Example: \u201C%s\u201D").format("click");
         this._domEventNameInputElement.spellcheck = false;
         this._domEventNameInputElement.addEventListener("keydown", (event) => {
@@ -190,6 +191,12 @@ WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.Popover
 
      _showSuggestionsView()
      {
-        this._suggestionsView.show(WI.Rect.rectFromClientRect(this._domEventNameInputElement.getBoundingClientRect()));
+        let computedStyle = window.getComputedStyle(this._domEventNameInputElement);
+        let padding = parseInt(computedStyle.borderLeftWidth) + parseInt(computedStyle.paddingLeft);
+
+        let rect = WI.Rect.rectFromClientRect(this._domEventNameInputElement.getBoundingClientRect());
+        rect.origin.x += padding;
+        rect.size.width -= padding + parseInt(computedStyle.borderRightWidth) + parseInt(computedStyle.paddingRight);
+        this._suggestionsView.show(rect);
      }
 };