Title: [288495] branches/safari-613-branch/Source/WebInspectorUI
- Revision
- 288495
- Author
- [email protected]
- Date
- 2022-01-24 17:54:37 -0800 (Mon, 24 Jan 2022)
Log Message
Cherry-pick r287870. rdar://problem/86543279
Web Inspector: Increase padding around icons in Alignment editor
https://bugs.webkit.org/show_bug.cgi?id=234036
<rdar://problem/86543279>
Reviewed by Devin Rousso.
Increase margin and padding around the icons, making the icons more visually appealing
and easier to distinguish and from each other.
* UserInterface/Images/AlignContentStretch.svg:
The gap between rectangles was only 0.5px. Increase it to 2px.
* UserInterface/Views/AlignmentEditor.css:
(.alignment-editor .glyph):
(.alignment-editor .glyph:not(:first-child)):
(.alignment-editor .glyph.selected):
(.alignment-editor .glyph.selected:active):
(.alignment-editor .glyph:not(:last-child)): Deleted.
(.alignment-editor .glyph.selected + .glyph): Deleted.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@287870 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Diff
Modified: branches/safari-613-branch/Source/WebInspectorUI/ChangeLog (288494 => 288495)
--- branches/safari-613-branch/Source/WebInspectorUI/ChangeLog 2022-01-25 01:54:34 UTC (rev 288494)
+++ branches/safari-613-branch/Source/WebInspectorUI/ChangeLog 2022-01-25 01:54:37 UTC (rev 288495)
@@ -1,3 +1,52 @@
+2022-01-24 Alan Coon <[email protected]>
+
+ Cherry-pick r287870. rdar://problem/86543279
+
+ Web Inspector: Increase padding around icons in Alignment editor
+ https://bugs.webkit.org/show_bug.cgi?id=234036
+ <rdar://problem/86543279>
+
+ Reviewed by Devin Rousso.
+
+ Increase margin and padding around the icons, making the icons more visually appealing
+ and easier to distinguish and from each other.
+
+ * UserInterface/Images/AlignContentStretch.svg:
+ The gap between rectangles was only 0.5px. Increase it to 2px.
+
+ * UserInterface/Views/AlignmentEditor.css:
+ (.alignment-editor .glyph):
+ (.alignment-editor .glyph:not(:first-child)):
+ (.alignment-editor .glyph.selected):
+ (.alignment-editor .glyph.selected:active):
+ (.alignment-editor .glyph:not(:last-child)): Deleted.
+ (.alignment-editor .glyph.selected + .glyph): Deleted.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@287870 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2022-01-10 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Increase padding around icons in Alignment editor
+ https://bugs.webkit.org/show_bug.cgi?id=234036
+ <rdar://problem/86543279>
+
+ Reviewed by Devin Rousso.
+
+ Increase margin and padding around the icons, making the icons more visually appealing
+ and easier to distinguish and from each other.
+
+ * UserInterface/Images/AlignContentStretch.svg:
+ The gap between rectangles was only 0.5px. Increase it to 2px.
+
+ * UserInterface/Views/AlignmentEditor.css:
+ (.alignment-editor .glyph):
+ (.alignment-editor .glyph:not(:first-child)):
+ (.alignment-editor .glyph.selected):
+ (.alignment-editor .glyph.selected:active):
+ (.alignment-editor .glyph:not(:last-child)): Deleted.
+ (.alignment-editor .glyph.selected + .glyph): Deleted.
+
2022-01-07 Alexey Shvayka <[email protected]>
Remove obsolete DOM Level 2 "DOMFocusIn" / "DOMFocusOut" events
Modified: branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg (288494 => 288495)
--- branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg 2022-01-25 01:54:34 UTC (rev 288494)
+++ branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Images/AlignContentStretch.svg 2022-01-25 01:54:37 UTC (rev 288495)
@@ -1,5 +1,5 @@
<!-- Copyright © 2021 Apple Inc. All rights reserved. -->
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="root">
- <rect x="2" y="1" width="12" height="6.5" fill="currentColor"/>
- <rect x="2" y="8" width="12" height="6.5" fill="currentColor"/>
+ <rect x="2" y="1" width="12" height="6" fill="currentColor"/>
+ <rect x="2" y="9" width="12" height="6" fill="currentColor"/>
</svg>
Modified: branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css (288494 => 288495)
--- branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-25 01:54:34 UTC (rev 288494)
+++ branches/safari-613-branch/Source/WebInspectorUI/UserInterface/Views/AlignmentEditor.css 2022-01-25 01:54:37 UTC (rev 288495)
@@ -27,6 +27,7 @@
display: inline-block;
width: 16px;
height: 16px;
+ padding: 2px;
background-color: var(--background-color-content);
box-sizing: content-box;
border: 1px solid var(--border-color);
@@ -33,8 +34,8 @@
color: var(--glyph-color);
}
-.alignment-editor .glyph:not(:last-child) {
- border-inline-end-width: 0;
+.alignment-editor .glyph:not(:first-child) {
+ margin-inline-start: 2px;
}
.alignment-editor .glyph:active {
@@ -42,17 +43,14 @@
}
.alignment-editor .glyph.selected {
- color: var(--glyph-color-active);
+ background-color: var(--glyph-color-active);
border-color: var(--glyph-color-active);
+ color: var(--selected-foreground-color);
}
-.alignment-editor .glyph.selected + .glyph {
- border-inline-start-color: var(--glyph-color-active);
-}
-
.alignment-editor .glyph.selected:active {
- color: var(--glyph-color-active-pressed);
- outline-color: var(--glyph-color-active-pressed);
+ background-color: var(--glyph-color-active-pressed);
+ border-color: var(--glyph-color-active-pressed);
}
.alignment-editor .glyph.rotate-left > svg {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
