Changeset 273847 in webkit

Timestamp:

Mar 3, 2021 3:00:40 PM (17 months ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Refine CSS Grid overlay options
​https://bugs.webkit.org/show_bug.cgi?id=222428
<rdar://problem/74751569>

Patch by Razvan Caliman <Razvan Caliman> on 2021-03-03
Reviewed by BJ Burg.

Move CSS Grid overlay settings above node list, simplify labels, reorder and set default values.

• Localizations/en.lproj/localizedStrings.js:
• UserInterface/Base/Setting.js:
• UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.initialLayout):

• UserInterface/Views/LayoutDetailsSidebarPanel.css:

(.details-section.layout-css-grid.collapsed > .content):
Drive-by: Fix a bug which prevented the contents from being hidden when the section is collapsed.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• Localizations/en.lproj/localizedStrings.js (modified) (7 diffs)
• UserInterface/Base/Setting.js (modified) (1 diff)
• UserInterface/Views/CSSGridSection.js (modified) (2 diffs)
• UserInterface/Views/LayoutDetailsSidebarPanel.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-03  Razvan Caliman  <rcaliman@apple.com>
+
+        Web Inspector: Refine CSS Grid overlay options
+        https://bugs.webkit.org/show_bug.cgi?id=222428
+        <rdar://problem/74751569>
+
+        Reviewed by BJ Burg.
+
+        Move CSS Grid overlay settings above node list, simplify labels, reorder and set default values.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Views/CSSGridSection.js:
+        (WI.CSSGridSection.prototype.initialLayout):
+        * UserInterface/Views/LayoutDetailsSidebarPanel.css:
+        (.details-section.layout-css-grid.collapsed > .content):
+        Drive-by: Fix a bug which prevented the contents from being hidden when the section is collapsed.
+
 2021-02-25  BJ Burg  <bburg@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -179 +179 @@
 localizedStrings["Approximate Number"] = "~%s";
 localizedStrings["Area"] = "Area";
+/* Label for option to toggle the area names setting for CSS grid overlays */
+localizedStrings["Area names @ Layout Panel Overlay Options"] = "Area Names";
 localizedStrings["Assertion"] = "Assertion";
 localizedStrings["Assertion Failed"] = "Assertion Failed";
@@ -843 +845 @@
 localizedStrings["Line %d:%d"] = "Line %d:%d";
 localizedStrings["Line Number"] = "Line Number";
+/* Label for option to toggle the line names setting for CSS grid overlays */
+localizedStrings["Line names @ Layout Panel Overlay Options"] = "Line Names";
+/* Label for option to toggle the line numbers setting for CSS grid overlays */
+localizedStrings["Line numbers @ Layout Panel Overlay Options"] = "Line Numbers";
 localizedStrings["Line wrapping:"] = "Line wrapping:";
 localizedStrings["Linear Gradient"] = "Linear Gradient";
@@ -1034 +1040 @@
 localizedStrings["Page"] = "Page";
 localizedStrings["Page Issue"] = "Page Issue";
-/* Heading for list of grid overlay settings */
-localizedStrings["Page Overlay Settings @ Layout Panel Section Header"] = "Grid Overlay Settings";
+/* Heading for list of grid overlay options */
+localizedStrings["Page Overlay Options @ Layout Panel Section Header"] = "Page Overlay Options";
 /* Heading for list of grid nodes */
 localizedStrings["Page Overlays @ Layout Sidebar Section Header"] = "Grid Overlays";
@@ -1316 +1322 @@
 localizedStrings["Show all actions"] = "Show all actions";
 localizedStrings["Show all resources"] = "Show all resources";
-/* Label for option to toggle the area names setting for CSS grid overlays */
-localizedStrings["Show area names @ Layers Panel Grid Overlay Setting"] = "Show area names";
 localizedStrings["Show compositing borders"] = "Show compositing borders";
 /* Label for option to toggle the extended lines setting for CSS grid overlays */
-localizedStrings["Show extended lines @ Layers Panel Grid Overlay Setting"] = "Show extended lines";
+localizedStrings["Show extended lines @ Layout Panel Overlay Options"] = "Extended Grid Lines";
 localizedStrings["Show full certificate"] = "Show full certificate";
 localizedStrings["Show hidden tabs"] = "Show hidden tabs";
@@ -1327 +1331 @@
 localizedStrings["Show jump to effective property button"] = "Show jump to effective property button";
 localizedStrings["Show jump to variable declaration button"] = "Show jump to variable declaration button";
-/* Label for option to toggle the line names setting for CSS grid overlays */
-localizedStrings["Show line names @ Layers Panel Grid Overlay Setting"] = "Show line names";
-/* Label for option to toggle the line numbers setting for CSS grid overlays */
-localizedStrings["Show line numbers @ Layers Panel Grid Overlay Setting"] = "Show line numbers";
 localizedStrings["Show only for selected node"] = "Show only for selected node";
 localizedStrings["Show page rulers and node border lines"] = "Show page rulers and node border lines";
@@ -1336 +1336 @@
 localizedStrings["Show the details sidebar (%s)"] = "Show the details sidebar (%s)";
 localizedStrings["Show the navigation sidebar (%s)"] = "Show the navigation sidebar (%s)";
