- Revision
- 277284
- Author
- nvasil...@apple.com
- Date
- 2021-05-10 12:33:14 -0700 (Mon, 10 May 2021)
Log Message
Web Inspector: Layout panel "Grid Overlays" main checkbox has dead space (no interaction) between checkbox and label text
https://bugs.webkit.org/show_bug.cgi?id=225433
<rdar://problem/77590883>
Reviewed by Devin Rousso.
Make the empty space between the checkbox and the label text clickable in:
- Everywhere in Settings tab
- Layout panel, Page Overlay Options
- Grid Overlay header
* UserInterface/Main.html:
* UserInterface/Views/CSSGridSection.css:
(.css-grid-section .node-display-name):
(.css-grid-section .toggle-all):
(.css-grid-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"]):
(.css-grid-section .setting-editor > input[type="checkbox"]):
(.css-grid-section .node-display-name,): Deleted.
Make all checkbox labels in the Grid section align vertically.
* UserInterface/Views/CSSGridSection.js:
(WI.CSSGridSection.prototype.initialLayout):
* UserInterface/Views/SettingEditor.css: Copied from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css.
(.setting-editor input):
(.setting-editor > input[type="checkbox"]):
(.setting-editor > label):
* UserInterface/Views/SettingEditor.js:
(WI.SettingEditor):
* UserInterface/Views/SettingsTabContentView.css:
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor:first-child > *):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="checkbox"]):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor select):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="number"]):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="text"]):
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Deleted.
(.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Deleted.
Rename ".editor" to ".setting-editor" so it matches SettingEditor.css.
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (277283 => 277284)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-05-10 19:33:14 UTC (rev 277284)
@@ -1,3 +1,50 @@
+2021-05-10 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Layout panel "Grid Overlays" main checkbox has dead space (no interaction) between checkbox and label text
+ https://bugs.webkit.org/show_bug.cgi?id=225433
+ <rdar://problem/77590883>
+
+ Reviewed by Devin Rousso.
+
+ Make the empty space between the checkbox and the label text clickable in:
+ - Everywhere in Settings tab
+ - Layout panel, Page Overlay Options
+ - Grid Overlay header
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/CSSGridSection.css:
+ (.css-grid-section .node-display-name):
+ (.css-grid-section .toggle-all):
+ (.css-grid-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"]):
+ (.css-grid-section .setting-editor > input[type="checkbox"]):
+ (.css-grid-section .node-display-name,): Deleted.
+ Make all checkbox labels in the Grid section align vertically.
+
+ * UserInterface/Views/CSSGridSection.js:
+ (WI.CSSGridSection.prototype.initialLayout):
+ * UserInterface/Views/SettingEditor.css: Copied from Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css.
+ (.setting-editor input):
+ (.setting-editor > input[type="checkbox"]):
+ (.setting-editor > label):
+
+ * UserInterface/Views/SettingEditor.js:
+ (WI.SettingEditor):
+ * UserInterface/Views/SettingsTabContentView.css:
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor:first-child > *):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="checkbox"]):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor select):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="number"]):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="text"]):
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"]): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"]): Deleted.
+ (.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"]): Deleted.
+ Rename ".editor" to ".setting-editor" so it matches SettingEditor.css.
+
2021-05-10 Devin Rousso <drou...@apple.com>
Web Inspector: add support for panning/zooming on images
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (277283 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2021-05-10 19:33:14 UTC (rev 277284)
@@ -210,6 +210,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css (277283 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css 2021-05-10 19:33:14 UTC (rev 277284)
@@ -23,9 +23,8 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.css-grid-section .node-display-name,
-.css-grid-section .editor-group > .editor > label {
- margin-inline: 5px;
+.css-grid-section .node-display-name {
+ margin-inline: 5px 4px;
}
.css-grid-section .node-overlay-list {
@@ -64,5 +63,13 @@
}
.css-grid-section .toggle-all {
- margin-inline-end: 7px;
+ padding-inline-start: 4px;
}
+
+.css-grid-section :is(.setting-editor, .node-overlay-list-item-container, .heading) input[type="checkbox"] {
+ margin-inline-end: 0;
+}
+
+.css-grid-section .setting-editor > input[type="checkbox"] {
+ font-size: revert;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (277283 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-05-10 19:33:14 UTC (rev 277284)
@@ -82,11 +82,12 @@
listHeading.classList.add("heading");
let label = listHeading.createChild("label");
- this._toggleAllCheckboxElement = label.createChild("input", "toggle-all");
+ this._toggleAllCheckboxElement = label.createChild("input");
this._toggleAllCheckboxElement.type = "checkbox";
this._toggleAllCheckboxElement.addEventListener("change", this._handleToggleAllCheckboxChanged.bind(this));
- label.append(WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes"));
+ let labelInner = label.createChild("span", "toggle-all");
+ labelInner.textContent = WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes");
this._listElement = this.element.appendChild(document.createElement("ul"));
this._listElement.classList.add("node-overlay-list");
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.css (from rev 277282, trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css) (0 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.css 2021-05-10 19:33:14 UTC (rev 277284)
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2021 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.setting-editor input {
+ font-size: inherit;
+}
+
+.setting-editor > input[type="checkbox"] {
+ margin-inline-end: 0;
+}
+
+.setting-editor > label {
+ padding-inline-start: 4px;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.js (277283 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.js 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingEditor.js 2021-05-10 19:33:14 UTC (rev 277284)
@@ -36,7 +36,7 @@
console.assert(this._editorElement);
this._element = document.createElement("div");
- this._element.classList.add("editor");
+ this._element.classList.add("setting-editor");
this._element.append(this._editorElement);
this.label = label;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (277283 => 277284)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css 2021-05-10 19:28:08 UTC (rev 277283)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css 2021-05-10 19:33:14 UTC (rev 277284)
@@ -96,25 +96,20 @@
flex-direction: column;
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor {
--settings-editor-child-margin-top: 0;
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor:first-child > * {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor:first-child > * {
margin-top: var(--settings-editor-child-margin-top);
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input {
- font-size: inherit;
-}
-
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="checkbox"] {
- margin-inline-end: 4px;
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="checkbox"] {
/* Vertically align <select> with the group title text. */
font-size: 16px;
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor select {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor select {
/*
To set the font-size of <select> to be exactly 13px, it needs to be set to 16px.
Setting the font-size to 13px actually sets it to 11px.
@@ -125,7 +120,7 @@
--settings-editor-child-margin-top: -2px;
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="number"] {
max-width: 48px;
margin-inline: 2px 5px;
padding-top: 0;
@@ -137,7 +132,7 @@
--settings-editor-child-margin-top: -2px;
}
-.content-view.tab.settings > .settings-view > .container > .editor-group > .editor input[type="text"] {
+.content-view.tab.settings > .settings-view > .container > .editor-group > .setting-editor input[type="text"] {
padding-top: 0;
padding-bottom: 0;
vertical-align: 1px;
