Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188489 => 188490)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 22:04:56 UTC (rev 188490)
@@ -1,5 +1,62 @@
2015-08-14 Devin Rousso <[email protected]>
+ Web Inspector: Style changes to Visual sidebar editors
+ https://bugs.webkit.org/show_bug.cgi?id=148021
+
+ Reviewed by Brian Burg.
+
+ Various style fixes and feature enhancements in some of the Visual style property editors.
+
+ * UserInterface/Views/VisualStyleColorPicker.css:
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input):
+ (.visual-style-property-container.input-color-picker.multiple > .visual-style-property-value-container > .visual-style-multiple-property-placeholder):
+
+ * UserInterface/Views/VisualStyleKeywordCheckbox.css:
+ (.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input):
+ (.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input::before):
+ (.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input): Deleted.
+ (.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > div): Deleted.
+ Replaced the SVG image before the checkbox with a :before pseudo-element with content.
+
+ * UserInterface/Views/VisualStyleKeywordCheckbox.js:
+ (WebInspector.VisualStyleKeywordCheckbox):
+ Removed the SVG image before the checkbox.
+
+ * UserInterface/Views/VisualStyleKeywordPicker.js:
+ (WebInspector.VisualStyleKeywordPicker.prototype.get value):
+ (WebInspector.VisualStyleKeywordPicker.prototype.set value):
+ (WebInspector.VisualStyleKeywordPicker.prototype.set placeholder):
+ (WebInspector.VisualStyleKeywordPicker.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleKeywordPicker.prototype._getValue):
+ (WebInspector.VisualStyleKeywordPicker.prototype._setValue):
+ (WebInspector.VisualStyleKeywordPicker.prototype._generateSynthesizedValue):
+ (WebInspector.VisualStyleKeywordPicker.prototype._handleKeywordChanged):
+ Due to a current bug (https://webkit.org/b/147064), you cannot extend ES6 getters/setters. In order to work
+ around this, a member function was added that performs the same action as the getter/setter, but can be extended.
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.css:
+ (.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon):
+
+ * UserInterface/Views/VisualStyleRelativeNumberSlider.js:
+ (WebInspector.VisualStyleRelativeNumberSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._resetSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._sliderChanged):
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.css:
+ (.item.visual-style-selector-item > input[type="checkbox"]):
+ (.item.visual-style-selector-item.selected > input[type="checkbox"]::before):
+ (.item.visual-style-selector-item.modified > .icon):
+ (.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus):
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.js:
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleContextMenuEvent):
+ (WebInspector.VisualStyleSelectorTreeItem.prototype._handleMainTitleMouseDown):
+ Added another context menu item to show the source location for the selected rule.
+
+2015-08-14 Devin Rousso <[email protected]>
+
Web Inspector: Add visual editors for CSS properties
https://bugs.webkit.org/show_bug.cgi?id=147576
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2015-08-14 22:04:56 UTC (rev 188490)
@@ -40,7 +40,7 @@
/* Make a checkered background for transparent colors to show against. */
background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
- background-color: hsl(0, 100%, 100%);
+ background-color: white;
background-size: 50%;
background-position: top left, bottom right;
background-repeat: no-repeat;
@@ -73,7 +73,7 @@
border-bottom-right-radius: 4px;
border: solid 1px hsl(0, 0%, 83%);
border-left: none;
- text-align: right;
+ text-align: left;
font-size: 10px;
}
@@ -81,5 +81,5 @@
width: calc(100% - 20px);
left: 18px;
padding-right: 3px;
- text-align: right;
+ text-align: left;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css 2015-08-14 22:04:56 UTC (rev 188490)
@@ -29,13 +29,20 @@
}
.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input {
- order: 1;
- position: absolute;
- top: 4px;
width: auto;
}
-.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > div {
- width: 18px;
- margin: 0 2px;
+/* Font Variant */
+.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input {
+ margin-left: 47px;
}
+
+.visual-style-property-container.keyword-checkbox.font-variant > .visual-style-property-value-container > input::before {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ font-size: 9px;
+ font-variant: small-caps;
+ word-spacing: -2px;
+ content: "Small Caps";
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js 2015-08-14 22:04:56 UTC (rev 188490)
@@ -25,22 +25,16 @@
WebInspector.VisualStyleKeywordCheckbox = class VisualStyleKeywordCheckbox extends WebInspector.VisualStylePropertyEditor
{
- constructor(propertyNames, text, value, checkboxImage, layoutReversed)
+ constructor(propertyNames, text, value, layoutReversed)
{
super(propertyNames, text, null, null, "keyword-checkbox", layoutReversed);
- this._value = value || null;
-
this._checkboxElement = document.createElement("input");
this._checkboxElement.type = "checkbox";
this._checkboxElement.addEventListener("change", this._valueDidChange.bind(this));
this.contentElement.appendChild(this._checkboxElement);
- if (checkboxImage) {
- wrappedSVGDocument(checkboxImage, null, value, function(wrapper) {
- this.contentElement.appendChild(wrapper);
- }.bind(this));
- }
+ this._value = value.toLowerCase().replace(/\s/g, "-") || null;
}
// Public
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js 2015-08-14 22:04:56 UTC (rev 188490)
@@ -53,21 +53,14 @@
get value()
{
- return this._keywordSelectElement.value;
+ // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+ return this._getValue();
}
set value(value)
{
- if (this._updatedValues.propertyMissing || !this.valueIsSupportedKeyword(value))
- return;
-
- if (value === this.value)
- return;
-
- if (this._valueIsSupportedAdvancedKeyword(value))
- this._addAdvancedValues();
-
- this._keywordSelectElement.value = value;
+ // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+ this._setValue(value);
}
set placeholder(placeholder)
@@ -75,16 +68,13 @@
if (this._updatedValues.conflictingValues)
return;
- this.specialPropertyPlaceholderElement.textContent = this._keyForKeyword(placeholder) || placeholder;
+ this.specialPropertyPlaceholderElement.textContent = this._canonicalizedKeywordForKey(placeholder) || placeholder;
}
get synthesizedValue()
{
- let value = this._keywordSelectElement.value;
- if (!value || !value.length)
- return null;
-
- return value;
+ // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+ return this._generateSynthesizedValue();
}
updateEditorValues(updatedValues)
@@ -99,14 +89,42 @@
// Private
- _handleKeywordChanged()
+ _getValue()
{
- this._valueDidChange();
+ return this._keywordSelectElement.value;
+ }
- if (this._keywordSelectElement.contains(this._unchangedOptionElement) && this._unchangedOptionElement.selected)
+ _setValue(value)
+ {
+ if (!value || !value.length) {
+ this._unchangedOptionElement.selected = true;
this.specialPropertyPlaceholderElement.hidden = false;
+ return;
+ }
+
+ if (this._updatedValues.propertyMissing || !this.valueIsSupportedKeyword(value))
+ return;
+
+ if (value === this._keywordSelectElement.value)
+ return;
+
+ if (this._valueIsSupportedAdvancedKeyword(value))
+ this._addAdvancedValues();
+
+ this._keywordSelectElement.value = value;
}
+ _generateSynthesizedValue()
+ {
+ return this._unchangedOptionElement.selected ? null : this._keywordSelectElement.value;
+ }
+
+ _handleKeywordChanged()
+ {
+ this._valueDidChange();
+ this.specialPropertyPlaceholderElement.hidden = !this._unchangedOptionElement.selected;
+ }
+
_keywordSelectMouseDown(event)
{
if (event.altKey)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-08-14 22:04:56 UTC (rev 188490)
@@ -71,7 +71,7 @@
}
.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border {
- border-top: 1px solid hsl(0, 0, 0);
+ border-top: 1px solid black;
}
.visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
@@ -106,7 +106,7 @@
.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon {
position: relative;
- background-color: hsl(0, 100%, 100%);
+ background-color: white;
z-index: 1;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js 2015-08-14 22:04:56 UTC (rev 188490)
@@ -37,8 +37,8 @@
this._sliderElement.addEventListener("input", this._sliderChanged.bind(this));
this._element.appendChild(this._sliderElement);
- this._startingValue = null;
- this._scale = 100;
+ this._startingValue = 0;
+ this._scale = 200;
}
// Public
@@ -62,15 +62,16 @@
if (isNaN(this._startingValue))
this._startingValue = parseFloat(this.placeholder) || 0;
- let origin = this._scale / 2;
- if (this._allowNegativeValues || this._startingValue > origin) {
- this._sliderElement.min = -origin;
- this._sliderElement.max = origin;
+ let midpoint = this._scale / 2;
+ if (this._allowNegativeValues || this._startingValue > midpoint) {
+ this._sliderElement.min = -midpoint;
+ this._sliderElement.max = midpoint;
this._sliderElement.value = 0;
} else {
this._sliderElement.min = 0;
this._sliderElement.max = this._scale;
this._sliderElement.value = this._startingValue;
+ this._startingValue = 0;
}
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css 2015-08-14 22:04:56 UTC (rev 188490)
@@ -34,7 +34,7 @@
.item.visual-style-selector-item.selected {
background-color: hsl(213, 92%, 55%) !important;
- color: hsl(0, 100%, 100%);
+ color: white;
}
.item.visual-style-selector-item > .disclosure-button {
@@ -42,9 +42,21 @@
}
.item.visual-style-selector-item > input[type="checkbox"] {
+ position: relative;
margin: 4.5px 0 4px 5px;
}
+.item.visual-style-selector-item.selected > input[type="checkbox"]::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid white;
+ border-radius: 3px;
+ content: "";
+}
+
.item.visual-style-selector-item > .icon {
width: 16px;
height: 16px;
@@ -52,7 +64,7 @@
}
.item.visual-style-selector-item.modified > .icon {
- -webkit-filter: brightness(0.75);
+ filter: brightness(0.75);
}
.item.visual-style-selector-item.selector-invalid > .icon {
@@ -96,7 +108,7 @@
.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus {
color: black;
- background-color: hsl(0, 100%, 100%);
+ background-color: white;
border-radius: 2px;
box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(0, 100%, 100%, 0.3);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js (188489 => 188490)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2015-08-14 22:01:34 UTC (rev 188489)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js 2015-08-14 22:04:56 UTC (rev 188490)
@@ -134,8 +134,18 @@
{
let contextMenu = new WebInspector.ContextMenu(event);
+ if (this.representedObject.ownerRule) {
+ contextMenu.appendItem(WebInspector.UIString("Show Source"), function() {
+ if (event.metaKey)
+ WebInspector.showOriginalUnformattedSourceCodeLocation(this.representedObject.ownerRule.sourceCodeLocation);
+ else
+ WebInspector.showSourceCodeLocation(this.representedObject.ownerRule.sourceCodeLocation);
+ }.bind(this));
+ }
+
contextMenu.appendItem(WebInspector.UIString("Copy Rule"), function() {
- InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString());
+ let selectorText = !this.representedObject.ownerRule ? this.representedObject.node.appropriateSelectorFor(true) : null;
+ InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString(selectorText));
}.bind(this));
contextMenu.appendItem(WebInspector.UIString("Reset"), function() {
@@ -162,6 +172,9 @@
_handleMainTitleMouseDown(event)
{
+ if (event.button !== 0 || event.ctrlKey)
+ return;
+
this._listItemNode.classList.toggle("editable", this.selected);
}