-/* Label for option to toggle the track sizes setting for CSS grid overlays */
-localizedStrings["Show track sizes @ Layers Panel Grid Overlay Setting"] = "Show track sizes";
 /* Settings tab checkbox label for whether the transparency grid is shown by default */
 localizedStrings["Show transparency grid (settings label)"] = "Show transparency grid";
@@ -1549 +1547 @@
 localizedStrings["Trace: %s"] = "Trace: %s";
 localizedStrings["Traces:"] = "Traces:";
+/* Label for option to toggle the track sizes setting for CSS grid overlays */
+localizedStrings["Track sizes @ Layout Panel Overlay Options"] = "Track Sizes";
 /* Property value for `font-variant-alternates: traditional`. */
 localizedStrings["Traditional Forms @ Font Details Sidebar Property Value"] = "Traditional Forms";

trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -201 +201 @@
     gridOverlayShowExtendedGridLines: new WI.Setting("grid-overlay-show-extended-grid-lines", false),
     gridOverlayShowLineNames: new WI.Setting("grid-overlay-show-line-names", false),
-    gridOverlayShowLineNumbers: new WI.Setting("grid-overlay-show-line-numbers", false),
-    gridOverlayShowTrackSizes: new WI.Setting("grid-overlay-show-track-sizes", false),
+    gridOverlayShowLineNumbers: new WI.Setting("grid-overlay-show-line-numbers", true),
+    gridOverlayShowTrackSizes: new WI.Setting("grid-overlay-show-track-sizes", true),
     groupMediaRequestsByDOMNode: new WI.Setting("group-media-requests-by-dom-node", WI.Setting.migrateValue("group-by-dom-node") || false),
     indentUnit: new WI.Setting("indent-unit", 4),

trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js

@@ -68 +68 @@
         super.initialLayout();
 
+        let settingsGroup = new WI.SettingsGroup(WI.UIString("Page Overlay Options", "Page Overlay Options @ Layout Panel Section Header", "Heading for list of grid overlay options"));
+        this.element.append(settingsGroup.element);
+
+        settingsGroup.addSetting(WI.settings.gridOverlayShowTrackSizes, WI.UIString("Track Sizes", "Track sizes @ Layout Panel Overlay Options", "Label for option to toggle the track sizes setting for CSS grid overlays"));
+        settingsGroup.addSetting(WI.settings.gridOverlayShowLineNumbers, WI.UIString("Line Numbers", "Line numbers @ Layout Panel Overlay Options", "Label for option to toggle the line numbers setting for CSS grid overlays"));
+        settingsGroup.addSetting(WI.settings.gridOverlayShowLineNames, WI.UIString("Line Names", "Line names @ Layout Panel Overlay Options", "Label for option to toggle the line names setting for CSS grid overlays"));
+        settingsGroup.addSetting(WI.settings.gridOverlayShowAreaNames, WI.UIString("Area Names", "Area names @ Layout Panel Overlay Options", "Label for option to toggle the area names setting for CSS grid overlays"));
+        settingsGroup.addSetting(WI.settings.gridOverlayShowExtendedGridLines, WI.UIString("Extended Grid Lines", "Show extended lines @ Layout Panel Overlay Options", "Label for option to toggle the extended lines setting for CSS grid overlays"));
+
         let listHeading = this.element.appendChild(document.createElement("h2"));
         listHeading.classList.add("heading");
@@ -74 +83 @@
         this._listElement = this.element.appendChild(document.createElement("ul"));
         this._listElement.classList.add("node-overlay-list");
-
-        let settingsGroup = new WI.SettingsGroup(WI.UIString("Grid Overlay Settings", "Page Overlay Settings @ Layout Panel Section Header", "Heading for list of grid overlay settings"));
-        this.element.append(settingsGroup.element);
-
-        settingsGroup.addSetting(WI.settings.gridOverlayShowLineNumbers, WI.UIString("Show line numbers", "Show line numbers @ Layers Panel Grid Overlay Setting", "Label for option to toggle the line numbers setting for CSS grid overlays"));
-        settingsGroup.addSetting(WI.settings.gridOverlayShowLineNames, WI.UIString("Show line names", "Show line names @ Layers Panel Grid Overlay Setting", "Label for option to toggle the line names setting for CSS grid overlays"));
-        settingsGroup.addSetting(WI.settings.gridOverlayShowExtendedGridLines, WI.UIString("Show extended lines", "Show extended lines @ Layers Panel Grid Overlay Setting", "Label for option to toggle the extended lines setting for CSS grid overlays"));
-        settingsGroup.addSetting(WI.settings.gridOverlayShowAreaNames, WI.UIString("Show area names", "Show area names @ Layers Panel Grid Overlay Setting", "Label for option to toggle the area names setting for CSS grid overlays"));
-        settingsGroup.addSetting(WI.settings.gridOverlayShowTrackSizes, WI.UIString("Show track sizes", "Show track sizes @ Layers Panel Grid Overlay Setting", "Label for option to toggle the track sizes setting for CSS grid overlays"));
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/LayoutDetailsSidebarPanel.css

@@ -29 +29 @@
 }
 
-.details-section.layout-css-grid > .content,
+.details-section.layout-css-grid:not(.collapsed) > .content,
 .details-section.layout-css-grid > .content > .group {
     display: block;