- Revision
- 196266
- Author
- commit-qu...@webkit.org
- Date
- 2016-02-08 11:49:52 -0800 (Mon, 08 Feb 2016)
Log Message
Web Inspector: Long values for comma separated CSS properties overflow the Visual sidebar area
https://bugs.webkit.org/show_bug.cgi?id=153890
<rdar://problem/24510216>
Patch by Devin Rousso <dcrousso+web...@gmail.com> on 2016-02-08
Reviewed by Timothy Hatcher.
For especially long values in comma-separated CSS properties (such as
background-image), the text will not be clipped as expected due to the
way in which the width is calculated for the element (the value, inside
the title element, is the only child with a specified width other than
100%). This overflowing causes the width of the section containing that
property to expand, pushing content outside of the inspector window. To
remedy this, a specified width is set on the relevant properties based
on the width of the sidebar to ensure proper text clipping.
* UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css:
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle):
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container): Deleted.
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list): Deleted.
(.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item): Deleted.
* UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
(WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set specifiedWidth):
Calculates the necessary subtractions from the given width value based on
the margins and size of sibling elements.
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
(WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
Added another list to each group which, if set, will pass the current
sidebar width to all contained property editors.
* UserInterface/Views/VisualStylePropertyEditor.js:
(WebInspector.VisualStylePropertyEditor.prototype.update):
Somewhat unrelated (r196146), but added another check to ensure that the
CSS property exists before checking to see if it has an invalid value.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (196265 => 196266)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-08 19:42:42 UTC (rev 196265)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-08 19:49:52 UTC (rev 196266)
@@ -1,3 +1,47 @@
+2016-02-08 Devin Rousso <dcrousso+web...@gmail.com>
+
+ Web Inspector: Long values for comma separated CSS properties overflow the Visual sidebar area
+ https://bugs.webkit.org/show_bug.cgi?id=153890
+ <rdar://problem/24510216>
+
+ Reviewed by Timothy Hatcher.
+
+ For especially long values in comma-separated CSS properties (such as
+ background-image), the text will not be clipped as expected due to the
+ way in which the width is calculated for the element (the value, inside
+ the title element, is the only child with a specified width other than
+ 100%). This overflowing causes the width of the section containing that
+ property to expand, pushing content outside of the inspector window. To
+ remedy this, a specified width is set on the relevant properties based
+ on the width of the sidebar to ensure proper text clipping.
+
+ * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css:
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor):
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles):
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle):
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container): Deleted.
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list): Deleted.
+ (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item): Deleted.
+
+ * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:
+ (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set specifiedWidth):
+ Calculates the necessary subtractions from the given width value based on
+ the margins and size of sibling elements.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection):
+ (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection):
+ Added another list to each group which, if set, will pass the current
+ sidebar width to all contained property editors.
+
+ * UserInterface/Views/VisualStylePropertyEditor.js:
+ (WebInspector.VisualStylePropertyEditor.prototype.update):
+ Somewhat unrelated (r196146), but added another check to ensure that the
+ CSS property exists before checking to see if it has an invalid value.
+
2016-02-08 Matt Baker <mattba...@apple.com>
Web Inspector: WebInspector.Setting should have a "reset" method
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css (196265 => 196266)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css 2016-02-08 19:42:42 UTC (rev 196265)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css 2016-02-08 19:49:52 UTC (rev 196266)
@@ -30,26 +30,17 @@
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container {
border: 1px solid hsl(0, 0%, 83%);
overflow: auto;
- font-size: 11px;
}
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list {
min-height: 51px;
max-height: 94px;
- margin: 0;
- padding: 0;
background-color: hsl(0, 0%, 95%);
- overflow: auto;
- outline: none;
- list-style-type: none;
}
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item {
position: relative;
- width: 100%;
height: 17px;
- line-height: 17px;
- overflow: hidden;
}
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:nth-child(odd) {
@@ -75,13 +66,13 @@
right: 0;
bottom: 0;
left: 5px;
- margin: 0;
padding: 0;
line-height: 17px;
+ font-family: inherit;
+ font-size: inherit;
+ color: white;
border: none;
background-color: transparent;
- font-family: inherit;
- color: white;
z-index: 1;
}
@@ -89,11 +80,20 @@
display: none;
}
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles {
+ top: 1px;
+ line-height: 15px;
+}
+
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
font-size: 9px;
color: hsl(0, 0%, 83%);
}
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
+ content: none;
+}
+
.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:not(.no-value) > .titles > .subtitle {
display: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js (196265 => 196266)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js 2016-02-08 19:42:42 UTC (rev 196265)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js 2016-02-08 19:49:52 UTC (rev 196266)
@@ -125,6 +125,20 @@
return this.value || null;
}
+ set specifiedWidth(value)
+ {
+ if (this._titleElement) {
+ // 55px width and 4px margin on left and right for title element,
+ // plus the 11px margin right on the content element
+ value -= 74;
+ } else {
+ // 11px margin on left and right of the content element
+ value -= 22;
+ }
+
+ this.contentElement.style.width = Math.max(value, 0) + "px";
+ }
+
// Private
_generateTextFromLonghandProperties()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (196265 => 196266)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-02-08 19:42:42 UTC (rev 196265)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-02-08 19:49:52 UTC (rev 196266)
@@ -205,12 +205,16 @@
group.section.element.classList.toggle("has-set-property", groupHasSetProperty);
this._sectionModified(group);
- let autocompleteCompatibleProperties = group.autocompleteCompatibleProperties;
- if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length)
- return;
+ if (group.autocompleteCompatibleProperties) {
+ for (let editor of group.autocompleteCompatibleProperties)
+ this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+ }
- for (let editor of autocompleteCompatibleProperties)
- this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+ if (group.specifiedWidthProperties) {
+ let width = this.element.realOffsetWidth;
+ for (let editor of group.specifiedWidthProperties)
+ editor.specifiedWidth = width;
+ }
}
_updateAutocompleteCompatiblePropertyEditor(editor, force)
@@ -713,6 +717,7 @@
fontStyleRow.element.appendChild(properties.fontFeatureSettings.element);
group.autocompleteCompatibleProperties = [properties.fontFamily];
+ group.specifiedWidthProperties = [properties.fontFamily];
let fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
this._populateSection(group, [fontGroup]);
@@ -902,6 +907,7 @@
properties.background.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
group.autocompleteCompatibleProperties = [properties.backgroundColor];
+ group.specifiedWidthProperties = [properties.background];
let backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundClipRow, backgroundSizeRow, backgroundRow, backgroundImageRow, backgroundPositionRow, backgroundRepeatRow]);
this._populateSection(group, [backgroundStyleGroup]);
@@ -1194,6 +1200,7 @@
properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
group.autocompleteCompatibleProperties = [boxShadowColor];
+ group.specifiedWidthProperties = [properties.boxShadow];
let boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
this._populateSection(group, [boxShadow]);
@@ -1273,6 +1280,7 @@
properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
group.autocompleteCompatibleProperties = [transitionProperty];
+ group.specifiedWidthProperties = [properties.transition];
let transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
this._populateSection(group, [transitionGroup]);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (196265 => 196266)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-02-08 19:42:42 UTC (rev 196265)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2016-02-08 19:49:52 UTC (rev 196266)
@@ -290,7 +290,7 @@
if (!propertyMissing && property && property.anonymous)
this._representedProperty = property;
- if (!propertyMissing && !property.valid) {
+ if (!propertyMissing && property && !property.valid) {
this._warningElement.classList.add("invalid-value");
this._warningElement.title = WebInspector.UIString("The value “%s” is not supported for this property.").format(propertyText);
this.specialPropertyPlaceholderElementText = propertyText;
