Web Inspector: make Spectrum and Popover WebInspector.Views in order to enable reuse
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Nov 2012 12:00:48 +0000 (12:00 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Nov 2012 12:00:48 +0000 (12:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=101200

Reviewed by Yury Semikhatsky.

- Split Spectrum and SpectrumPopoverHelper (first is a component, second is controller)
- Made Popover a root view in order to enable lazy style loading for potential subviews (such as Spectrum)
- Extracted spectrum's css into a separate file

* WebCore.gypi:
* WebCore.vcproj/WebCore.vcproj:
* inspector/front-end/DOMExtension.js:
(Element.prototype.positionAt):
(Size):
(Element.prototype.measurePreferredSize):
* inspector/front-end/HeapSnapshotView.js:
(WebInspector.HeapSnapshotView.prototype.willHide):
(WebInspector.HeapSnapshotView.prototype._helpClicked):
* inspector/front-end/Popover.js:
(WebInspector.Popover):
(WebInspector.Popover.prototype.show):
(WebInspector.Popover.prototype.showView):
(WebInspector.Popover.prototype._innerShow):
(WebInspector.Popover.prototype.hide):
(WebInspector.Popover.prototype.dispose):
(WebInspector.Popover.prototype._positionElement):
* inspector/front-end/Spectrum.js:
(WebInspector.Spectrum.alphaDrag):
(WebInspector.Spectrum):
(WebInspector.Spectrum.prototype.wasShown):
(WebInspector.SpectrumPopupHelper):
(WebInspector.SpectrumPopupHelper.prototype.spectrum):
(WebInspector.SpectrumPopupHelper.prototype.toggle):
(WebInspector.SpectrumPopupHelper.prototype.show):
(WebInspector.SpectrumPopupHelper.prototype.reposition):
(WebInspector.SpectrumPopupHelper.prototype.hide):
(WebInspector.ColorSwatch):
(WebInspector.ColorSwatch.prototype.setColorString):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane):
(WebInspector.StylesSidebarPane.prototype.update):
(WebInspector.StylesSidebarPane.prototype.willHide):
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
* inspector/front-end/View.js:
(WebInspector.View.prototype.measurePreferredSize):
* inspector/front-end/WebKit.qrc:
* inspector/front-end/elementsPanel.css:
(.image-preview-container img):
* inspector/front-end/inspector.css:
(.swatch):
(.swatch-inner):
(.swatch-inner:hover):
* inspector/front-end/spectrum.css: Added.
(.spectrum-container):
(.spectrum-top):
(.spectrum-color):
(.spectrum-display-value):
(.spectrum-hue):
(.spectrum-fill):
(.spectrum-range-container):
(.spectrum-range-container *):
(.spectrum-range-container label):
(.spectrum-range-container input):
(.spectrum-dragger, .spectrum-slider):
(.spectrum-sat):
(.spectrum-val):
(.spectrum-dragger):
(.spectrum-slider):
(.spectrum-container .swatch):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@133582 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
Source/WebCore/ChangeLog
Source/WebCore/WebCore.gypi
Source/WebCore/WebCore.vcproj/WebCore.vcproj
Source/WebCore/inspector/front-end/DOMExtension.js
Source/WebCore/inspector/front-end/HeapSnapshotView.js
Source/WebCore/inspector/front-end/Popover.js
Source/WebCore/inspector/front-end/Spectrum.js
Source/WebCore/inspector/front-end/StylesSidebarPane.js
Source/WebCore/inspector/front-end/View.js
Source/WebCore/inspector/front-end/WebKit.qrc
Source/WebCore/inspector/front-end/elementsPanel.css
Source/WebCore/inspector/front-end/inspector.css
Source/WebCore/inspector/front-end/spectrum.css [new file with mode: 0644]

index 8a267c2..a0ce5d8 100644 (file)
@@ -1,3 +1,75 @@
+2012-11-05  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: make Spectrum and Popover WebInspector.Views in order to enable reuse
+        https://bugs.webkit.org/show_bug.cgi?id=101200
+
+        Reviewed by Yury Semikhatsky.
+
+        - Split Spectrum and SpectrumPopoverHelper (first is a component, second is controller)
+        - Made Popover a root view in order to enable lazy style loading for potential subviews (such as Spectrum)
+        - Extracted spectrum's css into a separate file
+
+        * WebCore.gypi:
+        * WebCore.vcproj/WebCore.vcproj:
+        * inspector/front-end/DOMExtension.js:
+        (Element.prototype.positionAt):
+        (Size):
+        (Element.prototype.measurePreferredSize):
+        * inspector/front-end/HeapSnapshotView.js:
+        (WebInspector.HeapSnapshotView.prototype.willHide):
+        (WebInspector.HeapSnapshotView.prototype._helpClicked):
+        * inspector/front-end/Popover.js:
+        (WebInspector.Popover):
+        (WebInspector.Popover.prototype.show):
+        (WebInspector.Popover.prototype.showView):
+        (WebInspector.Popover.prototype._innerShow):
+        (WebInspector.Popover.prototype.hide):
+        (WebInspector.Popover.prototype.dispose):
+        (WebInspector.Popover.prototype._positionElement):
+        * inspector/front-end/Spectrum.js:
+        (WebInspector.Spectrum.alphaDrag):
+        (WebInspector.Spectrum):
+        (WebInspector.Spectrum.prototype.wasShown):
+        (WebInspector.SpectrumPopupHelper):
+        (WebInspector.SpectrumPopupHelper.prototype.spectrum):
+        (WebInspector.SpectrumPopupHelper.prototype.toggle):
+        (WebInspector.SpectrumPopupHelper.prototype.show):
+        (WebInspector.SpectrumPopupHelper.prototype.reposition):
+        (WebInspector.SpectrumPopupHelper.prototype.hide):
+        (WebInspector.ColorSwatch):
+        (WebInspector.ColorSwatch.prototype.setColorString):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane):
+        (WebInspector.StylesSidebarPane.prototype.update):
+        (WebInspector.StylesSidebarPane.prototype.willHide):
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
+        * inspector/front-end/View.js:
+        (WebInspector.View.prototype.measurePreferredSize):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/elementsPanel.css:
+        (.image-preview-container img):
+        * inspector/front-end/inspector.css:
+        (.swatch):
+        (.swatch-inner):
+        (.swatch-inner:hover):
+        * inspector/front-end/spectrum.css: Added.
+        (.spectrum-container):
+        (.spectrum-top):
+        (.spectrum-color):
+        (.spectrum-display-value):
+        (.spectrum-hue):
+        (.spectrum-fill):
+        (.spectrum-range-container):
+        (.spectrum-range-container *):
+        (.spectrum-range-container label):
+        (.spectrum-range-container input):
+        (.spectrum-dragger, .spectrum-slider):
+        (.spectrum-sat):
+        (.spectrum-val):
+        (.spectrum-dragger):
+        (.spectrum-slider):
+        (.spectrum-container .swatch):
+
 2012-11-06  Takashi Sakamoto  <tasak@google.com>
 
         removeAttribute('style') not working in certain circumstances
