Web Inspector: Styles Redesign: make selector field inline-block when editing
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 19:59:49 +0000 (19:59 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 19:59:49 +0000 (19:59 +0000)
https://bugs.webkit.org/show_bug.cgi?id=179588
<rdar://problem/35490915>

Reviewed by Brian Burg.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration .header.editing-selector .origin):
When the selector field is multiline, it covers the source link entirely.
When the selector field takes only one line, the source link remains where it was before editing.

(.spreadsheet-css-declaration .selector):
Make it `position: relative` to cover the source link.

(.spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js

index 643ad9c..7d2b594 100644 (file)
@@ -1,3 +1,23 @@
+2017-11-13  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: make selector field inline-block when editing
+        https://bugs.webkit.org/show_bug.cgi?id=179588
+        <rdar://problem/35490915>
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration .header.editing-selector .origin):
+        When the selector field is multiline, it covers the source link entirely.
+        When the selector field takes only one line, the source link remains where it was before editing.
+
+        (.spreadsheet-css-declaration .selector):
+        Make it `position: relative` to cover the source link.
+
+        (.spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+
 2017-11-13  Joseph Pecoraro  <pecoraro@apple.com>
 
         REGRESSION(r223856): Web Inspector: Cannot view Request Data
index db50251..e1b2f68 100644 (file)
     padding: 0 var(--css-declaration-side-padding);
 }
 
+.spreadsheet-css-declaration .header.editing-selector .origin {
+    position: absolute;
+    right: var(--css-declaration-side-padding);
+}
+
 .spreadsheet-css-declaration .media-label {
     color: black;
 }
     float: right;
 }
 
+.spreadsheet-css-declaration .selector {
+    position: relative;
+}
+
 .spreadsheet-css-declaration .selector.style-attribute {
     font: 12px sans-serif;
     color: hsl(0, 0%, 30%);
 }
 
 .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing {
+    display: inline-block;
     box-shadow: hsla(0, 0%, 0%, 0.5) 0 1px 3px;
     outline: none !important;
 }
index dc3bf35..cc2e607 100644 (file)
@@ -76,6 +76,8 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         if (this._style.selectorEditable) {
             this._selectorTextField = new WI.SpreadsheetSelectorField(this, this._selectorElement);
             this._selectorElement.tabIndex = 0;
+            this._selectorElement.addEventListener("focus", () => this._headerElement.classList.add("editing-selector"));
+            this._selectorElement.addEventListener("blur", () => this._headerElement.classList.remove("editing-selector"));
         }
 
         this._propertiesEditor = new WI.SpreadsheetCSSStyleDeclarationEditor(this, this._style);