Web Inspector: Fix minor design issues in the Spectrum color picker

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

Drive-by: frontend compilability fixes.
Reviewed by Pavel Feldman.

* English.lproj/localizedStrings.js:
* inspector/compile-front-end.sh:
* inspector/front-end/ElementsPanel.js:
* inspector/front-end/Popover.js:
* inspector/front-end/Spectrum.js:
(WebInspector.Spectrum.rgbaToHSVA):
(WebInspector.Spectrum.prototype.set color):
(WebInspector.Spectrum.prototype.get isVisible):
(WebInspector.Spectrum.prototype.toggle):
(WebInspector.Spectrum.prototype.show):
(WebInspector.Spectrum.prototype.hide):
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
* inspector/front-end/elementsPanel.css:
(.spectrum-container):
(.spectrum-top):
(.spectrum-color):
(.spectrum-hue):
(.spectrum-fill):
(.spectrum-range-container):
(.spectrum-range-container *):
(.spectrum-range-container label):
(.spectrum-range-container input):
(.swatch, .spectrum-dragger, .spectrum-slider):
(.spectrum-sat):
(.spectrum-val):
(.spectrum-dragger):
(.spectrum-slider):
* inspector/front-end/inspector.css:
(.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 068abbc..419880a 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,43 @@
+2012-02-15  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: Fix minor design issues in the Spectrum color picker
+        https://bugs.webkit.org/show_bug.cgi?id=78693
+
+        Drive-by: frontend compilability fixes.
+
+        Reviewed by Pavel Feldman.
+
+        * English.lproj/localizedStrings.js:
+        * inspector/compile-front-end.sh:
+        * inspector/front-end/ElementsPanel.js:
+        * inspector/front-end/Popover.js:
+        * inspector/front-end/Spectrum.js:
+        (WebInspector.Spectrum.rgbaToHSVA):
+        (WebInspector.Spectrum.prototype.set color):
+        (WebInspector.Spectrum.prototype.get isVisible):
+        (WebInspector.Spectrum.prototype.toggle):
+        (WebInspector.Spectrum.prototype.show):
+        (WebInspector.Spectrum.prototype.hide):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
+        * inspector/front-end/elementsPanel.css:
+        (.spectrum-container):
+        (.spectrum-top):
+        (.spectrum-color):
+        (.spectrum-hue):
+        (.spectrum-fill):
+        (.spectrum-range-container):
+        (.spectrum-range-container *):
+        (.spectrum-range-container label):
+        (.spectrum-range-container input):
+        (.swatch, .spectrum-dragger, .spectrum-slider):
+        (.spectrum-sat):
+        (.spectrum-val):
+        (.spectrum-dragger):
+        (.spectrum-slider):
+        * inspector/front-end/inspector.css:
+        (.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment):
+
 2012-02-15  Yury Semikhatsky  <yurys@chromium.org>
 
         Unreviewed. Build fix after r107806

diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
index 0cdb733..65929aa 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ

diff --git a/Source/WebCore/inspector/compile-front-end.sh b/Source/WebCore/inspector/compile-front-end.sh
index 291fdeb..a71c0a2 100755 (executable)
--- a/Source/WebCore/inspector/compile-front-end.sh
+++ b/Source/WebCore/inspector/compile-front-end.sh
@@ -76,7 +76,7 @@ java -jar ~/closure/compiler.jar --summary_detail_level 3 --compilation_level SI
         --js Source/WebCore/inspector/front-end/ResourceUtils.js \
         --js Source/WebCore/inspector/front-end/NetworkManager.js \
         --js Source/WebCore/inspector/front-end/UISourceCode.js \
-    --module jsmodule_ui:35:jsmodule_common \
+    --module jsmodule_ui:36:jsmodule_common \
         --js Source/WebCore/inspector/front-end/AdvancedSearchController.js \
         --js Source/WebCore/inspector/front-end/Checkbox.js \
         --js Source/WebCore/inspector/front-end/ContextMenu.js \
@@ -102,6 +102,7 @@ java -jar ~/closure/compiler.jar --summary_detail_level 3 --compilation_level SI
         --js Source/WebCore/inspector/front-end/SidebarOverlay.js \
         --js Source/WebCore/inspector/front-end/SoftContextMenu.js \
         --js Source/WebCore/inspector/front-end/SourceTokenizer.js \
+        --js Source/WebCore/inspector/front-end/Spectrum.js \
         --js Source/WebCore/inspector/front-end/SplitView.js \
         --js Source/WebCore/inspector/front-end/StatusBarButton.js \
         --js Source/WebCore/inspector/front-end/TabbedPane.js \

diff --git a/Source/WebCore/inspector/front-end/ElementsPanel.js b/Source/WebCore/inspector/front-end/ElementsPanel.js
index 95249e3..5fffb0a 100644 (file)
--- a/Source/WebCore/inspector/front-end/ElementsPanel.js
+++ b/Source/WebCore/inspector/front-end/ElementsPanel.js
@@ -394,6 +394,9 @@ WebInspector.ElementsPanel.prototype = {
         else
             dimensionsCallback();
 
+        /**
+         * @param {Object=} dimensions
+         */
         function dimensionsCallback(dimensions)
         {
             var imageElement = document.createElement("img");
@@ -405,12 +408,18 @@ WebInspector.ElementsPanel.prototype = {
             resource.populateImageSource(imageElement);
         }
 
+        /**
+         * @param {Object=} dimensions
+         */
         function showPopover(imageElement, dimensions)
         {
             var contents = buildPopoverContents(imageElement, dimensions);
             popover.show(contents, anchor);
         }
 
+        /**
+         * @param {Object=} nodeDimensions
+         */
         function buildPopoverContents(imageElement, nodeDimensions)
         {
             const maxImageWidth = 100;

diff --git a/Source/WebCore/inspector/front-end/Popover.js b/Source/WebCore/inspector/front-end/Popover.js
index fbb54f9..48a5dd8 100644 (file)
--- a/Source/WebCore/inspector/front-end/Popover.js
+++ b/Source/WebCore/inspector/front-end/Popover.js
@@ -48,6 +48,10 @@ WebInspector.Popover = function(popoverHelper)
 }
 
 WebInspector.Popover.prototype = {
+    /**
+     * @param {number=} preferredWidth
+     * @param {number=} preferredHeight
+     */
     show: function(contentElement, anchor, preferredWidth, preferredHeight)
     {
         if (this._disposed)

diff --git a/Source/WebCore/inspector/front-end/Spectrum.js b/Source/WebCore/inspector/front-end/Spectrum.js
index 27fc75a..56006de 100644 (file)
--- a/Source/WebCore/inspector/front-end/Spectrum.js
+++ b/Source/WebCore/inspector/front-end/Spectrum.js
@@ -26,7 +26,11 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.Spectrum = function(container)
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ */
+WebInspector.Spectrum = function()
 {
     this._popover = new WebInspector.Popover();
     this._popover.element.addEventListener("mousedown", stopPropagation, false);
@@ -139,7 +143,7 @@ WebInspector.Spectrum.rgbaToHSVA = function(r, g, b, a)
     r = r / 255;
     g = g / 255;
     b = b / 255;
-    
+
     var max = Math.max(r, g, b);
     var min = Math.min(r, g, b);
     var h;
@@ -170,6 +174,11 @@ WebInspector.Spectrum.rgbaToHSVA = function(r, g, b, a)
 };
 
 //FIXME: migrate to WebInspector.elementDragStart
+/**
+ * @param {Function=} onmove
+ * @param {Function=} onstart
+ * @param {Function=} onstop
+ */
 WebInspector.Spectrum.draggable = function(element, onmove, onstart, onstop) {
 
     var doc = document;
@@ -247,10 +256,10 @@ WebInspector.Spectrum.prototype = {
     set color(color)
     {
         var rgba = (color.rgba || color.rgb).slice(0);
-        
+
         if (rgba.length === 3)
             rgba[3] = 1;
-        
+
         this.hsv = WebInspector.Spectrum.rgbaToHSVA(rgba[0], rgba[1], rgba[2], rgba[3]);
     },
 
@@ -303,6 +312,11 @@ WebInspector.Spectrum.prototype = {
         this._displayElement.textContent = text;
     },
 
+    get isVisible()
+    {
+        return this._popover.visible;
+    },
+
     _onchange: function()
     {
         this._updateUI();
@@ -355,24 +369,29 @@ WebInspector.Spectrum.prototype = {
 
     toggle: function(element, color, format)
     {
-        if (this._isShown)
+        if (this.isVisible)
             this.hide();
         else
             this.show(element, color, format);
 
-        return this._isShown;
+        return this.isVisible;
     },
 
     show: function(element, color, format)
     {
-        if (this._isShown)
-            return;
+        if (this.isVisible) {
+            if (this.anchorElement === element)
+                return false;
+
+            // Reopen the picker for another anchor element.
+            this.hide();
+        }
 
-        this._isShown = true;
         this.reposition(element);
+        this.anchorElement = element;
 
-        document.addEventListener("mousedown", this._hideProxy);
-        window.addEventListener("blur", this._hideProxy);
+        document.addEventListener("mousedown", this._hideProxy, false);
+        window.addEventListener("blur", this._hideProxy, false);
 
         this.slideHeight = this._sliderElement.offsetHeight;
         this.dragWidth = this._draggerElement.offsetWidth;
@@ -384,6 +403,8 @@ WebInspector.Spectrum.prototype = {
         this._originalFormat = format || color.format;
 
         this._updateUI();
+
+        return true;
     },
 
     reposition: function(element)
@@ -393,17 +414,14 @@ WebInspector.Spectrum.prototype = {
 
     hide: function()
     {
-        delete this._isShown;
         this._popover.hide();
 
-        document.removeEventListener("mousedown", this._hideProxy);
-        window.removeEventListener("blur", this._hideProxy);
+        document.removeEventListener("mousedown", this._hideProxy, false);
+        window.removeEventListener("blur", this._hideProxy, false);
 
         this.dispatchEventToListeners(WebInspector.Spectrum.Events.Hidden);
 
-        // Only want to allow one instance to be open at a time, so clear out any
-        // existing event listeners.
-        this.removeAllListeners();
+        delete this.anchorElement;
     }
 };
 

diff --git a/Source/WebCore/inspector/front-end/StylesSidebarPane.js b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
index 3455760..c3e6a9d 100644 (file)
--- a/Source/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/Source/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -1676,7 +1676,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 var swatchElement = document.createElement("span");
                 var swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
                 if (hasColorpicker)
-                    swatchElement.title = WebInspector.UIString("Click to open a colorpicker");
+                    swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format");
                 else
                     swatchElement.title = WebInspector.UIString("Click to change color format");
 
@@ -1690,7 +1690,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
                 var scrollerElement = hasColorpicker ? self._parentPane._computedStylePane.element.parentElement : null;
 
-                function spectrumChange(e)
+                function spectrumChanged(e)
                 {
                     color = e.data;
 
@@ -1703,12 +1703,12 @@ WebInspector.StylePropertyTreeElement.prototype = {
                     self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, false, false, false);
                 }
 
-                function spectrumHide()
+                function spectrumHidden()
                 {
                     scrollerElement.removeEventListener("scroll", repositionSpectrum, false);
                     self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, true, true, false);
-                    spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChange);
-                    spectrum.removeEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHide);
+                    spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
+                    spectrum.removeEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHidden);
 
                     delete self._parentPane._isEditingStyle;
                 }
@@ -1720,19 +1720,18 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
                 function swatchClick(e)
                 {
-                    // Alt + click toggles color formats.
+                    // Shift + click toggles color formats.
                     // Click opens colorpicker, only if the element is not in computed styles section.
-
-                    if (!spectrum || e.altKey)
+                    if (!spectrum || e.shiftKey)
                         changeColorDisplay(e);
                     else if (hasColorpicker) {
-                        var isShown = spectrum.toggle(swatchElement, color, format);
+                        var isVisible = spectrum.toggle(swatchElement, color, format);
 
-                        if (isShown) {
+                        if (isVisible) {
                             spectrum.displayText = color.toString(format);
                             self._parentPane._isEditingStyle = true;
-                            spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChange);
-                            spectrum.addEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHide);
+                            spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
+                            spectrum.addEventListener(WebInspector.Spectrum.Events.Hidden, spectrumHidden);
 
                             scrollerElement.addEventListener("scroll", repositionSpectrum, false);
                         }

diff --git a/Source/WebCore/inspector/front-end/elementsPanel.css b/Source/WebCore/inspector/front-end/elementsPanel.css
index b3bb397..f8881ce 100644 (file)
--- a/Source/WebCore/inspector/front-end/elementsPanel.css
+++ b/Source/WebCore/inspector/front-end/elementsPanel.css
@@ -498,3 +498,102 @@
     -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: 200px;
+    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: 20%;
+}
+
+.spectrum-hue {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 83%;
+}
+
+.spectrum-fill {
+    /* Same as spectrum-color width to force aspect ratio. */
+    margin-top: 80%;
+}
+
+.spectrum-range-container {
+    position: relative;
+    padding-top: 10px;
+}
+
+.spectrum-range-container * {
+    font-size: 11px;
+    vertical-align: middle;
+}
+
+.spectrum-range-container label {
+    width: 32px;
+    display: inline-block;
+}
+
+.spectrum-range-container input {
+    width: 130px;
+}
+
+.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;
+    height: 5px;
+    width: 110%;
+    margin-left: -5%;
+    background: white;
+    opacity: .8;
+}

diff --git a/Source/WebCore/inspector/front-end/inspector.css b/Source/WebCore/inspector/front-end/inspector.css
index 1bb8abd..c5cb07c 100644 (file)
--- a/Source/WebCore/inspector/front-end/inspector.css
+++ b/Source/WebCore/inspector/front-end/inspector.css
@@ -2652,102 +2652,3 @@ body.platform-mac #drawer-status-bar .search-status-bar-progress {
     border-color: transparent;
     border-width: 0 0 11px 0;
 }
-
-/* 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: 200px;
-    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: 20%;
-}
-
-.spectrum-hue {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 83%;
-}
-
-.spectrum-fill {
-    /* Same as spectrum-color width to force aspect ratio. */
-    margin-top: 80%;
-}
-
-.spectrum-range-container {
-    position: relative;
-    padding-top: 10px;
-}
-
-.spectrum-range-container * {
-    font-size: 9px;
-    vertical-align: middle;
-}
-
-.spectrum-range-container label {
-    width: 32px;
-    display: inline-block;
-}
-
-.spectrum-range-container input {
-    width: 130px;
-}
-
-.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;
-    height: 5px;
-    width: 110%;
-    margin-left: -5%;
-    background: white;
-    opacity: .8;
-}