WebKit Bugzilla
Attachment 362649 Details for
Bug 180791
: Web Inspector: Styles Redesign: clicking CSS property or selector should always select its text
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-180791-20190221143001.patch (text/plain), 6.65 KB, created by
Devin Rousso
on 2019-02-21 14:30:01 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2019-02-21 14:30:01 PST
Size:
6.65 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index fce7a3e86b94317037527189770742a439698881..be9450a6c43c9fc8c263ef4c74e08df3ff191f48 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,26 @@ >+2019-02-21 Devin Rousso <drousso@apple.com> >+ >+ Web Inspector: Styles Redesign: clicking CSS property or selector should always select its text >+ https://bugs.webkit.org/show_bug.cgi?id=180791 >+ <rdar://problem/36038366> >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * UserInterface/Views/SpreadsheetSelectorField.js: >+ (WI.SpreadsheetSelectorField): >+ (WI.SpreadsheetSelectorField.prototype.startEditing): >+ (WI.SpreadsheetSelectorField.prototype.stopEditing): >+ (WI.SpreadsheetSelectorField.prototype._handleMouseDown): Added. >+ (WI.SpreadsheetSelectorField.prototype._handleMouseUp): Added. >+ (WI.SpreadsheetSelectorField.prototype._handleFocus): Deleted. >+ >+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js: >+ (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout): >+ * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css: >+ (.spreadsheet-css-declaration .selector.editing:focus, .spreadsheet-css-declaration .selector > .matched): Added. >+ (.spreadsheet-css-declaration .selector.spreadsheet-selector-field): >+ (.spreadsheet-css-declaration .selector:focus, .spreadsheet-css-declaration .selector > .matched): Deleted. >+ > 2019-02-21 Devin Rousso <drousso@apple.com> > > Web Inspector: Canvas: recordings with a single frame sometimes missing TreeElement >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css >index 380964b2ed61de2a3557992b056c5b55b6482be6..da53758da4745bb22666b320dca39b8a443594fa 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css >@@ -103,7 +103,7 @@ > color: var(--text-color-secondary); > } > >-.spreadsheet-css-declaration .selector:focus, >+.spreadsheet-css-declaration .selector.editing:focus, > .spreadsheet-css-declaration .selector > .matched { > color: var(--text-color); > } >@@ -119,7 +119,7 @@ > } > > .spreadsheet-css-declaration .selector.spreadsheet-selector-field { >- outline-offset: -3px; >+ outline: none; > } > > .spreadsheet-css-declaration .selector.spreadsheet-selector-field.editing { >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >index e05f6b96879a9f2703e4eecee8b1266b9e915452..ed408ce21fdced7b23a58b9999502dc837d32c5c 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js >@@ -81,9 +81,14 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS > > if (this._style.selectorEditable) { > this._selectorTextField = new WI.SpreadsheetSelectorField(this, this._selectorElement); >+ this._selectorTextField.addEventListener(WI.SpreadsheetSelectorField.Event.StartedEditing, (event) => { >+ this._headerElement.classList.add("editing-selector"); >+ }); >+ this._selectorTextField.addEventListener(WI.SpreadsheetSelectorField.Event.StoppedEditing, (event) => { >+ this._headerElement.classList.remove("editing-selector"); >+ }); >+ > 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); >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js >index 24221bcd7189593ba5f6ce91c42e96112352c04e..f8ddb6140e878856780a8c4b5b218779fe1cb55d 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js >+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetSelectorField.js >@@ -23,19 +23,23 @@ > * THE POSSIBILITY OF SUCH DAMAGE. > */ > >-WI.SpreadsheetSelectorField = class SpreadsheetSelectorField >+WI.SpreadsheetSelectorField = class SpreadsheetSelectorField extends WI.Object > { > constructor(delegate, element) > { >+ super(); >+ > this._delegate = delegate; > this._element = element; > this._element.classList.add("spreadsheet-selector-field"); > >- this._element.addEventListener("focus", this._handleFocus.bind(this)); >+ this._element.addEventListener("mousedown", this._handleMouseDown.bind(this)); >+ this._element.addEventListener("mouseup", this._handleMouseUp.bind(this)); > this._element.addEventListener("blur", this._handleBlur.bind(this)); > this._element.addEventListener("keydown", this._handleKeyDown.bind(this)); > > this._editing = false; >+ this._handledMouseDown = false; > } > > // Public >@@ -59,6 +63,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField > element.textContent = element.textContent; > > this._selectText(); >+ >+ this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StartedEditing); > } > > stopEditing() >@@ -69,6 +75,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField > this._editing = false; > this._element.classList.remove("editing"); > this._element.contentEditable = false; >+ >+ this.dispatchEventToListeners(WI.SpreadsheetSelectorField.Event.StoppedEditing); > } > > // Private >@@ -78,8 +86,18 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField > window.getSelection().selectAllChildren(this._element); > } > >- _handleFocus(event) >+ _handleMouseDown(event) > { >+ this._handledMouseDown = true; >+ } >+ >+ _handleMouseUp(event) >+ { >+ if (!this._handledMouseDown) >+ return; >+ >+ this._handledMouseDown = false; >+ > this.startEditing(); > } > >@@ -130,3 +148,8 @@ WI.SpreadsheetSelectorField = class SpreadsheetSelectorField > } > } > }; >+ >+WI.SpreadsheetSelectorField.Event = { >+ StartedEditing: "spreadsheet-selector-field-started-editing", >+ StoppedEditing: "spreadsheet-selector-field-stopped-editing", >+};
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 180791
:
329304
| 362649