Diff
Modified: trunk/Source/WebCore/ChangeLog (133581 => 133582)
--- trunk/Source/WebCore/ChangeLog 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/ChangeLog 2012-11-06 12:00:48 UTC (rev 133582)
@@ -1,3 +1,75 @@
+2012-11-05 Pavel Feldman <[email protected]>
+
+ 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 <[email protected]>
removeAttribute('style') not working in certain circumstances
Modified: trunk/Source/WebCore/WebCore.gypi (133581 => 133582)
--- trunk/Source/WebCore/WebCore.gypi 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/WebCore.gypi 2012-11-06 12:00:48 UTC (rev 133582)
@@ -6502,6 +6502,7 @@
'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)',
],
Modified: trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj (133581 => 133582)
--- trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/WebCore.vcproj/WebCore.vcproj 2012-11-06 12:00:48 UTC (rev 133582)
@@ -76682,6 +76682,10 @@
>
</File>
<File
+ RelativePath="..\inspector\front-end\spectrum.css"
+ >
+ </File>
+ <File
RelativePath="..\inspector\front-end\splitView.css"
>
</File>
Modified: trunk/Source/WebCore/inspector/front-end/DOMExtension.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/DOMExtension.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/DOMExtension.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -166,10 +166,21 @@
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 @@
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)
Modified: trunk/Source/WebCore/inspector/front-end/HeapSnapshotView.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/HeapSnapshotView.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/HeapSnapshotView.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -216,7 +216,7 @@
{
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 @@
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);
Modified: trunk/Source/WebCore/inspector/front-end/Popover.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/Popover.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/Popover.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -30,11 +30,13 @@
/**
* @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 @@
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(contentElement, anchor, preferredWidth, 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
+ */
+ _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;
+ var preferredSize = view ? view.measurePreferredSize() : this.contentElement.measurePreferredSize();
+ preferredWidth = preferredWidth || preferredSize.width;
+ preferredHeight = preferredHeight || preferredSize.height;
- this._contentDiv.appendChild(this.contentElement);
- this.element.appendChild(this._contentDiv);
- document.body.appendChild(this.element);
+ 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,18 +113,10 @@
hide: function()
{
- if (WebInspector.Popover._popoverElement) {
- delete WebInspector.Popover._popoverElement;
- document.body.removeChild(this.element);
- }
- this._visible = false;
+ this.detach();
+ delete WebInspector.Popover._popover;
},
- get visible()
- {
- return this._visible;
- },
-
get disposed()
{
return this._disposed;
@@ -101,7 +124,7 @@
dispose: function()
{
- if (this.visible)
+ if (this.isShowing())
this.hide();
this._disposed = true;
},
@@ -187,7 +210,9 @@
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
}
/**
Modified: trunk/Source/WebCore/inspector/front-end/Spectrum.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/Spectrum.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/Spectrum.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -28,20 +28,17 @@
/**
* @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 @@
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 @@
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 @@
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 @@
this._displayElement.textContent = text;
},
- get visible()
- {
- return this._popover.visible;
- },
-
_onchange: function()
{
this._updateUI();
@@ -378,43 +367,76 @@
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 @@
{
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 @@
__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;
+ }
+}
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -93,7 +93,7 @@
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 @@
update: function(node, forceUpdate)
{
- if (this._spectrum.visible)
- this._spectrum.hide(false);
+ this._spectrumHelper.hide();
var refresh = false;
@@ -795,8 +794,7 @@
willHide: function()
{
- if (this._spectrum.visible)
- this._spectrum.hide(false);
+ this._spectrumHelper.hide();
},
__proto__: WebInspector.SidebarPane.prototype
@@ -1769,32 +1767,21 @@
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");
+ var colorSwatch = new WebInspector.ColorSwatch();
+ colorSwatch.setColorString(text);
+ colorSwatch.element.addEventListener("click", swatchClick, false);
- swatchElement.className = "swatch";
-
- swatchElement.addEventListener("mousedown", consumeEvent, false);
- swatchElement.addEventListener("click", swatchClick, false);
- swatchElement.addEventListener("dblclick", consumeEvent, false);
-
- swatchInnerElement.style.backgroundColor = text;
-
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 @@
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 @@
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 @@
}
var container = document.createElement("nobr");
- container.appendChild(swatchElement);
+ container.appendChild(colorSwatch.element);
container.appendChild(colorValueElement);
return container;
}
Modified: trunk/Source/WebCore/inspector/front-end/View.js (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/View.js 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/View.js 2012-11-06 12:00:48 UTC (rev 133582)
@@ -360,6 +360,21 @@
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
}
Modified: trunk/Source/WebCore/inspector/front-end/WebKit.qrc (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/WebKit.qrc 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/WebKit.qrc 2012-11-06 12:00:48 UTC (rev 133582)
@@ -242,6 +242,7 @@
<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>
Modified: trunk/Source/WebCore/inspector/front-end/elementsPanel.css (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/elementsPanel.css 2012-11-06 12:00:48 UTC (rev 133582)
@@ -516,118 +516,3 @@
-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;
-}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (133581 => 133582)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2012-11-06 11:33:07 UTC (rev 133581)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2012-11-06 12:00:48 UTC (rev 133582)
@@ -1700,19 +1700,18 @@
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);
}
Added: trunk/Source/WebCore/inspector/front-end/spectrum.css (0 => 133582)
--- trunk/Source/WebCore/inspector/front-end/spectrum.css (rev 0)
+++ trunk/Source/WebCore/inspector/front-end/spectrum.css 2012-11-06 12:00:48 UTC (rev 133582)
@@ -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;
+}
Property changes on: trunk/Source/WebCore/inspector/front-end/spectrum.css
___________________________________________________________________
Added: svn:eol-style