index f6f0e1d..2651e62 100644 (file)
             'inspector/front-end/inspector.css',
             'inspector/front-end/inspectorSyntaxHighlight.css',
             'inspector/front-end/popover.css',
+            'inspector/front-end/spectrum.css',
             '<@(webinspector_modules_js_files)',
             '<@(webinspector_standalone_css_files)',
         ],
index 76c246b..54c7753 100755 (executable)
                                        >
                                </File>
                                <File
+                                       RelativePath="..\inspector\front-end\spectrum.css"
+                                       >
+                               </File>
+                               <File
                                        RelativePath="..\inspector\front-end\splitView.css"
                                        >
                                </File>
index c8eea36..483714a 100644 (file)
@@ -166,10 +166,21 @@ Element.prototype.hasStyleClass = function(className)
     return this.classList.contains(className);
 }
 
+/**
+ * @param {number|undefined} x
+ * @param {number|undefined} y
+ */
 Element.prototype.positionAt = function(x, y)
 {
-    this.style.left = x + "px";
-    this.style.top = y + "px";
+    if (typeof x === "number")
+        this.style.setProperty("left", x + "px");
+    else
+        this.style.removeProperty("left");
+
+    if (typeof y === "number")
+        this.style.setProperty("top", y + "px");
+    else
+        this.style.removeProperty("top");
 }
 
 Element.prototype.pruneEmptyTextNodes = function()
