Changeset 214846 in webkit


Ignore:
Timestamp:
Apr 3, 2017 3:10:36 PM (7 years ago)
Author:
BJ Burg
Message:

Web Inspector: RTL: layout issues in call frame tree elements and async call stacks
​https://bugs.webkit.org/show_bug.cgi?id=170419

Reviewed by Matt Baker.

  • UserInterface/Views/CallFrameTreeElement.css:

(.tree-outline .item.call-frame .status):
(body[dir=ltr] .tree-outline .item.call-frame .status):
(body[dir=rtl] .tree-outline .item.call-frame .status):
Flip the current call frame indicator and make sure it sticks to the leading edge.

(.tree-outline .item.call-frame.async-boundary):
(body[dir=ltr] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
(body[dir=rtl] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
(.tree-outline .item.call-frame.async-boundary .icon):
(body[dir=ltr] .tree-outline .item.call-frame.async-boundary .icon):
(body[dir=rtl] .tree-outline .item.call-frame.async-boundary .icon):
Flip the icon's padding.

(.tree-outline .item.call-frame.async-boundary::after):
(body[dir=ltr] .tree-outline .item.call-frame.async-boundary::after):
(body[dir=rtl] .tree-outline .item.call-frame.async-boundary::after):
(.tree-outline .item.call-frame.async-boundary::before):
(body[dir=ltr] .tree-outline .item.call-frame.async-boundary::before):
(body[dir=rtl] .tree-outline .item.call-frame.async-boundary::before):
(.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary): Deleted.
Fix the leading and trailing horizontal rules so they have correct spacing.

  • UserInterface/Views/CallFrameView.css:

(.call-frame .icon): Remove redundant property.

  • UserInterface/Views/DebuggerSidebarPanel.css:

(.sidebar > .panel.navigation.debugger .tree-outline.single-thread):
(body[dir=ltr] .sidebar > .panel.navigation.debugger .tree-outline.single-thread):
(body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread):
Fix the leading unindent for call tree frame elements.

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r214844 r214846  
     12017-04-03  Brian Burg  <bburg@apple.com>
     2
     3        Web Inspector: RTL: layout issues in call frame tree elements and async call stacks
     4        https://bugs.webkit.org/show_bug.cgi?id=170419
     5
     6        Reviewed by Matt Baker.
     7
     8        * UserInterface/Views/CallFrameTreeElement.css:
     9        (.tree-outline .item.call-frame .status):
     10        (body[dir=ltr] .tree-outline .item.call-frame .status):
     11        (body[dir=rtl] .tree-outline .item.call-frame .status):
     12        Flip the current call frame indicator and make sure it sticks to the leading edge.
     13
     14        (.tree-outline .item.call-frame.async-boundary):
     15        (body[dir=ltr] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
     16        (body[dir=rtl] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary):
     17        (.tree-outline .item.call-frame.async-boundary .icon):
     18        (body[dir=ltr] .tree-outline .item.call-frame.async-boundary .icon):
     19        (body[dir=rtl] .tree-outline .item.call-frame.async-boundary .icon):
     20        Flip the icon's padding.
     21
     22        (.tree-outline .item.call-frame.async-boundary::after):
     23        (body[dir=ltr] .tree-outline .item.call-frame.async-boundary::after):
     24        (body[dir=rtl] .tree-outline .item.call-frame.async-boundary::after):
     25        (.tree-outline .item.call-frame.async-boundary::before):
     26        (body[dir=ltr] .tree-outline .item.call-frame.async-boundary::before):
     27        (body[dir=rtl] .tree-outline .item.call-frame.async-boundary::before):
     28        (.tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary): Deleted.
     29        Fix the leading and trailing horizontal rules so they have correct spacing.
     30
     31        * UserInterface/Views/CallFrameView.css:
     32        (.call-frame .icon): Remove redundant property.
     33
     34        * UserInterface/Views/DebuggerSidebarPanel.css:
     35        (.sidebar > .panel.navigation.debugger .tree-outline.single-thread):
     36        (body[dir=ltr] .sidebar > .panel.navigation.debugger .tree-outline.single-thread):
     37        (body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread):
     38        Fix the leading unindent for call tree frame elements.
     39
    1402017-04-03  Matt Baker  <mattbaker@apple.com>
    241

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

    r214146 r214846  
    11/*
    2  * Copyright (C) 2016 Apple Inc. All rights reserved.
     2 * Copyright (C) 2016-2017 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2727    position: absolute;
    2828    float: none;
    29     left: 1px;
     29
     30    --call-frame-status-start: 1px;
     31    --call-frame-status-margin-start: 1px;
    3032}
    3133
    3234body[dir=ltr] .tree-outline .item.call-frame .status {
    33     margin-left: 0;
     35    left: var(--call-frame-status-start);
     36    margin-left: var(--call-frame-status-margin-start);
    3437}
    3538
    3639body[dir=rtl] .tree-outline .item.call-frame .status {
    37     margin-right: 0;
     40    transform: scaleX(-1);
     41
     42    right: var(--call-frame-status-start);
     43    margin-right: var(--call-frame-status-margin-start);
    3844}
    3945
    … …  
    5561    cursor: default;
    5662    color: var(--text-color-gray-medium);
     63
     64    --call-frame-async-boundary-padding-start: 5px;
     65    --call-frame-async-boundary-leading-rule-margin-start: -5px;
     66    --call-frame-async-boundary-leading-rule-margin-end: 1px;
     67    --call-frame-async-bonudary-trailing-rule-margin-start: 2px;
    5768}
    5869
    59 .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
    60     padding-left: 5px;
     70body[dir=ltr] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
     71    padding-left: var(--call-frame-async-boundary-padding-start);
     72}
     73
     74body[dir=rtl] .tree-outline:not(.single-thread) > .children > .item.call-frame.async-boundary {
     75    padding-right: var(--call-frame-async-boundary-padding-start);
    6176}
    6277
    … …  
    6479    float: none;
    6580    display: inline-block;
    66     margin-left: 0 !important;
     81
     82    --call-frame-async-boundary-icon-margin-start: 0;
     83}
     84
     85body[dir=ltr] .tree-outline .item.call-frame.async-boundary .icon {
     86    margin-left: var(--call-frame-async-boundary-icon-margin-start) !important;
     87}
     88
     89body[dir=rtl] .tree-outline .item.call-frame.async-boundary .icon {
     90    margin-right: var(--call-frame-async-boundary-icon-margin-start) !important;
    6791}
    6892
    … …  
    79103.tree-outline .item.call-frame.async-boundary::after {
    80104    width: 100%;
    81     margin-left: 2px;
     105}
     106
     107body[dir=ltr] .tree-outline .item.call-frame.async-boundary::after {
     108    margin-left: var(--call-frame-async-bonudary-trailing-rule-margin-start);
     109}
     110
     111body[dir=rtl] .tree-outline .item.call-frame.async-boundary::after {
     112    margin-right: var(--call-frame-async-bonudary-trailing-rule-margin-start);
    82113}
    83114
    84115.tree-outline .item.call-frame.async-boundary::before {
    85116    width: 30px;
    86     margin-left: -5px;
    87     margin-right: 1px;
     117}
     118
     119body[dir=ltr] .tree-outline .item.call-frame.async-boundary::before {
     120    margin-left: var(--call-frame-async-boundary-leading-rule-margin-start);
     121    margin-right: var(--call-frame-async-boundary-leading-rule-margin-end);
     122}
     123
     124body[dir=rtl] .tree-outline .item.call-frame.async-boundary::before {
     125    margin-left: var(--call-frame-async-boundary-leading-rule-margin-end);
     126    margin-right: var(--call-frame-async-boundary-leading-rule-margin-start);
    88127}
    89128

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

    r188017 r214846  
    3434    width: 16px;
    3535    height: 16px;
    36     margin-right: 3px;
    3736}
    3837

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

    r214843 r214846  
    6868
    6969.sidebar > .panel.navigation.debugger .tree-outline.single-thread {
    70     margin-left: -10px;
     70    --tree-outline-single-thread-margin-start: -10px;
     71}
     72
     73body[dir=ltr] .sidebar > .panel.navigation.debugger .tree-outline.single-thread {
     74    margin-left: var(--tree-outline-single-thread-margin-start);
     75}
     76
     77body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread {
     78    margin-right: var(--tree-outline-single-thread-margin-start);
    7179}
    7280
Note: See TracChangeset for help on using the changeset viewer.