Title: [212999] trunk/Source/WebInspectorUI
- Revision
- 212999
- Author
- [email protected]
- Date
- 2017-02-25 00:08:27 -0800 (Sat, 25 Feb 2017)
Log Message
Web Inspector: RTL: Styles - Rules sidebar icons are misaligned
https://bugs.webkit.org/show_bug.cgi?id=168807
Patch by Devin Rousso <[email protected]> on 2017-02-25
Reviewed by Brian Burg.
* UserInterface/Views/CSSStyleDeclarationSection.css:
(.style-declaration-section > .header):
(body[dir=ltr] .style-declaration-section > .header):
(body[dir=rtl] .style-declaration-section > .header):
(.style-declaration-section.locked > .header > .locked-icon):
(body[dir=ltr] .style-declaration-section.locked > .header > .locked-icon):
(body[dir=rtl] .style-declaration-section.locked > .header > .locked-icon):
(.style-declaration-section > .header > .icon):
(body[dir=ltr] .style-declaration-section > .header > .icon):
(body[dir=rtl] .style-declaration-section > .header > .icon):
(.style-declaration-section > .header > textarea):
(body[dir=ltr] .style-declaration-section > .header > textarea):
(body[dir=rtl] .style-declaration-section > .header > textarea):
(.style-declaration-section.invalid-selector > .header > .icon):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
(body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
(body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
(body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
(body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
* UserInterface/Views/Variables.css:
(:root):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (212998 => 212999)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-02-25 08:05:21 UTC (rev 212998)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-02-25 08:08:27 UTC (rev 212999)
@@ -1,5 +1,42 @@
2017-02-25 Devin Rousso <[email protected]>
+ Web Inspector: RTL: Styles - Rules sidebar icons are misaligned
+ https://bugs.webkit.org/show_bug.cgi?id=168807
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Views/CSSStyleDeclarationSection.css:
+ (.style-declaration-section > .header):
+ (body[dir=ltr] .style-declaration-section > .header):
+ (body[dir=rtl] .style-declaration-section > .header):
+ (.style-declaration-section.locked > .header > .locked-icon):
+ (body[dir=ltr] .style-declaration-section.locked > .header > .locked-icon):
+ (body[dir=rtl] .style-declaration-section.locked > .header > .locked-icon):
+ (.style-declaration-section > .header > .icon):
+ (body[dir=ltr] .style-declaration-section > .header > .icon):
+ (body[dir=rtl] .style-declaration-section > .header > .icon):
+ (.style-declaration-section > .header > textarea):
+ (body[dir=ltr] .style-declaration-section > .header > textarea):
+ (body[dir=rtl] .style-declaration-section > .header > textarea):
+ (.style-declaration-section.invalid-selector > .header > .icon):
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ (.sidebar > .panel.details.css-style > .content):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+ (body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+ (body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
+ (body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
+ (body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+
+2017-02-25 Devin Rousso <[email protected]>
+
Web Inspector: RTL: disclosure triangles in details section headers should be flipped and aligned right
https://bugs.webkit.org/show_bug.cgi?id=168283
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css (212998 => 212999)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2017-02-25 08:05:21 UTC (rev 212998)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css 2017-02-25 08:08:27 UTC (rev 212999)
@@ -55,29 +55,56 @@
.style-declaration-section > .header {
position: relative;
- padding: var(--style-declaration-section-header-padding);
font-size: 11px;
line-height: 12px;
+
+ --style-declaration-section-header-padding-start: 25px;
+ --style-declaration-section-header-padding-end: 5px;
}
+body[dir=ltr] .style-declaration-section > .header {
+ padding: 4px var(--style-declaration-section-header-padding-end) 3px var(--style-declaration-section-header-padding-start);
+}
+
+body[dir=rtl] .style-declaration-section > .header {
+ padding: 4px var(--style-declaration-section-header-padding-start) 3px var(--style-declaration-section-header-padding-end);
+}
+
.style-declaration-section.locked > .header > .locked-icon {
- float: right;
width: 8px;
height: 10px;
- margin-left: 5px;
content: url(../Images/Locked.svg);
+
+ --style-declaration-section-locked-header-locked-icon-margin-start: 5px;
}
+body[dir=ltr] .style-declaration-section.locked > .header > .locked-icon {
+ float: right;
+ margin-left: var(--style-declaration-section-locked-header-locked-icon-margin-start);
+}
+
+body[dir=rtl] .style-declaration-section.locked > .header > .locked-icon {
+ float: left;
+ margin-right: var(--style-declaration-section-locked-header-locked-icon-margin-start);
+}
+
.style-declaration-section > .header > .icon {
position: absolute;
-
top: 2px;
- left: 4px;
-
width: 16px;
height: 16px;
+
+ --style-declaration-section-header-icon-offset-start: 4px;
}
+body[dir=ltr] .style-declaration-section > .header > .icon {
+ left: var(--style-declaration-section-header-icon-offset-start);
+}
+
+body[dir=rtl] .style-declaration-section > .header > .icon {
+ right: var(--style-declaration-section-header-icon-offset-start);
+}
+
.style-declaration-section > .header > .icon.toggle-able:hover {
filter: brightness(0.9);
}
@@ -97,7 +124,6 @@
right: 0;
bottom: 0;
left: 0;
- margin: var(--style-declaration-section-header-padding);
padding: 0;
font-family: Menlo, monospace;
color: black;
@@ -107,8 +133,19 @@
opacity: 0;
resize: none;
-webkit-appearance: none;
+
+ --style-declaration-section-header-textarea-margin-start: var(--style-declaration-section-header-padding-start);
+ --style-declaration-section-header-textarea-margin-end: var(--style-declaration-section-header-padding-end);
}
+body[dir=ltr] .style-declaration-section > .header > textarea {
+ margin: 4px var(--style-declaration-section-header-textarea-margin-end) 3px var(--style-declaration-section-header-textarea-margin-start);
+}
+
+body[dir=rtl] .style-declaration-section > .header > textarea {
+ margin: 4px var(--style-declaration-section-header-textarea-margin-start) 3px var(--style-declaration-section-header-textarea-margin-end);
+}
+
.style-declaration-section > .header > textarea:focus {
opacity: 1;
}
@@ -149,10 +186,11 @@
.style-declaration-section.invalid-selector > .header > .icon {
top: 4px;
- left: 6px;
width: 12px;
height: 12px;
content: url(../Images/Error.svg);
+
+ --style-declaration-section-header-icon-offset-start: 6px;
}
.style-declaration-section.invalid-selector > .header > .selector,
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (212998 => 212999)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2017-02-25 08:05:21 UTC (rev 212998)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2017-02-25 08:08:27 UTC (rev 212999)
@@ -29,7 +29,6 @@
left: 0;
right: 0;
bottom: 0;
-
overflow-y: auto;
overflow-x: hidden;
}
@@ -88,11 +87,20 @@
width: 15px;
min-width: 15px;
height: 15px;
- margin-left: 6px;
content: url(../Images/Plus15.svg);
opacity: 0.7;
+
+ --panel-details-css-style-content-options-container-new-rule-margin-start: 6px;
}
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+ margin-left: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+ margin-right: var(--panel-details-css-style-content-options-container-new-rule-margin-start);
+}
+
.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
width: -webkit-fill-available;
background-color: transparent;
@@ -99,7 +107,7 @@
}
.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
- margin: 0 5px 1px 0;
+ margin: 0 0 1px;
padding: 2px 4px 3px;
background: none;
border: none;
@@ -106,8 +114,18 @@
border-radius: 3px;
white-space: nowrap;
-webkit-appearance: none;
+
+ --panel-details-css-style-content-options-container-toggle-class-toggle-margin-end: 5px;
}
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+ margin-right: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+ margin-left: var(--panel-details-css-style-content-options-container-toggle-class-toggle-margin-end);
+}
+
.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
color: var(--selected-foreground-color);
background-color: var(--selected-background-color);
@@ -153,9 +171,19 @@
.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
width: 100px;
height: 18px;
- margin: 0 0 0 2px;
+ margin: 0;
+
+ --panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start: 2px;
}
+body[dir=ltr] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+ margin-left: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
+}
+
+body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+ margin-right: var(--panel-details-css-style-content-class-list-container-new-class-class-name-input-margin-start);
+}
+
.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class.active > .add-class-icon,
.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input {
display: none;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (212998 => 212999)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-02-25 08:05:21 UTC (rev 212998)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-02-25 08:08:27 UTC (rev 212999)
@@ -84,8 +84,6 @@
--toolbar-height: 36px;
--tab-bar-height: 24px;
--navigation-bar-height: 29px;
-
- --style-declaration-section-header-padding: 4px 5px 3px 25px;
}
body.window-inactive {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
