Changeset 196798 in webkit

Timestamp:

Feb 18, 2016 9:26:53 PM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Styles Sidebar focus jumps when trying to edit a color
​https://bugs.webkit.org/show_bug.cgi?id=154404
<rdar://problem/24725744>

Patch by Devin Rousso <Devin Rousso> on 2016-02-18
Reviewed by Timothy Hatcher.

Clicking an inline swatch in the CSS Rules sidebar causes any focused
editor, if any, to become blurred and therefore fire its handler function.
This causes an issue because when a CodeMirror instance in the styles
sidebar becomes blurred, it is possible for the entire Rules sidebar to
refresh and recreate all of the sections (r187714), meaning that it will
reselect whatever editor was previously selected before the refresh,
causing the swatch popup to be blurred and therefore dismiss.

• UserInterface/Views/CSSStyleDeclarationSection.js:

(WebInspector.CSSStyleDeclarationSection.prototype.cssStyleDeclarationTextEditorBlurActiveEditor):

• UserInterface/Views/CSSStyleDeclarationTextEditor.js:

(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchBeforeClicked):
Add listener for new event and call to delegate function for handling it.

• UserInterface/Views/InlineSwatch.js:

(WebInspector.InlineSwatch.prototype._swatchElementClicked):
Now fires an event before the clicked logic happens, but still after the
click event is fired on the element.

• UserInterface/Views/RulesStyleDetailsPanel.js:

(WebInspector.RulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionBlurActiveEditor):
Clears the previously focused editor so when a reset happens no editor
is refocused.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationSection.js (modified) (1 diff)
• UserInterface/Views/CSSStyleDeclarationTextEditor.js (modified) (2 diffs)
• UserInterface/Views/InlineSwatch.js (modified) (2 diffs)
• UserInterface/Views/RulesStyleDetailsPanel.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-02-18  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Styles Sidebar focus jumps when trying to edit a color
+        https://bugs.webkit.org/show_bug.cgi?id=154404
+        <rdar://problem/24725744>
+
+        Reviewed by Timothy Hatcher.
+
+        Clicking an inline swatch in the CSS Rules sidebar causes any focused
+        editor, if any, to become blurred and therefore fire its handler function.
+        This causes an issue because when a CodeMirror instance in the styles
+        sidebar becomes blurred, it is possible for the entire Rules sidebar to
+        refresh and recreate all of the sections (r187714), meaning that it will
+        reselect whatever editor was previously selected before the refresh,
+        causing the swatch popup to be blurred and therefore dismiss.
+
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection.prototype.cssStyleDeclarationTextEditorBlurActiveEditor):
+
+        * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchBeforeClicked):
+        Add listener for new event and call to delegate function for handling it.
+
+        * UserInterface/Views/InlineSwatch.js:
+        (WebInspector.InlineSwatch.prototype._swatchElementClicked):
+        Now fires an event before the clicked logic happens, but still after the
+        click event is fired on the element.
+
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.cssStyleDeclarationSectionBlurActiveEditor):
+        Clears the previously focused editor so when a reset happens no editor
+        is refocused.
+
 2016-02-18  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

@@ -325 +325 @@
     }
 
+    cssStyleDeclarationTextEditorBlurActiveEditor()
+    {
+        if (typeof this._delegate.cssStyleDeclarationSectionBlurActiveEditor === "function")
+            this._delegate.cssStyleDeclarationSectionBlurActiveEditor(this);
+    }
+
     cssStyleDeclarationTextEditorSwitchRule(reverse)
     {

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js

@@ -872 +872 @@
         function createSwatch(swatch, marker, valueObject, valueString)
         {
+            swatch.addEventListener(WebInspector.InlineSwatch.Event.BeforeClicked, this._inlineSwatchBeforeClicked, this);
             swatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._inlineSwatchValueChanged, this);
 
@@ -1303 +1304 @@
     }
 
+    _inlineSwatchBeforeClicked(event)
+    {
+        if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorBlurActiveEditor === "function")
+            this._delegate.cssStyleDeclarationTextEditorBlurActiveEditor();
+    }
+
     _inlineSwatchValueChanged(event)
     {

trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js

@@ -107 +107 @@
     _swatchElementClicked(event)
     {
+        this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.BeforeClicked);
+
         if (this._type === WebInspector.InlineSwatch.Type.Color && event.shiftKey && this._value) {
             let nextFormat = this._value.nextFormat();
@@ -265 +267 @@
 
 WebInspector.InlineSwatch.Event = {
+    BeforeClicked: "inline-swatch-before-clicked",
     ValueChanged: "inline-swatch-value-changed"
 };

trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

@@ -321 +321 @@
     }
 
+    cssStyleDeclarationSectionBlurActiveEditor()
+    {
+        this._previousFocusedSection = null;
+    }
+
     cssStyleDeclarationSectionEditorNextRule(currentSection)
     {