Title: [214899] trunk/Source/WebInspectorUI
- Revision
- 214899
- Author
- [email protected]
- Date
- 2017-04-04 14:30:29 -0700 (Tue, 04 Apr 2017)
Log Message
Web Inspector: RTL: layout issues in debugger dashboard, arrows are on wrong side
https://bugs.webkit.org/show_bug.cgi?id=170425
Reviewed by Devin Rousso.
We need to move the up/down dashboard arrows to the trailing side for RTL.
Clean up some messy spacing rules so that the source location does not
overlap the arrows or get too close to the function icon.
* UserInterface/Views/DashboardContainerView.css:
(.toolbar .dashboard):
(body[dir=ltr] .toolbar .dashboard):
(body[dir=rtl] .toolbar .dashboard):
(.dashboard-container .advance-arrow):
(body[dir=ltr] .dashboard-container .advance-arrow):
(body[dir=rtl] .dashboard-container .advance-arrow):
(.toolbar.label-only .dashboard-container .advance-arrow):
(body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow):
(body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow):
* UserInterface/Views/DebuggerDashboardView.css:
(.toolbar .dashboard.debugger):
(body[dir=ltr] .toolbar .dashboard.debugger):
(body[dir=rtl] .toolbar .dashboard.debugger):
(.dashboard.debugger .navigation-bar):
(body[dir=ltr] .dashboard.debugger .navigation-bar):
(body[dir=rtl] .dashboard.debugger .navigation-bar):
(.dashboard.debugger > .location):
(.dashboard.debugger > .location > :first-child):
(body[dir=ltr] .dashboard.debugger > .location > :last-child):
(body[dir=rtl] .dashboard.debugger > .location > :last-child):
(.dashboard.debugger > .location .function-icon):
(body[dir=ltr] .dashboard.debugger > .location .function-icon):
(body[dir=rtl] .dashboard.debugger > .location .function-icon):
(.dashboard.debugger > .location .go-to-link):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (214898 => 214899)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-04-04 21:30:29 UTC (rev 214899)
@@ -1,3 +1,40 @@
+2017-04-04 Brian Burg <[email protected]>
+
+ Web Inspector: RTL: layout issues in debugger dashboard, arrows are on wrong side
+ https://bugs.webkit.org/show_bug.cgi?id=170425
+
+ Reviewed by Devin Rousso.
+
+ We need to move the up/down dashboard arrows to the trailing side for RTL.
+ Clean up some messy spacing rules so that the source location does not
+ overlap the arrows or get too close to the function icon.
+
+ * UserInterface/Views/DashboardContainerView.css:
+ (.toolbar .dashboard):
+ (body[dir=ltr] .toolbar .dashboard):
+ (body[dir=rtl] .toolbar .dashboard):
+ (.dashboard-container .advance-arrow):
+ (body[dir=ltr] .dashboard-container .advance-arrow):
+ (body[dir=rtl] .dashboard-container .advance-arrow):
+ (.toolbar.label-only .dashboard-container .advance-arrow):
+ (body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow):
+ (body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow):
+ * UserInterface/Views/DebuggerDashboardView.css:
+ (.toolbar .dashboard.debugger):
+ (body[dir=ltr] .toolbar .dashboard.debugger):
+ (body[dir=rtl] .toolbar .dashboard.debugger):
+ (.dashboard.debugger .navigation-bar):
+ (body[dir=ltr] .dashboard.debugger .navigation-bar):
+ (body[dir=rtl] .dashboard.debugger .navigation-bar):
+ (.dashboard.debugger > .location):
+ (.dashboard.debugger > .location > :first-child):
+ (body[dir=ltr] .dashboard.debugger > .location > :last-child):
+ (body[dir=rtl] .dashboard.debugger > .location > :last-child):
+ (.dashboard.debugger > .location .function-icon):
+ (body[dir=ltr] .dashboard.debugger > .location .function-icon):
+ (body[dir=rtl] .dashboard.debugger > .location .function-icon):
+ (.dashboard.debugger > .location .go-to-link):
+
2017-04-03 Brian Burg <[email protected]>
Web Inspector: RTL: results in Search navigation sidebar have misplaced highlights
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (214898 => 214899)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2017-04-04 21:30:29 UTC (rev 214899)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -72,11 +72,22 @@
left: 0;
right: 0;
- padding: 0 10px 0 5px;
+ animation-duration: 0.4s;
- animation-duration: 0.4s;
+ --dashboard-padding-start: 10px;
+ --dashboard-padding-end: 5px;
}
+body[dir=ltr] .toolbar .dashboard {
+ padding-left: var(--dashboard-padding-start);
+ padding-right: var(--dashboard-padding-end);
+}
+
+body[dir=rtl] .toolbar .dashboard {
+ padding-left: var(--dashboard-padding-end);
+ padding-right: var(--dashboard-padding-start);
+}
+
.toolbar .dashboard.visible {
z-index: 1; /* Establish a stacking context. */
}
@@ -123,7 +134,6 @@
.dashboard-container .advance-arrow {
position: absolute;
- right: 0;
width: 19px;
top: 0;
bottom: 0;
@@ -138,8 +148,18 @@
transition-property: opacity;
transition-duration: 0.2s;
background-clip: content-box;
+
+ --dashboard-advance-arrow-offset-end: 0px;
}
+body[dir=ltr] .dashboard-container .advance-arrow {
+ right: var(--dashboard-advance-arrow-offset-end);
+}
+
+body[dir=rtl] .dashboard-container .advance-arrow {
+ left: var(--dashboard-advance-arrow-offset-end);
+}
+
.dashboard-container .advance-arrow:hover {
opacity: 0.8;
}
@@ -156,10 +176,26 @@
.toolbar.label-only .dashboard-container .advance-arrow {
width: 8px;
height: 8px;
+ margin-top: 2px;
+ margin-bottom: 2px;
margin: 2px 4px 2px 2px;
+
background-size: 6px;
+
+ --dashboard-advance-arrow-margin-start: 2px;
+ --dashboard-advance-arrow-margin-end: 4px;
}
+body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow {
+ margin-left: var(--dashboard-advance-arrow-margin-start);
+ margin-right: var(--dashboard-advance-arrow-margin-end);
+}
+
+body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow {
+ margin-left: var(--dashboard-advance-arrow-margin-end);
+ margin-right: var(--dashboard-advance-arrow-margin-start);
+}
+
.dashboard-container .advance-arrow.advance-forward {
top: 0;
background-position: 50% 4px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (214898 => 214899)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-04-04 21:22:05 UTC (rev 214898)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-04-04 21:30:29 UTC (rev 214899)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014-2017 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -31,9 +31,21 @@
text-align: center;
text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
color: hsl(0, 0%, 23%);
- padding: 0 12px 0 5px;
+
+ --debugger-dashboard-padding-start: 5px;
+ --debugger-dashboard-padding-end: 12px;
}
+body[dir=ltr] .toolbar .dashboard.debugger {
+ padding-left: var(--debugger-dashboard-padding-start);
+ padding-right: var(--debugger-dashboard-padding-end);
+}
+
+body[dir=rtl] .toolbar .dashboard.debugger {
+ padding-left: var(--debugger-dashboard-padding-end);
+ padding-right: var(--debugger-dashboard-padding-start);
+}
+
.dashboard.debugger > .message {
font-weight: bold;
}
@@ -40,9 +52,18 @@
.dashboard.debugger .navigation-bar {
border: 0;
- margin-right: 4px;
+
+ --debugger-dashboard-navigation-bar-margin-end: 4px;
}
+body[dir=ltr] .dashboard.debugger .navigation-bar {
+ margin-right: var(--debugger-dashboard-navigation-bar-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger .navigation-bar {
+ margin-left: var(--debugger-dashboard-navigation-bar-margin-end);
+}
+
.toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
margin-top: 1px;
}
@@ -104,6 +125,8 @@
.dashboard.debugger > .location {
overflow: hidden;
flex: initial;
+
+ --debugger-dashboard-location-trailing-margin-end: 5px;
}
.dashboard.debugger > .location > * {
@@ -114,9 +137,17 @@
align-self: center;
width: 16px;
height: 16px;
- margin-right: 5px;
}
+/* Add spacing between the ellipsis'd location and the up/down arrows. */
+body[dir=ltr] .dashboard.debugger > .location > :last-child {
+ margin-right: var(--debugger-dashboard-location-trailing-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger > .location > :last-child {
+ margin-left: var(--debugger-dashboard-location-trailing-margin-end);
+}
+
.toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
margin-top: 1px;
}
@@ -126,6 +157,18 @@
height: 16px;
}
+.dashboard.debugger > .location .function-icon {
+ --debugger-dashboard-function-icon-margin-end: 3px;
+}
+
+body[dir=ltr] .dashboard.debugger > .location .function-icon {
+ margin-right: var(--debugger-dashboard-function-icon-margin-end);
+}
+
+body[dir=rtl] .dashboard.debugger > .location .function-icon {
+ margin-left: var(--debugger-dashboard-function-icon-margin-end);
+}
+
.dashboard.debugger > .location .function-name {
color: hsl(0, 0%, 11%);
padding-bottom: 1px;
@@ -138,7 +181,7 @@
.dashboard.debugger > .location .go-to-link {
padding-bottom: 1px;
-webkit-text-decoration-color: hsl(0, 0%, 66%);
-
+
flex: initial;
text-overflow: ellipsis;
overflow: hidden;
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
