- Revision
- 108065
- Author
- pfeld...@chromium.org
- Date
- 2012-02-17 05:14:12 -0800 (Fri, 17 Feb 2012)
Log Message
Web Inspector: a bit of color picker polish
https://bugs.webkit.org/show_bug.cgi?id=78892
- Fixed computed style swatch
- Removed color: caption
- Rendered value as source code, user-selectable
- Removed scroller gap
Reviewed by Yury Semikhatsky.
* English.lproj/localizedStrings.js:
* inspector/front-end/Popover.js:
(WebInspector.Popover.prototype.setCanShrink):
(WebInspector.Popover.prototype._positionElement):
* inspector/front-end/Spectrum.js:
* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylePropertyTreeElement.prototype._resetMouseDownElement):
(WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
* inspector/front-end/elementsPanel.css:
(.spectrum-container):
(.spectrum-display-value):
(.spectrum-range-container):
* inspector/front-end/popover.css:
(.popover .content.fixed-height):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (108064 => 108065)
--- trunk/Source/WebCore/ChangeLog 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/ChangeLog 2012-02-17 13:14:12 UTC (rev 108065)
@@ -1,5 +1,32 @@
2012-02-17 Pavel Feldman <pfeld...@google.com>
+ Web Inspector: a bit of color picker polish
+ https://bugs.webkit.org/show_bug.cgi?id=78892
+
+ - Fixed computed style swatch
+ - Removed color: caption
+ - Rendered value as source code, user-selectable
+ - Removed scroller gap
+
+ Reviewed by Yury Semikhatsky.
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/Popover.js:
+ (WebInspector.Popover.prototype.setCanShrink):
+ (WebInspector.Popover.prototype._positionElement):
+ * inspector/front-end/Spectrum.js:
+ * inspector/front-end/StylesSidebarPane.js:
+ (WebInspector.StylePropertyTreeElement.prototype._resetMouseDownElement):
+ (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
+ * inspector/front-end/elementsPanel.css:
+ (.spectrum-container):
+ (.spectrum-display-value):
+ (.spectrum-range-container):
+ * inspector/front-end/popover.css:
+ (.popover .content.fixed-height):
+
+2012-02-17 Pavel Feldman <pfeld...@google.com>
+
Web Inspector: color picker does not allow changing the color.
https://bugs.webkit.org/show_bug.cgi?id=78886
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js
(Binary files differ)
Modified: trunk/Source/WebCore/inspector/front-end/Popover.js (108064 => 108065)
--- trunk/Source/WebCore/inspector/front-end/Popover.js 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/inspector/front-end/Popover.js 2012-02-17 13:14:12 UTC (rev 108065)
@@ -107,12 +107,13 @@
setCanShrink: function(canShrink)
{
this._hasFixedHeight = !canShrink;
+ this._contentDiv.addStyleClass("fixed-height");
},
_positionElement: function(anchorElement, preferredWidth, preferredHeight)
{
const borderWidth = 25;
- const scrollerWidth = 11;
+ const scrollerWidth = this._hasFixedHeight ? 0 : 11;
const arrowHeight = 15;
const arrowOffset = 10;
const borderRadius = 10;
Modified: trunk/Source/WebCore/inspector/front-end/Spectrum.js (108064 => 108065)
--- trunk/Source/WebCore/inspector/front-end/Spectrum.js 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/inspector/front-end/Spectrum.js 2012-02-17 13:14:12 UTC (rev 108065)
@@ -63,15 +63,10 @@
swatchElement.className = "swatch";
this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
- var displayContainer = rangeContainer.createChild("div");
-
- var colorLabel = displayContainer.createChild("label");
- colorLabel.textContent = WebInspector.UIString("color: ");
-
+ var displayContainer = this._containerElement.createChild("div");
displayContainer.appendChild(swatchElement);
+ this._displayElement = displayContainer.createChild("span", "source-code spectrum-display-value");
- this._displayElement = displayContainer.createChild("span");
-
WebInspector.Spectrum.draggable(this._sliderElement, hueDrag.bind(this));
WebInspector.Spectrum.draggable(this._draggerElement, colorDrag.bind(this));
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (108064 => 108065)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-02-17 13:14:12 UTC (rev 108065)
@@ -1603,9 +1603,11 @@
_resetMouseDownElement: function()
{
- delete this._parentPane._mouseDownTreeElement;
- delete this._parentPane._mouseDownTreeElementIsName;
- delete this._parentPane._mouseDownTreeElementIsValue;
+ if (this._parentPane) {
+ delete this._parentPane._mouseDownTreeElement;
+ delete this._parentPane._mouseDownTreeElementIsName;
+ delete this._parentPane._mouseDownTreeElementIsValue;
+ }
},
updateTitle: function()
@@ -1690,7 +1692,8 @@
}
var format = getFormat();
- var spectrum = self._parentPane._spectrum;
+ var hasSpectrum = self._parentPane;
+ var spectrum = hasSpectrum ? self._parentPane._spectrum : null;
var swatchElement = document.createElement("span");
var swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
@@ -1704,7 +1707,7 @@
swatchInnerElement.style.backgroundColor = text;
- var scrollerElement = self._parentPane._computedStylePane.element.parentElement;
+ var scrollerElement = hasSpectrum ? self._parentPane._computedStylePane.element.parentElement : null;
function spectrumChanged(e)
{
@@ -1738,7 +1741,7 @@
{
// Shift + click toggles color formats.
// Click opens colorpicker, only if the element is not in computed styles section.
- if (e.shiftKey)
+ if (!spectrum || e.shiftKey)
changeColorDisplay(e);
else {
var isVisible = spectrum.toggle(swatchElement, color, format);
Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (108064 => 108065)
--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-02-17 13:14:12 UTC (rev 108065)
@@ -536,7 +536,7 @@
background: rgba(230, 230, 230, 1) !important;
border: 1px solid #646464;
padding: 10px;
- width: 200px;
+ width: 210px;
z-index: 10;
-webkit-user-select: none;
}
@@ -555,6 +555,10 @@
right: 20%;
}
+.spectrum-display-value {
+ -webkit-user-select: text;
+}
+
.spectrum-hue {
position: absolute;
top: 0;
@@ -570,7 +574,7 @@
.spectrum-range-container {
position: relative;
- padding-top: 10px;
+ padding-bottom: 5px;
}
.spectrum-range-container * {
Modified: trunk/Source/WebCore/inspector/front-end/popover.css (108064 => 108065)
--- trunk/Source/WebCore/inspector/front-end/popover.css 2012-02-17 13:14:03 UTC (rev 108064)
+++ trunk/Source/WebCore/inspector/front-end/popover.css 2012-02-17 13:14:12 UTC (rev 108065)
@@ -17,6 +17,10 @@
-webkit-user-select: text;
}
+.popover .content.fixed-height {
+ overflow: hidden;
+}
+
.popover .arrow {
position: absolute;
background-image: url(Images/popoverArrows.png);
