Title: [203807] trunk/Source/WebInspectorUI
- Revision
- 203807
- Author
- [email protected]
- Date
- 2016-07-27 16:54:44 -0700 (Wed, 27 Jul 2016)
Log Message
Web Inspector: Visual Styles Sidebar should have only one column when it's narrow
https://bugs.webkit.org/show_bug.cgi?id=159905
<rdar://problem/27413248>
Reviewed by Joseph Pecoraro.
Many CSS values often get clipped in the two colunm layout. Change the layout to one colunm
when visual style rows get too narrow.
* UserInterface/Views/VisualStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row):
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .metric-section-row):
Wrap all rows except for position/padding/margin controls.
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child): Deleted.
Margin between the first and the second column doesn't make sense one column layout.
Set the margin in .visual-style-property-container instead.
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
* UserInterface/Views/VisualStylePropertyEditor.css:
(.visual-style-property-container):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (203806 => 203807)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-07-27 23:50:29 UTC (rev 203806)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-07-27 23:54:44 UTC (rev 203807)
@@ -1,3 +1,28 @@
+2016-07-27 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Visual Styles Sidebar should have only one column when it's narrow
+ https://bugs.webkit.org/show_bug.cgi?id=159905
+ <rdar://problem/27413248>
+
+ Reviewed by Joseph Pecoraro.
+
+ Many CSS values often get clipped in the two colunm layout. Change the layout to one colunm
+ when visual style rows get too narrow.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row):
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .metric-section-row):
+ Wrap all rows except for position/padding/margin controls.
+
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child): Deleted.
+ Margin between the first and the second column doesn't make sense one column layout.
+ Set the margin in .visual-style-property-container instead.
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel.prototype._generateMetricSectionRows):
+ * UserInterface/Views/VisualStylePropertyEditor.css:
+ (.visual-style-property-container):
+
2016-07-27 Joseph Pecoraro <[email protected]>
[Mac] Web Inspector: CodeMirror-based editor bindings for Home and End don't match system behavior
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (203806 => 203807)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-07-27 23:50:29 UTC (rev 203806)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2016-07-27 23:54:44 UTC (rev 203807)
@@ -62,8 +62,13 @@
.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row {
display: flex;
+ flex-wrap: wrap;
}
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .metric-section-row {
+ flex-wrap: nowrap;
+}
+
.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child {
padding-top: 7px;
border-top: none;
@@ -89,10 +94,6 @@
width: 55px;
}
-.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child {
- margin-right: 11px;
-}
-
.visual-style-property-container.transition,
.visual-style-property-container.animation {
margin-left: 11px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (203806 => 203807)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-07-27 23:50:29 UTC (rev 203806)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2016-07-27 23:54:44 UTC (rev 203807)
@@ -429,6 +429,10 @@
this._addMetricsMouseListeners(properties[right], prefix);
}
+ vertical.element.classList.add("metric-section-row");
+ horizontal.element.classList.add("metric-section-row");
+ allLinkRow.element.classList.add("metric-section-row");
+
return [vertical, allLinkRow, horizontal];
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (203806 => 203807)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-07-27 23:50:29 UTC (rev 203806)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2016-07-27 23:54:44 UTC (rev 203807)
@@ -25,8 +25,11 @@
.visual-style-property-container {
display: flex;
- width: 100%;
min-height: 22px;
+ margin: 0 6px;
+
+ flex-basis: 160px;
+ flex-grow: 1;
}
.visual-style-property-container > .visual-style-property-title {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
