Attachment 356391 Details for Bug 192266 – Patch

[patch] Patch

patch.txt (text/plain), 10.47 KB, created by Nikita Vasilyev on 2018-12-03 12:10:44 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-12-03 12:10:44 PST

Size: 10.47 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 55e1def1224..ab0dffb3793 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,34 @@
>+2018-12-03  Nikita Vasilyev  <nvasilyev@apple.com>
>+
>+        Web Inspector: Styles: can't select properties of read-only rules
>+        https://bugs.webkit.org/show_bug.cgi?id=192266
>+
>+        Reviewed by Devin Rousso.
>+
>+        Implement multiple properties selection for read-only rules (such as User Agent Stylesheets)
>+        in the Styles panel.
>+
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.initialLayout):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
>+        Keep selection on layout.
>+
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingFirstProperty):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.startEditingLastProperty):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyBlur):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyMouseEnter):
>+        SpreadsheetCSSStyleDeclarationEditor is used by ComputedStyleDetailsPanel, which doesn't have:
>+          - spreadsheetCSSStyleDeclarationEditorPropertyBlur
>+          - spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter
>+
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyFocusMoved):
>+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._handleKeyDown):
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
>+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
>+        * UserInterface/Views/SpreadsheetStyleProperty.js:
>+        (WI.SpreadsheetStyleProperty.prototype.startEditingName):
>+        (WI.SpreadsheetStyleProperty.prototype.startEditingValue):
>+
> 2018-11-30  Nikita Vasilyev  <nvasilyev@apple.com>
> 
>         Web Inspector: Jumping from Computed to Styles should select property
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>index 6a14d9fda9c..2a223b7829f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
>@@ -56,7 +56,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>     initialLayout()
>     {
>-        if (!this._style || !this._style.editable)
>+        if (!this._style)
>             return;
> 
>         this.element.addEventListener("focus", () => { this.focused = true; }, true);
>@@ -101,7 +101,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         }
> 
>         if (propertyViewPendingStartEditing) {
>-            propertyViewPendingStartEditing.nameTextField.startEditing();
>+            propertyViewPendingStartEditing.startEditingName();
>             this._propertyPendingStartEditing = null;
>         }
> 
>@@ -110,6 +110,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>         if (!isNaN(this._pendingAddBlankPropertyIndexOffset))
>             this.addBlankProperty(this._propertyViews.length - 1 - this._pendingAddBlankPropertyIndexOffset);
>+        else if (this.hasSelectedProperties())
>+            this.selectProperties(this._anchorIndex, this._focusIndex);
>     }
> 
>     detached()
>@@ -247,7 +249,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>     {
>         let firstEditableProperty = this._editablePropertyAfter(-1);
>         if (firstEditableProperty)
>-            firstEditableProperty.nameTextField.startEditing();
>+            firstEditableProperty.startEditingName();
>         else {
>             const appendAfterLast = -1;
>             this.addBlankProperty(appendAfterLast);
>@@ -258,7 +260,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>     {
>         let lastEditableProperty = this._editablePropertyBefore(this._propertyViews.length);
>         if (lastEditableProperty)
>-            lastEditableProperty.valueTextField.startEditing();
>+            lastEditableProperty.startEditingValue();
>         else {
>             const appendAfterLast = -1;
>             this.addBlankProperty(appendAfterLast);
>@@ -389,12 +391,14 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>         if (this._suppressBlur)
>             return;
> 
>-        this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur(event, property);
>+        if (this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur)
>+            this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyBlur(event, property);
>     }
> 
>     spreadsheetStylePropertyMouseEnter(event, property)
>     {
>-        this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter(event, property);
>+        if (this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter)
>+            this._delegate.spreadsheetCSSStyleDeclarationEditorPropertyMouseEnter(event, property);
>     }
> 
>     spreadsheetStylePropertyFocusMoved(propertyView, {direction, willRemoveProperty})
>@@ -417,7 +421,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>             // Move from the value to the next enabled property's name.
>             let propertyView = this._editablePropertyAfter(movedFromIndex);
>             if (propertyView)
>-                propertyView.nameTextField.startEditing();
>+                propertyView.startEditingName();
>             else {
>                 if (willRemoveProperty) {
>                     const delta = 1;
>@@ -431,7 +435,7 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>             let propertyView = this._editablePropertyBefore(movedFromIndex);
>             if (propertyView) {
>                 // Move from the property's name to the previous enabled property's value.
>-                propertyView.valueTextField.startEditing();
>+                propertyView.startEditingValue();
>             } else {
>                 // Move from the first property's name to the rule's selector.
>                 if (this._style.selectorEditable)
>@@ -511,10 +515,13 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
> 
>             event.stop();
>         } else if (event.key === "Tab" || event.key === "Enter") {
>+            if (!this.style.editable)
>+                return;
>+
>             let property = this._propertyViews[this._focusIndex];
>             if (property && property.enabled) {
>                 event.stop();
>-                property.nameTextField.startEditing();
>+                property.startEditingName();
>             }
>         } else if (event.key === "Backspace") {
>             let [startIndex, endIndex] = this.selectionRange;
>@@ -536,6 +543,9 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
>             event.stop();
> 
>         } else if ((event.code === "Space" && !event.shiftKey && !event.metaKey && !event.ctrlKey) || (event.key === "/" && event.commandOrControlKey && !event.shiftKey)) {
>+            if (!this.style.editable)
>+                return;
>+
>             let [startIndex, endIndex] = this.selectionRange;
> 
>             // Toggle the first selected property and set this state to all selected properties.
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>index 18c311139b1..d4f7dbc4eef 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
>@@ -102,9 +102,10 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
>         else if (!this._style.ownerRule)
>             this._element.classList.add("selector-locked");
> 
>+        this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
>+
>         if (this._style.editable) {
>             this.element.addEventListener("click", this._handleClick.bind(this));
>-            this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
> 
>             new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
>             new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl | WI.KeyboardShortcut.Modifier.Shift, "S", this._save.bind(this), this._element);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>index 99b6b2b1e0a..ef68b658e9f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>@@ -50,15 +50,17 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this.updateStatus, this);
>         property.addEventListener(WI.CSSProperty.Event.Changed, this.updateStatus, this);
> 
>-        if (this._isEditable()) {
>+        if (!this._readOnly) {
>             this._element.tabIndex = -1;
> 
>             this._element.addEventListener("blur", (event) => {
>-                this._delegate.spreadsheetStylePropertyBlur(event, this);
>+                if (this._delegate.spreadsheetStylePropertyBlur)
>+                    this._delegate.spreadsheetStylePropertyBlur(event, this);
>             });
> 
>             this._element.addEventListener("mouseenter", (event) => {
>-                this._delegate.spreadsheetStylePropertyMouseEnter(event, this);
>+                if (this._delegate.spreadsheetStylePropertyMouseEnter)
>+                    this._delegate.spreadsheetStylePropertyMouseEnter(event, this);
>             });
> 
>             this._element.copyHandler = this;
>@@ -92,6 +94,22 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>         this.updateStatus();
>     }
> 
>+    startEditingName()
>+    {
>+        if (!this._nameTextField)
>+            return;
>+
>+        this._nameTextField.startEditing();
>+    }
>+
>+    startEditingValue()
>+    {
>+        if (!this._valueTextField)
>+            return;
>+
>+        this._valueTextField.startEditing();
>+    }
>+
>     detached()
>     {
>         if (this._nameTextField)

Actions: View | Formatted Diff | Diff

Attachments on bug 192266: 356262 | 356263 | 356269 | 356305 | 356391