Changeset 196266 in webkit
- Timestamp:
- Feb 8, 2016 11:49:52 AM (8 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r196255 r196266 1 2016-02-08 Devin Rousso <dcrousso+webkit@gmail.com> 2 3 Web Inspector: Long values for comma separated CSS properties overflow the Visual sidebar area 4 https://bugs.webkit.org/show_bug.cgi?id=153890 5 <rdar://problem/24510216> 6 7 Reviewed by Timothy Hatcher. 8 9 For especially long values in comma-separated CSS properties (such as 10 background-image), the text will not be clipped as expected due to the 11 way in which the width is calculated for the element (the value, inside 12 the title element, is the only child with a specified width other than 13 100%). This overflowing causes the width of the section containing that 14 property to expand, pushing content outside of the inspector window. To 15 remedy this, a specified width is set on the relevant properties based 16 on the width of the sidebar to ensure proper text clipping. 17 18 * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css: 19 (.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): 20 (.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): 21 (.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): 22 (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container): Deleted. 23 (.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list): Deleted. 24 (.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. 25 26 * UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js: 27 (WebInspector.VisualStyleCommaSeparatedKeywordEditor.prototype.set specifiedWidth): 28 Calculates the necessary subtractions from the given width value based on 29 the margins and size of sibling elements. 30 31 * UserInterface/Views/VisualStyleDetailsPanel.js: 32 (WebInspector.VisualStyleDetailsPanel.prototype._updateProperties): 33 (WebInspector.VisualStyleDetailsPanel.prototype._populateFontSection): 34 (WebInspector.VisualStyleDetailsPanel.prototype._populateBackgroundStyleSection): 35 (WebInspector.VisualStyleDetailsPanel.prototype._populateBoxShadowSection): 36 (WebInspector.VisualStyleDetailsPanel.prototype._populateTransitionSection): 37 Added another list to each group which, if set, will pass the current 38 sidebar width to all contained property editors. 39 40 * UserInterface/Views/VisualStylePropertyEditor.js: 41 (WebInspector.VisualStylePropertyEditor.prototype.update): 42 Somewhat unrelated (r196146), but added another check to ensure that the 43 CSS property exists before checking to see if it has an invalid value. 44 1 45 2016-02-08 Matt Baker <mattbaker@apple.com> 2 46 -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css
r195706 r196266 31 31 border: 1px solid hsl(0, 0%, 83%); 32 32 overflow: auto; 33 font-size: 11px;34 33 } 35 34 … … 37 36 min-height: 51px; 38 37 max-height: 94px; 39 margin: 0;40 padding: 0;41 38 background-color: hsl(0, 0%, 95%); 42 overflow: auto;43 outline: none;44 list-style-type: none;45 39 } 46 40 47 41 .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 { 48 42 position: relative; 49 width: 100%;50 43 height: 17px; 51 line-height: 17px;52 overflow: hidden;53 44 } 54 45 … … 76 67 bottom: 0; 77 68 left: 5px; 78 margin: 0;79 69 padding: 0; 80 70 line-height: 17px; 71 font-family: inherit; 72 font-size: inherit; 73 color: white; 81 74 border: none; 82 75 background-color: transparent; 83 font-family: inherit;84 color: white;85 76 z-index: 1; 86 77 } … … 90 81 } 91 82 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 { 84 top: 1px; 85 line-height: 15px; 86 } 87 92 88 .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 { 93 89 font-size: 9px; 94 90 color: hsl(0, 0%, 83%); 91 } 92 93 .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 { 94 content: none; 95 95 } 96 96 -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js
r194539 r196266 126 126 } 127 127 128 set specifiedWidth(value) 129 { 130 if (this._titleElement) { 131 // 55px width and 4px margin on left and right for title element, 132 // plus the 11px margin right on the content element 133 value -= 74; 134 } else { 135 // 11px margin on left and right of the content element 136 value -= 22; 137 } 138 139 this.contentElement.style.width = Math.max(value, 0) + "px"; 140 } 141 128 142 // Private 129 143 -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
r195819 r196266 206 206 this._sectionModified(group); 207 207 208 let autocompleteCompatibleProperties = group.autocompleteCompatibleProperties; 209 if (!autocompleteCompatibleProperties || !autocompleteCompatibleProperties.length) 210 return; 211 212 for (let editor of autocompleteCompatibleProperties) 213 this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate); 208 if (group.autocompleteCompatibleProperties) { 209 for (let editor of group.autocompleteCompatibleProperties) 210 this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate); 211 } 212 213 if (group.specifiedWidthProperties) { 214 let width = this.element.realOffsetWidth; 215 for (let editor of group.specifiedWidthProperties) 216 editor.specifiedWidth = width; 217 } 214 218 } 215 219 … … 714 718 715 719 group.autocompleteCompatibleProperties = [properties.fontFamily]; 720 group.specifiedWidthProperties = [properties.fontFamily]; 716 721 717 722 let fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]); … … 903 908 904 909 group.autocompleteCompatibleProperties = [properties.backgroundColor]; 910 group.specifiedWidthProperties = [properties.background]; 905 911 906 912 let backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundClipRow, backgroundSizeRow, backgroundRow, backgroundImageRow, backgroundPositionRow, backgroundRepeatRow]); … … 1195 1201 1196 1202 group.autocompleteCompatibleProperties = [boxShadowColor]; 1203 group.specifiedWidthProperties = [properties.boxShadow]; 1197 1204 1198 1205 let boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]); … … 1274 1281 1275 1282 group.autocompleteCompatibleProperties = [transitionProperty]; 1283 group.specifiedWidthProperties = [properties.transition]; 1276 1284 1277 1285 let transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]); -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js
r196207 r196266 291 291 this._representedProperty = property; 292 292 293 if (!propertyMissing && !property.valid) {293 if (!propertyMissing && property && !property.valid) { 294 294 this._warningElement.classList.add("invalid-value"); 295 295 this._warningElement.title = WebInspector.UIString("The value “%s” is not supported for this property.").format(propertyText);
Note: See TracChangeset
for help on using the changeset viewer.