Changeset 214899 in webkit


Ignore:
Timestamp:
Apr 4, 2017 2:30:29 PM (7 years ago)
Author:
BJ Burg
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):

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r214864 r214899  
     12017-04-04  Brian Burg  <bburg@apple.com>
     2
     3        Web Inspector: RTL: layout issues in debugger dashboard, arrows are on wrong side
     4        https://bugs.webkit.org/show_bug.cgi?id=170425
     5
     6        Reviewed by Devin Rousso.
     7
     8        We need to move the up/down dashboard arrows to the trailing side for RTL.
     9        Clean up some messy spacing rules so that the source location does not
     10        overlap the arrows or get too close to the function icon.
     11
     12        * UserInterface/Views/DashboardContainerView.css:
     13        (.toolbar .dashboard):
     14        (body[dir=ltr] .toolbar .dashboard):
     15        (body[dir=rtl] .toolbar .dashboard):
     16        (.dashboard-container .advance-arrow):
     17        (body[dir=ltr] .dashboard-container .advance-arrow):
     18        (body[dir=rtl] .dashboard-container .advance-arrow):
     19        (.toolbar.label-only .dashboard-container .advance-arrow):
     20        (body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow):
     21        (body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow):
     22        * UserInterface/Views/DebuggerDashboardView.css:
     23        (.toolbar .dashboard.debugger):
     24        (body[dir=ltr] .toolbar .dashboard.debugger):
     25        (body[dir=rtl] .toolbar .dashboard.debugger):
     26        (.dashboard.debugger .navigation-bar):
     27        (body[dir=ltr] .dashboard.debugger .navigation-bar):
     28        (body[dir=rtl] .dashboard.debugger .navigation-bar):
     29        (.dashboard.debugger > .location):
     30        (.dashboard.debugger > .location > :first-child):
     31        (body[dir=ltr] .dashboard.debugger > .location > :last-child):
     32        (body[dir=rtl] .dashboard.debugger > .location > :last-child):
     33        (.dashboard.debugger > .location .function-icon):
     34        (body[dir=ltr] .dashboard.debugger > .location .function-icon):
     35        (body[dir=rtl] .dashboard.debugger > .location .function-icon):
     36        (.dashboard.debugger > .location .go-to-link):
     37
    1382017-04-03  Brian Burg  <bburg@apple.com>
    239

  • trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css

    r193946 r214899  
    11/*
    2  * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
     2 * Copyright (C) 2013-2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    7373    right: 0;
    7474
    75     padding: 0 10px 0 5px;
    76 
    7775    animation-duration: 0.4s;
     76
     77    --dashboard-padding-start: 10px;
     78    --dashboard-padding-end: 5px;
     79}
     80
     81body[dir=ltr] .toolbar .dashboard {
     82    padding-left: var(--dashboard-padding-start);
     83    padding-right: var(--dashboard-padding-end);
     84}
     85
     86body[dir=rtl] .toolbar .dashboard {
     87    padding-left: var(--dashboard-padding-end);
     88    padding-right: var(--dashboard-padding-start);
    7889}
    7990
    … …  
    124135.dashboard-container .advance-arrow {
    125136    position: absolute;
    126     right: 0;
    127137    width: 19px;
    128138    top: 0;
    … …  
    139149    transition-duration: 0.2s;
    140150    background-clip: content-box;
     151
     152    --dashboard-advance-arrow-offset-end: 0px;
     153}
     154
     155body[dir=ltr] .dashboard-container .advance-arrow {
     156    right: var(--dashboard-advance-arrow-offset-end);
     157}
     158
     159body[dir=rtl] .dashboard-container .advance-arrow {
     160    left: var(--dashboard-advance-arrow-offset-end);
    141161}
    142162
    … …  
    157177    width: 8px;
    158178    height: 8px;
     179    margin-top: 2px;
     180    margin-bottom: 2px;
    159181    margin: 2px 4px 2px 2px;
     182
    160183    background-size: 6px;
     184
     185    --dashboard-advance-arrow-margin-start: 2px;
     186    --dashboard-advance-arrow-margin-end: 4px;
     187}
     188
     189body[dir=ltr] .toolbar.label-only .dashboard-container .advance-arrow {
     190    margin-left: var(--dashboard-advance-arrow-margin-start);
     191    margin-right: var(--dashboard-advance-arrow-margin-end);
     192}
     193
     194body[dir=rtl] .toolbar.label-only .dashboard-container .advance-arrow {
     195    margin-left: var(--dashboard-advance-arrow-margin-end);
     196    margin-right: var(--dashboard-advance-arrow-margin-start);
    161197}
    162198

  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css

    r209698 r214899  
    11/*
    2  * Copyright (C) 2014 Apple Inc. All rights reserved.
     2 * Copyright (C) 2014-2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    3232    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
    3333    color: hsl(0, 0%, 23%);
    34     padding: 0 12px 0 5px;
     34
     35    --debugger-dashboard-padding-start: 5px;
     36    --debugger-dashboard-padding-end: 12px;
     37}
     38
     39body[dir=ltr] .toolbar .dashboard.debugger {
     40    padding-left: var(--debugger-dashboard-padding-start);
     41    padding-right: var(--debugger-dashboard-padding-end);
     42}
     43
     44body[dir=rtl] .toolbar .dashboard.debugger {
     45    padding-left: var(--debugger-dashboard-padding-end);
     46    padding-right: var(--debugger-dashboard-padding-start);
    3547}
    3648
    … …  
    4153.dashboard.debugger .navigation-bar {
    4254    border: 0;
    43     margin-right: 4px;
     55
     56    --debugger-dashboard-navigation-bar-margin-end: 4px;
     57}
     58
     59body[dir=ltr] .dashboard.debugger .navigation-bar {
     60    margin-right: var(--debugger-dashboard-navigation-bar-margin-end);
     61}
     62
     63body[dir=rtl] .dashboard.debugger .navigation-bar {
     64    margin-left: var(--debugger-dashboard-navigation-bar-margin-end);
    4465}
    4566
    … …  
    105126    overflow: hidden;
    106127    flex: initial;
     128
     129    --debugger-dashboard-location-trailing-margin-end: 5px;
    107130}
    108131
    … …  
    115138    width: 16px;
    116139    height: 16px;
    117     margin-right: 5px;
     140}
     141
     142/* Add spacing between the ellipsis'd location and the up/down arrows. */
     143body[dir=ltr] .dashboard.debugger > .location > :last-child {
     144    margin-right: var(--debugger-dashboard-location-trailing-margin-end);
     145}
     146
     147body[dir=rtl] .dashboard.debugger > .location > :last-child {
     148    margin-left: var(--debugger-dashboard-location-trailing-margin-end);
    118149}
    119150
    … …  
    125156    width: 16px;
    126157    height: 16px;
     158}
     159
     160.dashboard.debugger > .location .function-icon {
     161    --debugger-dashboard-function-icon-margin-end: 3px;
     162}
     163
     164body[dir=ltr] .dashboard.debugger > .location .function-icon {
     165    margin-right: var(--debugger-dashboard-function-icon-margin-end);
     166}
     167
     168body[dir=rtl] .dashboard.debugger > .location .function-icon {
     169    margin-left: var(--debugger-dashboard-function-icon-margin-end);
    127170}
    128171
    … …  
    139182    padding-bottom: 1px;
    140183    -webkit-text-decoration-color: hsl(0, 0%, 66%);
    141    
     184
    142185    flex: initial;
    143186    text-overflow: ellipsis;
Note: See TracChangeset for help on using the changeset viewer.