Title: [224768] trunk/Source/WebInspectorUI
- Revision
- 224768
- Author
- nvasil...@apple.com
- Date
- 2017-11-13 11:59:49 -0800 (Mon, 13 Nov 2017)
Log Message
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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (224767 => 224768)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-11-13 19:58:09 UTC (rev 224767)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-11-13 19:59:49 UTC (rev 224768)
@@ -1,3 +1,23 @@
+2017-11-13 Nikita Vasilyev <nvasil...@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 <pecor...@apple.com>
REGRESSION(r223856): Web Inspector: Cannot view Request Data
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (224767 => 224768)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-11-13 19:58:09 UTC (rev 224767)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css 2017-11-13 19:59:49 UTC (rev 224768)
@@ -39,6 +39,11 @@
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;
}
@@ -75,6 +80,10 @@
float: right;
}
+.spreadsheet-css-declaration .selector {
+ position: relative;
+}
+
.spreadsheet-css-declaration .selector.style-attribute {
font: 12px sans-serif;
color: hsl(0, 0%, 30%);
@@ -105,6 +114,7 @@
}
.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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js (224767 => 224768)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-11-13 19:58:09 UTC (rev 224767)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js 2017-11-13 19:59:49 UTC (rev 224768)
@@ -76,6 +76,8 @@
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);
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
