Web Inspector: Fixed colorpicker editing and scrolling.

https://bugs.webkit.org/show_bug.cgi?id=109434.

Patch by Vladislav Kaznacheev <kaznacheev@chromium.org> on 2013-02-13
Reviewed by Alexander Pavlov.

The color picker scrolling logic relied on the fixed DOM structure which changed with the introduction of
SidebarPaneStack (https://bugs.webkit.org/show_bug.cgi?id=108183).
Added a special CSS class to mark the scroll target.

No new tests.

* inspector/front-end/SplitView.js:
(WebInspector.SplitView):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
* inspector/front-end/TabbedPane.js:
(WebInspector.TabbedPane):

Canonical link: https://commits.webkit.org/127965@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@142745 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog

@@ -1,3 +1,23 @@
+2013-02-13  Vladislav Kaznacheev  <kaznacheev@chromium.org>
+
+        Web Inspector: Fixed colorpicker editing and scrolling.
+        https://bugs.webkit.org/show_bug.cgi?id=109434.
+
+        Reviewed by Alexander Pavlov.
+
+        The color picker scrolling logic relied on the fixed DOM structure which changed with the introduction of
+        SidebarPaneStack (https://bugs.webkit.org/show_bug.cgi?id=108183).
+        Added a special CSS class to mark the scroll target.
+
+        No new tests.
+
+        * inspector/front-end/SplitView.js:
+        (WebInspector.SplitView):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
+        * inspector/front-end/TabbedPane.js:
+        (WebInspector.TabbedPane):
+
 2013-02-13  Andrey Lushnikov  <lushnikov@chromium.org>
 
         Web Inspector: fix js compilation warnings in TextPrompt

Source/WebCore/inspector/front-end/SplitView.js

@@ -42,11 +42,8 @@ WebInspector.SplitView = function(isVertical, sidebarSizeSettingName, defaultSid
 
     this.element.className = "split-view";
 
-    this._firstElement = this.element.createChild("div", "split-view-contents");
-    this._firstElement.addStyleClass("split-view-contents-first");
-
-    this._secondElement = this.element.createChild("div", "split-view-contents");
-    this._secondElement.addStyleClass("split-view-contents-second");
+    this._firstElement = this.element.createChild("div", "split-view-contents scroll-target split-view-contents-first");
+    this._secondElement = this.element.createChild("div", "split-view-contents scroll-target split-view-contents-second");
 
     this._resizerElement = this.element.createChild("div", "split-view-resizer");
     this.installResizer(this._resizerElement);

Source/WebCore/inspector/front-end/StylesSidebarPane.js

@@ -1771,7 +1771,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 colorSwatch.setColorString(text);
                 colorSwatch.element.addEventListener("click", swatchClick, false);
 
-                var scrollerElement = hasSpectrum ? self._parentPane._computedStylePane.element.parentElement : null;
+                var scrollerElement;
 
                 function spectrumChanged(e)
                 {
@@ -1785,7 +1785,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
                 function spectrumHidden(event)
                 {
-                    scrollerElement.removeEventListener("scroll", repositionSpectrum, false);
+                    if (scrollerElement)
+                        scrollerElement.removeEventListener("scroll", repositionSpectrum, false);
                     var commitEdit = event.data;
                     var propertyText = !commitEdit && self.originalPropertyText ? self.originalPropertyText : (nameElement.textContent + ": " + valueElement.textContent);
                     self.applyStyleText(propertyText, true, true, false);
@@ -1817,7 +1818,11 @@ WebInspector.StylePropertyTreeElement.prototype = {
                             spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
                             spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
 
-                            scrollerElement.addEventListener("scroll", repositionSpectrum, false);
+                            scrollerElement = colorSwatch.element.enclosingNodeOrSelfWithClass("scroll-target");
+                            if (scrollerElement)
+                                scrollerElement.addEventListener("scroll", repositionSpectrum, false);
+                            else
+                                console.error("Unable to handle color picker scrolling");
                         }
                     }
                     e.consume(true);

Source/WebCore/inspector/front-end/TabbedPane.js

@@ -40,7 +40,7 @@ WebInspector.TabbedPane = function()
     this._headerElement = this.element.createChild("div", "tabbed-pane-header");
     this._headerContentsElement = this._headerElement.createChild("div", "tabbed-pane-header-contents");
     this._tabsElement = this._headerContentsElement.createChild("div", "tabbed-pane-header-tabs");
-    this._contentElement = this.element.createChild("div", "tabbed-pane-content");
+    this._contentElement = this.element.createChild("div", "tabbed-pane-content scroll-target");
     this._tabs = [];
     this._tabsHistory = [];
     this._tabsById = {};