<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196266] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196266">196266</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-08 11:49:52 -0800 (Mon, 08 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>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+webkit@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 (<a href="http://trac.webkit.org/projects/webkit/changeset/196146">r196146</a>), but added another check to ensure that the
CSS property exists before checking to see if it has an invalid value.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (196265 => 196266)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,47 @@
</span><ins>+2016-02-08 Devin Rousso <dcrousso+webkit@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.
+
</ins><span class="cx"> 2016-02-08 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: WebInspector.Setting should have a "reset" method
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css (196265 => 196266)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -30,26 +30,17 @@
</span><span class="cx"> .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container {
</span><span class="cx"> border: 1px solid hsl(0, 0%, 83%);
</span><span class="cx"> overflow: auto;
</span><del>- font-size: 11px;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list {
</span><span class="cx"> min-height: 51px;
</span><span class="cx"> max-height: 94px;
</span><del>- margin: 0;
- padding: 0;
</del><span class="cx"> background-color: hsl(0, 0%, 95%);
</span><del>- overflow: auto;
- outline: none;
- list-style-type: none;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .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 {
</span><span class="cx"> position: relative;
</span><del>- width: 100%;
</del><span class="cx"> height: 17px;
</span><del>- line-height: 17px;
- overflow: hidden;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .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) {
</span><span class="lines">@@ -75,13 +66,13 @@
</span><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> left: 5px;
</span><del>- margin: 0;
</del><span class="cx"> padding: 0;
</span><span class="cx"> line-height: 17px;
</span><ins>+ font-family: inherit;
+ font-size: inherit;
+ color: white;
</ins><span class="cx"> border: none;
</span><span class="cx"> background-color: transparent;
</span><del>- font-family: inherit;
- color: white;
</del><span class="cx"> z-index: 1;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -89,11 +80,20 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.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;
+}
+
</ins><span class="cx"> .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 {
</span><span class="cx"> font-size: 9px;
</span><span class="cx"> color: hsl(0, 0%, 83%);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.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;
+}
+
</ins><span class="cx"> .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 {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleCommaSeparatedKeywordEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js (196265 => 196266)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -125,6 +125,20 @@
</span><span class="cx"> return this.value || null;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ 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";
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _generateTextFromLonghandProperties()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleDetailsPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (196265 => 196266)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -205,12 +205,16 @@
</span><span class="cx"> group.section.element.classList.toggle("has-set-property", groupHasSetProperty);
</span><span class="cx"> this._sectionModified(group);
</span><span class="cx">
</span><del>- let autocompleteCompatibleProperties = group.autocompleteCompatibleProperties;
- if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length)
- return;
</del><ins>+ if (group.autocompleteCompatibleProperties) {
+ for (let editor of group.autocompleteCompatibleProperties)
+ this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+ }
</ins><span class="cx">
</span><del>- for (let editor of autocompleteCompatibleProperties)
- this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
</del><ins>+ if (group.specifiedWidthProperties) {
+ let width = this.element.realOffsetWidth;
+ for (let editor of group.specifiedWidthProperties)
+ editor.specifiedWidth = width;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _updateAutocompleteCompatiblePropertyEditor(editor, force)
</span><span class="lines">@@ -713,6 +717,7 @@
</span><span class="cx"> fontStyleRow.element.appendChild(properties.fontFeatureSettings.element);
</span><span class="cx">
</span><span class="cx"> group.autocompleteCompatibleProperties = [properties.fontFamily];
</span><ins>+ group.specifiedWidthProperties = [properties.fontFamily];
</ins><span class="cx">
</span><span class="cx"> let fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
</span><span class="cx"> this._populateSection(group, [fontGroup]);
</span><span class="lines">@@ -902,6 +907,7 @@
</span><span class="cx"> properties.background.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
</span><span class="cx">
</span><span class="cx"> group.autocompleteCompatibleProperties = [properties.backgroundColor];
</span><ins>+ group.specifiedWidthProperties = [properties.background];
</ins><span class="cx">
</span><span class="cx"> let backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundClipRow, backgroundSizeRow, backgroundRow, backgroundImageRow, backgroundPositionRow, backgroundRepeatRow]);
</span><span class="cx"> this._populateSection(group, [backgroundStyleGroup]);
</span><span class="lines">@@ -1194,6 +1200,7 @@
</span><span class="cx"> properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
</span><span class="cx">
</span><span class="cx"> group.autocompleteCompatibleProperties = [boxShadowColor];
</span><ins>+ group.specifiedWidthProperties = [properties.boxShadow];
</ins><span class="cx">
</span><span class="cx"> let boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
</span><span class="cx"> this._populateSection(group, [boxShadow]);
</span><span class="lines">@@ -1273,6 +1280,7 @@
</span><span class="cx"> properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
</span><span class="cx">
</span><span class="cx"> group.autocompleteCompatibleProperties = [transitionProperty];
</span><ins>+ group.specifiedWidthProperties = [properties.transition];
</ins><span class="cx">
</span><span class="cx"> let transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
</span><span class="cx"> this._populateSection(group, [transitionGroup]);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (196265 => 196266)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -290,7 +290,7 @@
</span><span class="cx"> if (!propertyMissing && property && property.anonymous)
</span><span class="cx"> this._representedProperty = property;
</span><span class="cx">
</span><del>- if (!propertyMissing && !property.valid) {
</del><ins>+ if (!propertyMissing && property && !property.valid) {
</ins><span class="cx"> this._warningElement.classList.add("invalid-value");
</span><span class="cx"> this._warningElement.title = WebInspector.UIString("The value “%s” is not supported for this property.").format(propertyText);
</span><span class="cx"> this.specialPropertyPlaceholderElementText = propertyText;
</span></span></pre>
</div>
</div>
</body>
</html>