@@ -189,6 +200,30 @@ Element.prototype.isScrolledToBottom = function()
     return this.scrollTop + this.clientHeight === this.scrollHeight;
 }
 
+/**
+ * @constructor
+ * @param {number} width
+ * @param {number} height
+ */
+function Size(width, height)
+{
+    this.width = width;
+    this.height = height;
+}
+
+/**
+ * @return {Size}
+ */
+Element.prototype.measurePreferredSize = function()
+{
+    document.body.appendChild(this);
+    this.positionAt(0, 0);
+    var result = new Size(this.offsetWidth, this.offsetHeight);
+    this.positionAt(undefined, undefined);
+    document.body.removeChild(this);
+    return result;
+}
+
 Node.prototype.enclosingNodeOrSelfWithNodeNameInArray = function(nameArray)
 {
     for (var node = this; node && node !== this.ownerDocument; node = node.parentNode)
index eee964f..6b718fc 100644 (file)
@@ -216,7 +216,7 @@ WebInspector.HeapSnapshotView.prototype = {
     {
         this._currentSearchResultIndex = -1;
         this._popoverHelper.hidePopover();
-        if (this.helpPopover && this.helpPopover.visible)
+        if (this.helpPopover && this.helpPopover.isShowing())
             this.helpPopover.hide();
     },
 
@@ -646,7 +646,7 @@ WebInspector.HeapSnapshotView.prototype = {
             this._helpPopoverContentElement = contentElement;
             this.helpPopover = new WebInspector.Popover();
         }
-        if (this.helpPopover.visible)
+        if (this.helpPopover.isShowing())
             this.helpPopover.hide();
         else
             this.helpPopover.show(this._helpPopoverContentElement, this.helpButton.element);
index ce1e10a..31aca9d 100644 (file)
 
 /**
  * @constructor
+ * @extends {WebInspector.View}
  * @param {WebInspector.PopoverHelper=} popoverHelper
  */
 WebInspector.Popover = function(popoverHelper)
 {
-    this.element = document.createElement("div");
+    WebInspector.View.call(this);
+    this.markAsRoot();
     this.element.className = "popover custom-popup-vertical-scroll custom-popup-horizontal-scroll";
 
     this._popupArrowElement = document.createElement("div");
@@ -43,37 +45,66 @@ WebInspector.Popover = function(popoverHelper)
 
     this._contentDiv = document.createElement("div");
     this._contentDiv.className = "content";
-    this._visible = false;
+    this.element.appendChild(this._contentDiv);
+
     this._popoverHelper = popoverHelper;
 }
 
 WebInspector.Popover.prototype = {
     /**
+     * @param {Element} element
+     * @param {Element} anchor
+     * @param {number=} preferredWidth
+     * @param {number=} preferredHeight
+     */
+    show: function(element, anchor, preferredWidth, preferredHeight)
+    {
+        this._innerShow(null, element, anchor, preferredWidth, preferredHeight);
+    },
+
+    /**
+     * @param {WebInspector.View} view
+     * @param {Element} anchor
+     * @param {number=} preferredWidth
+     * @param {number=} preferredHeight
+     */
+    showView: function(view, anchor, preferredWidth, preferredHeight)
+    {
+        this._innerShow(view, view.element, anchor, preferredWidth, preferredHeight);
+    },
+
+    /**
+     * @param {WebInspector.View?} view
+     * @param {Element} contentElement
+     * @param {Element} anchor
      * @param {number=} preferredWidth
      * @param {number=} preferredHeight
      */
-    show: function(contentElement, anchor, preferredWidth, preferredHeight)
+    _innerShow: function(view, contentElement, anchor, preferredWidth, preferredHeight)
     {
         if (this._disposed)
             return;
         this.contentElement = contentElement;
 
         // This should not happen, but we hide previous popup to be on the safe side.
-        if (WebInspector.Popover._popoverElement)
-            document.body.removeChild(WebInspector.Popover._popoverElement);
-        WebInspector.Popover._popoverElement = this.element;
+        if (WebInspector.Popover._popover)
+            WebInspector.Popover._popover.detach();
+        WebInspector.Popover._popover = this;
 
         // Temporarily attach in order to measure preferred dimensions.
-        this.contentElement.positionAt(0, 0);
-        document.body.appendChild(this.contentElement);
-        preferredWidth = preferredWidth || this.contentElement.offsetWidth;
-        preferredHeight = preferredHeight || this.contentElement.offsetHeight;
-
-        this._contentDiv.appendChild(this.contentElement);
-        this.element.appendChild(this._contentDiv);
-        document.body.appendChild(this.element);
+        var preferredSize = view ? view.measurePreferredSize() : this.contentElement.measurePreferredSize();
+        preferredWidth = preferredWidth || preferredSize.width;
+        preferredHeight = preferredHeight || preferredSize.height;
+
+        WebInspector.View.prototype.show.call(this, document.body);
+
+        if (view)
+            view.show(this._contentDiv);
+        else
+            this._contentDiv.appendChild(this.contentElement);
+
         this._positionElement(anchor, preferredWidth, preferredHeight);
-        this._visible = true;
+
         if (this._popoverHelper) {
             contentElement.addEventListener("mousemove", this._popoverHelper._killHidePopoverTimer.bind(this._popoverHelper), true);
             this.element.addEventListener("mouseout", this._popoverHelper._mouseOut.bind(this._popoverHelper), true);
@@ -82,16 +113,8 @@ WebInspector.Popover.prototype = {
 
     hide: function()
     {
-        if (WebInspector.Popover._popoverElement) {
-            delete WebInspector.Popover._popoverElement;
-            document.body.removeChild(this.element);
-        }
-        this._visible = false;
-    },
-
-    get visible()
-    {
-        return this._visible;
+        this.detach();
+        delete WebInspector.Popover._popover;
     },
 
     get disposed()
@@ -101,7 +124,7 @@ WebInspector.Popover.prototype = {
 
     dispose: function()
     {
-        if (this.visible)
+        if (this.isShowing())
             this.hide();
         this._disposed = true;
     },
@@ -187,7 +210,9 @@ WebInspector.Popover.prototype = {
         this.element.positionAt(newElementPosition.x - borderWidth, newElementPosition.y - borderWidth);
         this.element.style.width = newElementPosition.width + borderWidth * 2 + "px";
         this.element.style.height = newElementPosition.height + borderWidth * 2 + "px";
-    }
+    },
+
+    __proto__: WebInspector.View.prototype
 }
 
 /**
index 4e7fdc1..bfeadb5 100644 (file)
 
 /**
  * @constructor
- * @extends {WebInspector.Object}
+ * @extends {WebInspector.View}
  */
 WebInspector.Spectrum = function()
 {
-    this._popover = new WebInspector.Popover();
-    this._popover.setCanShrink(false);
-    this._popover.element.addEventListener("mousedown", consumeEvent, false);
+    WebInspector.View.call(this);
+    this.registerRequiredCSS("spectrum.css");
 
-    this._containerElement = document.createElement('div');
-    this._containerElement.className = "spectrum-container";
-    this._containerElement.tabIndex = 0;
-    this._containerElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
+    this.element.className = "spectrum-container";
+    this.element.tabIndex = 0;
 
-    var topElement = this._containerElement.createChild("div", "spectrum-top");
+    var topElement = this.element.createChild("div", "spectrum-top");
     topElement.createChild("div", "spectrum-fill");
 
     var topInnerElement = topElement.createChild("div", "spectrum-top-inner fill");
@@ -51,7 +48,7 @@ WebInspector.Spectrum = function()
     this._sliderElement = topInnerElement.createChild("div", "spectrum-hue");
     this.slideHelper = this._sliderElement.createChild("div", "spectrum-slider");
 
-    var rangeContainer = this._containerElement.createChild("div", "spectrum-range-container");
+    var rangeContainer = this.element.createChild("div", "spectrum-range-container");
     var alphaLabel = rangeContainer.createChild("label");
     alphaLabel.textContent = WebInspector.UIString("\u03B1:");
 
@@ -65,7 +62,7 @@ WebInspector.Spectrum = function()
     swatchElement.className = "swatch";
     this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
 
-    var displayContainer = this._containerElement.createChild("div");
+    var displayContainer = this.element.createChild("div");
     displayContainer.appendChild(swatchElement);
     this._displayElement = displayContainer.createChild("span", "source-code spectrum-display-value");
 
@@ -107,13 +104,10 @@ WebInspector.Spectrum = function()
 
         this._onchange();
     }
-
-    this._hideProxy = this.hide.bind(this, true);
 };
 
 WebInspector.Spectrum.Events = {
-    ColorChanged: "ColorChanged",
-    Hidden: "Hidden"
+    ColorChanged: "ColorChanged"
 };
 
 WebInspector.Spectrum.hsvaToRGBA = function(h, s, v, a)
@@ -323,11 +317,6 @@ WebInspector.Spectrum.prototype = {
         this._displayElement.textContent = text;
     },
 
-    get visible()
-    {
-        return this._popover.visible;
-    },
-
     _onchange: function()
     {
         this._updateUI();
@@ -378,43 +367,76 @@ WebInspector.Spectrum.prototype = {
         this._alphaElement.value = this.hsv[3] * 100;
     },
 
+    wasShown: function()
+    {
+        this.slideHeight = this._sliderElement.offsetHeight;
+        this.dragWidth = this._draggerElement.offsetWidth;
+        this.dragHeight = this._draggerElement.offsetHeight;
+        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
+        this.slideHelperHeight = this.slideHelper.offsetHeight / 2;
+        this._updateUI();
+    },
+
+    __proto__: WebInspector.View.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ */
+WebInspector.SpectrumPopupHelper = function()
+{
+    this._spectrum = new WebInspector.Spectrum();
+    this._spectrum.element.addEventListener("keydown", this._onKeyDown.bind(this), false);
+
+    this._popover = new WebInspector.Popover();
+    this._popover.setCanShrink(false);
+    this._popover.element.addEventListener("mousedown", consumeEvent, false);
+
+    this._hideProxy = this.hide.bind(this, true);
+}
+
+WebInspector.SpectrumPopupHelper.Events = {
+    Hidden: "Hidden"
+};
+
+WebInspector.SpectrumPopupHelper.prototype = {
+    /**
+     * @return {WebInspector.Spectrum}
+     */
+    spectrum: function()
+    {
+        return this._spectrum;
+    },
+
     toggle: function(element, color, format)
     {
-        if (this.visible)
+        if (this._popover.isShowing())
             this.hide(true);
         else
             this.show(element, color, format);
 
-        return this.visible;
+        return this._popover.isShowing();
     },
 
     show: function(element, color, format)
     {
-        if (this.visible) {
-            if (this.anchorElement === element)
+        if (this._popover.isShowing()) {
+            if (this._anchorElement === element)
                 return false;
 
             // Reopen the picker for another anchor element.
             this.hide(true);
         }
 
+        this._anchorElement = element;
+
+        this._spectrum.color = color;
+        this._spectrum._originalFormat = format || color.format;
         this.reposition(element);
-        this.anchorElement = element;
 
         document.addEventListener("mousedown", this._hideProxy, false);
         window.addEventListener("blur", this._hideProxy, false);
-
-        this.slideHeight = this._sliderElement.offsetHeight;
-        this.dragWidth = this._draggerElement.offsetWidth;
-        this.dragHeight = this._draggerElement.offsetHeight;
-        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
-        this.slideHelperHeight = this.slideHelper.offsetHeight / 2;
-
-        this.color = color;
-        this._originalFormat = format || color.format;
-
-        this._updateUI();
-
         return true;
     },
 
@@ -422,26 +444,28 @@ WebInspector.Spectrum.prototype = {
     {
         if (!this._previousFocusElement)
             this._previousFocusElement = WebInspector.currentFocusElement();
-        this._popover.show(this._containerElement, element);
-        WebInspector.setCurrentFocusElement(this._containerElement);
+        this._popover.showView(this._spectrum, element);
+        WebInspector.setCurrentFocusElement(this._spectrum.element);
     },
 
     /**
-     * @param {boolean} commitEdit
+     * @param {boolean=} commitEdit
      */
     hide: function(commitEdit)
     {
+        if (!this._popover.isShowing())
+            return;
         this._popover.hide();
 
         document.removeEventListener("mousedown", this._hideProxy, false);
         window.removeEventListener("blur", this._hideProxy, false);
 
-        this.dispatchEventToListeners(WebInspector.Spectrum.Events.Hidden, !!commitEdit);
+        this.dispatchEventToListeners(WebInspector.SpectrumPopupHelper.Events.Hidden, !!commitEdit);
 
         WebInspector.setCurrentFocusElement(this._previousFocusElement);
         delete this._previousFocusElement;
 
-        delete this.anchorElement;
+        delete this._anchorElement;
     },
 
     _onKeyDown: function(event)
@@ -459,3 +483,26 @@ WebInspector.Spectrum.prototype = {
 
     __proto__: WebInspector.Object.prototype
 }
+
+/**
+ * @constructor
+ */
+WebInspector.ColorSwatch = function()
+{
+    this.element = document.createElement("span");
+    this._swatchInnerElement = this.element.createChild("span", "swatch-inner");
+    this.element.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format");
+    this.element.className = "swatch";
+    this.element.addEventListener("mousedown", consumeEvent, false);
+    this.element.addEventListener("dblclick", consumeEvent, false);
+}
+
+WebInspector.ColorSwatch.prototype = {
+    /**
+     * @param {string} colorString
+     */
+    setColorString: function(colorString)
+    {
+        this._swatchInnerElement.style.backgroundColor = colorString;
+    }
+}
index ce55f47..29b0e92 100644 (file)
@@ -93,7 +93,7 @@ WebInspector.StylesSidebarPane = function(computedStylePane, setPseudoClassCallb
     this._sectionsContainer = document.createElement("div");
     this.bodyElement.appendChild(this._sectionsContainer);
 
-    this._spectrum = new WebInspector.Spectrum();
+    this._spectrumHelper = new WebInspector.SpectrumPopupHelper();
     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
 
     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged, this._styleSheetOrMediaQueryResultChanged, this);
@@ -170,8 +170,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     update: function(node, forceUpdate)
     {
-        if (this._spectrum.visible)
-            this._spectrum.hide(false);
+        this._spectrumHelper.hide();
 
         var refresh = false;
 
@@ -795,8 +794,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
     willHide: function()
     {
-        if (this._spectrum.visible)
-            this._spectrum.hide(false);
+        this._spectrumHelper.hide();
     },
 
     __proto__: WebInspector.SidebarPane.prototype
@@ -1769,32 +1767,21 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
                 var format = getFormat();
                 var hasSpectrum = self._parentPane;
-                var spectrum = hasSpectrum ? self._parentPane._spectrum : null;
+                var spectrumHelper = hasSpectrum ? self._parentPane._spectrumHelper : null;
+                var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null;
 
-                var swatchElement = document.createElement("span");
-                var swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
-                swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format");
-
-                swatchElement.className = "swatch";
-
-                swatchElement.addEventListener("mousedown", consumeEvent, false);
-                swatchElement.addEventListener("click", swatchClick, false);
-                swatchElement.addEventListener("dblclick", consumeEvent, false);
-
-                swatchInnerElement.style.backgroundColor = text;
+                var colorSwatch = new WebInspector.ColorSwatch();
+                colorSwatch.setColorString(text);
+                colorSwatch.element.addEventListener("click", swatchClick, false);
 
                 var scrollerElement = hasSpectrum ? self._parentPane._computedStylePane.element.parentElement : null;
 
                 function spectrumChanged(e)
                 {
                     color = e.data;
-
                     var colorString = color.toString();
-
                     colorValueElement.textContent = colorString;
-                    spectrum.displayText = colorString;
-                    swatchInnerElement.style.backgroundColor = colorString;
-
+                    colorSwatch.setColorString(colorString);
                     self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, false, false, false);
                 }
 
@@ -1805,7 +1792,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                     var propertyText = !commitEdit && self.originalPropertyText ? self.originalPropertyText : (nameElement.textContent + ": " + valueElement.textContent);
                     self.applyStyleText(propertyText, true, true, false);
                     spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
-                    spectrum.removeEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHidden);
+                    spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
 
                     delete self._parentPane._isEditingStyle;
                     delete self.originalPropertyText;
@@ -1813,24 +1800,24 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
                 function repositionSpectrum()
                 {
-                    spectrum.reposition(swatchElement);
+                    spectrumHelper.reposition(colorSwatch.element);
                 }
 
                 function swatchClick(e)
                 {
                     // Shift + click toggles color formats.
                     // Click opens colorpicker, only if the element is not in computed styles section.
-                    if (!spectrum || e.shiftKey)
+                    if (!spectrumHelper || e.shiftKey)
                         changeColorDisplay(e);
                     else {
-                        var visible = spectrum.toggle(swatchElement, color, format);
+                        var visible = spectrumHelper.toggle(colorSwatch.element, color, format);
 
                         if (visible) {
                             spectrum.displayText = color.toString(format);
                             self.originalPropertyText = self.property.propertyText;
                             self._parentPane._isEditingStyle = true;
                             spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
-                            spectrum.addEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHidden);
+                            spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
 
                             scrollerElement.addEventListener("scroll", repositionSpectrum, false);
                         }
@@ -1917,7 +1904,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 }
 
                 var container = document.createElement("nobr");
-                container.appendChild(swatchElement);
+                container.appendChild(colorSwatch.element);
                 container.appendChild(colorValueElement);
                 return container;
             }
index d3adff9..f5ff3c9 100644 (file)
@@ -360,6 +360,21 @@ WebInspector.View.prototype = {
         WebInspector.setCurrentFocusElement(element);
     },
 
+    /**
+     * @return {Size}
+     */
+    measurePreferredSize: function()
+    {
+        this._loadCSSIfNeeded();
+        WebInspector.View._originalAppendChild.call(document.body, this.element);
+        this.element.positionAt(0, 0);
+        var result = new Size(this.element.offsetWidth, this.element.offsetHeight);
+        this.element.positionAt(undefined, undefined);
+        WebInspector.View._originalRemoveChild.call(document.body, this.element);
+        this._disableCSSIfNeeded();
+        return result;
+    },
+
     __proto__: WebInspector.Object.prototype
 }
 
index 338ff89..e57c894 100644 (file)
     <file>resourcesPanel.css</file>
     <file>revisionHistory.css</file>
     <file>scriptsPanel.css</file>
+    <file>spectrum.css</file>
     <file>splitView.css</file>
     <file>tabbedPane.css</file>
     <file>textEditor.css</file>
index 0a5cd22..9dd1d78 100644 (file)
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }
-
-/* https://github.com/bgrins/spectrum */
-.spectrum-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    background: rgba(230, 230, 230, 1) !important;
-    border: 1px solid #646464;
-    padding: 10px;
-    width: 220px;
-    z-index: 10;
-    -webkit-user-select: none;
-}
-
-.spectrum-top {
-    position: relative;
-    width: 100%;
-    display: inline-block;
-}
-
-.spectrum-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 40px;
-}
-
-.spectrum-display-value {
-    -webkit-user-select: text;
-    position: relative;
-    left: 2px;
-    top: -6px;
-}
-
-.spectrum-hue {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 170px;
-    -webkit-box-reflect: right -28px;
-}
-
-.spectrum-fill {
-    /* Same as spectrum-color width to force aspect ratio. */
-    margin-top: 150px;
-}
-
-.spectrum-range-container {
-    position: relative;
-    padding-bottom: 5px;
-}
-
-.spectrum-range-container * {
-    font-size: 11px;
-    vertical-align: middle;
-}
-
-.spectrum-range-container label {
-    display: inline-block;
-    padding-right: 4px;
-}
-
-.spectrum-range-container input {
-    position: absolute;
-    left: 15px;
-    right: 40px;
-    margin: 3px 0 0 0;
-}
-
-.swatch, .spectrum-dragger, .spectrum-slider {
-    -webkit-user-select: none;
-}
-
-.spectrum-sat {
-    background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
-}
-
-.spectrum-val {
-    background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
-}
-
-.spectrum-hue {
-    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
-
-.spectrum-dragger {
-    border-radius: 5px;
-    height: 5px;
-    width: 5px;
-    border: 1px solid white;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: black;
-}
-
-.spectrum-slider {
-    position: absolute;
-    top: 0;
-    cursor: pointer;
-    border: 1px solid black;
-    height: 4px;
-    left: -1px;
-    right: -1px;
-}
-
-.spectrum-container .swatch {
-    width: 20px;
-    height:20px;
-    margin: 0;
-}
index 4fb3b88..2179db0 100644 (file)
@@ -1700,19 +1700,18 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     margin-bottom: -1px;
     width: 1em;
     height: 1em;
-    border: 1px solid rgba(128, 128, 128, 0.6);
-    background-image: url(Images/checker.png);
     display: inline-block;
+    background-image: url(Images/checker.png);
 }
 
 .swatch-inner {
     width: 100%;
     height: 100%;
     display: inline-block;
-    margin-bottom: 1px;
+    border: 1px solid rgba(128, 128, 128, 0.6);
 }
 
-.swatch:hover {
+.swatch-inner:hover {
     border: 1px solid rgba(64, 64, 64, 0.8);
 }
 
diff --git a/Source/WebCore/inspector/front-end/spectrum.css b/Source/WebCore/inspector/front-end/spectrum.css
new file mode 100644 (file)
index 0000000..7a9ea28
--- /dev/null
@@ -0,0 +1,114 @@
+/* https://github.com/bgrins/spectrum */
+.spectrum-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    background: rgba(230, 230, 230, 1) !important;
+    border: 1px solid #646464;
+    padding: 10px;
+    width: 220px;
+    z-index: 10;
+    -webkit-user-select: none;
+}
+
+.spectrum-top {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+}
+
+.spectrum-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 40px;
+}
+
+.spectrum-display-value {
+    -webkit-user-select: text;
+    position: relative;
+    left: 2px;
+    top: -6px;
+}
+
+.spectrum-hue {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 170px;
+    -webkit-box-reflect: right -28px;
+}
+
+.spectrum-fill {
+    /* Same as spectrum-color width to force aspect ratio. */
+    margin-top: 150px;
+}
+
+.spectrum-range-container {
+    position: relative;
+    padding-bottom: 5px;
+}
+
+.spectrum-range-container * {
+    font-size: 11px;
+    vertical-align: middle;
+}
+
+.spectrum-range-container label {
+    display: inline-block;
+    padding-right: 4px;
+}
+
+.spectrum-range-container input {
+    position: absolute;
+    left: 15px;
+    right: 40px;
+    margin: 3px 0 0 0;
+}
+
+.spectrum-dragger, .spectrum-slider {
+    -webkit-user-select: none;
+}
+
+.spectrum-sat {
+    background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
+}
+
+.spectrum-val {
+    background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
+}
+
+.spectrum-hue {
+    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+.spectrum-dragger {
+    border-radius: 5px;
+    height: 5px;
+    width: 5px;
+    border: 1px solid white;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: black;
+}
+
+.spectrum-slider {
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    border: 1px solid black;
+    height: 4px;
+    left: -1px;
+    right: -1px;
+}
+
+.spectrum-container .swatch {
+    width: 20px;
+    height:20px;
+    margin: 0;
+}