[webkit-changes] [188733] trunk/Source/WebInspectorUI

Thu, 20 Aug 2015 18:42:37 -0700

Title: [188733] trunk/Source/WebInspectorUI
Revision
188733
Author
[email protected]
Date
2015-08-20 18:42:21 -0700 (Thu, 20 Aug 2015)

Log Message

Web Inspector: Add flex alignment section to Visual sidebar
https://bugs.webkit.org/show_bug.cgi?id=148243

Reviewed by Timothy Hatcher.

Uses select keyword pickers to contain the list of possible values.  Also supports
the upcoming Grid layout keywords in the advanced keyword list.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel):
(WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
(WebInspector.VisualStyleDetailsPanel.prototype._populateAlignmentSection):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (188732 => 188733)


--- trunk/Source/WebInspectorUI/ChangeLog	2015-08-21 01:40:56 UTC (rev 188732)
+++ trunk/Source/WebInspectorUI/ChangeLog	2015-08-21 01:42:21 UTC (rev 188733)
@@ -1,5 +1,21 @@
 2015-08-20  Devin Rousso  <[email protected]>
 
+        Web Inspector: Add flex alignment section to Visual sidebar
+        https://bugs.webkit.org/show_bug.cgi?id=148243
+
+        Reviewed by Timothy Hatcher.
+
+        Uses select keyword pickers to contain the list of possible values.  Also supports
+        the upcoming Grid layout keywords in the advanced keyword list.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Views/VisualStyleDetailsPanel.js:
+        (WebInspector.VisualStyleDetailsPanel):
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateFlexboxSection):
+        (WebInspector.VisualStyleDetailsPanel.prototype._populateAlignmentSection):
+
+2015-08-20  Devin Rousso  <[email protected]>
+
         Web Inspector: Labels in the computed panel are shifted when a filter is applieds
         https://bugs.webkit.org/show_bug.cgi?id=148250

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (188732 => 188733)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2015-08-21 01:40:56 UTC (rev 188732)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2015-08-21 01:42:21 UTC (rev 188733)
@@ -52,6 +52,7 @@
 localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
 localizedStrings["Additions"] = "Additions";
 localizedStrings["Align"] = "Align";
+localizedStrings["Alignment"] = "Alignment";
 localizedStrings["All"] = "All";
 localizedStrings["All Changes"] = "All Changes";
 localizedStrings["All Exceptions"] = "All Exceptions";
@@ -507,6 +508,7 @@
 localizedStrings["Selected Items"] = "Selected Items";
 localizedStrings["Selected Symbol"] = "Selected Symbol";
 localizedStrings["Selected Value"] = "Selected Value";
+localizedStrings["Self"] = "Self";
 localizedStrings["Self Time"] = "Self Time";
 localizedStrings["Semantic Issue"] = "Semantic Issue";
 localizedStrings["Session"] = "Session";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (188732 => 188733)


--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js	2015-08-21 01:40:56 UTC (rev 188732)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js	2015-08-21 01:42:21 UTC (rev 188733)
@@ -70,8 +70,9 @@
         this._generateSection("margin", WebInspector.UIString("Margin"));
         this._generateSection("padding", WebInspector.UIString("Padding"));
         this._generateSection("flexbox", WebInspector.UIString("Flexbox"));
+        this._generateSection("alignment", WebInspector.UIString("Alignment"));
 
-        this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section]);
+        this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section, this._groups.alignment.section]);
         this._element.appendChild(this._sections.layout.element);
 
         // Text Section
@@ -558,8 +559,8 @@
 
         let flexSizeRow = new WebInspector.DetailsSectionRow;
 
-        properties.flexGrow = new WebInspector.VisualStyleNumberInputBox("flex-grow", WebInspector.UIString("Grow"), this._keywords.defaults, null);
-        properties.flexShrink = new WebInspector.VisualStyleNumberInputBox("flex-shrink", WebInspector.UIString("Shrink"), this._keywords.defaults, null);
+        properties.flexGrow = new WebInspector.VisualStyleNumberInputBox("flex-grow", WebInspector.UIString("Grow"), this._keywords.defaults);
+        properties.flexShrink = new WebInspector.VisualStyleNumberInputBox("flex-shrink", WebInspector.UIString("Shrink"), this._keywords.defaults);
 
         flexSizeRow.element.appendChild(properties.flexGrow.element);
         flexSizeRow.element.appendChild(properties.flexShrink.element);
@@ -576,6 +577,41 @@
         this._populateSection(group, [flexboxGroup]);
     }
 
+    _populateAlignmentSection()
+    {
+        let group = this._groups.alignment;
+        let properties = group.properties;
+        let alignmentKeywords = ["Initial", "Auto", "Flex Start", "Flex End", "Center", "Stretch"];
+        let advancedAlignmentKeywords = ["Start", "End", "Left", "Right", "Baseline", "Last Baseline"];
+
+        let contentRow = new WebInspector.DetailsSectionRow;
+        let contentKeywords = {
+            basic: alignmentKeywords.concat(["Space Between", "Space Around"]),
+            advanced: advancedAlignmentKeywords.concat(["Space Evenly"])
+        };
+
+        properties.justifyContent = new WebInspector.VisualStyleKeywordPicker("justify-content", WebInspector.UIString("Horizontal"), contentKeywords);
+        properties.alignContent = new WebInspector.VisualStyleKeywordPicker("align-content", WebInspector.UIString("Vertical"), contentKeywords);
+
+        contentRow.element.appendChild(properties.justifyContent.element);
+        contentRow.element.appendChild(properties.alignContent.element);
+
+        let itemsRow = new WebInspector.DetailsSectionRow;
+        let itemKeywords = {
+            basic: alignmentKeywords,
+            advanced: ["Self Start", "Self End"].concat(advancedAlignmentKeywords)
+        };
+
+        properties.alignItems = new WebInspector.VisualStyleKeywordPicker("align-items", WebInspector.UIString("Children"), itemKeywords);
+        properties.alignSelf = new WebInspector.VisualStyleKeywordPicker("align-self", WebInspector.UIString("Self"), itemKeywords);
+
+        itemsRow.element.appendChild(properties.alignItems.element);
+        itemsRow.element.appendChild(properties.alignSelf.element);
+
+        let alignmentGroup = new WebInspector.DetailsSectionGroup([contentRow, itemsRow]);
+        this._populateSection(group, [alignmentGroup]);
+    }
+
     _populateTextStyleSection()
     {
         let group = this._groups.textStyle;

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to