Changeset 184978 in webkit


Ignore:
Timestamp:
May 28, 2015, 9:50:59 PM (10 years ago)
Author:
Nikita Vasilyev
Message:

Web Inspector: Update toolbar styles
​https://bugs.webkit.org/show_bug.cgi?id=145419

Also, use hairline borders (1 phisical pixel) on retina (DPI >= 2).

Reviewed by Timothy Hatcher.

  • UserInterface/Views/ButtonToolbarItem.css:

(.toolbar .item.button): Deleted.
(.toolbar.icon-and-label-vertical .item.button): Deleted.
(.toolbar.icon-and-label-horizontal .item.button): Deleted.
(.toolbar .item.button > .glyph): Deleted.
(.toolbar.small-size .item.button > .glyph): Deleted.

  • UserInterface/Views/DashboardContainerView.css:

(.toolbar .dashboard-container): Deleted.
(.toolbar.collapsed .dashboard-container): Deleted.
(.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container): Deleted.
(.toolbar .dashboard.slide-out-down): Deleted.
(.toolbar .dashboard.slide-in-up): Deleted.

  • UserInterface/Views/Toolbar.css:

(.toolbar .search-bar > input[type="search"]):
(.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container):
(body:not(.unknown-mac) .toolbar .dashboard-container):
(body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]):
(body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus):
(body:not(.unknown-mac) .toolbar .item.button:active):
(body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container):
(body.unknown-mac .toolbar .dashboard-container):
(body.unknown-mac .toolbar .search-bar > input[type="search"]):
(body.unknown-mac .toolbar .search-bar > input[type="search"]:focus):
(@media (-webkit-min-device-pixel-ratio: 2)):
(body.unknown-mac .toolbar .item.button:active):
(body.unknown-mac.window-inactive .toolbar .dashboard-container):

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r184977 r184978  
     12015-05-28  Nikita Vasilyev  <nvasilyev@apple.com>
     2
     3        Web Inspector: Update toolbar styles
     4        https://bugs.webkit.org/show_bug.cgi?id=145419
     5
     6        Also, use hairline borders (1 phisical pixel) on retina (DPI >= 2).
     7
     8        Reviewed by Timothy Hatcher.
     9
     10        * UserInterface/Views/ButtonToolbarItem.css:
     11        (.toolbar .item.button): Deleted.
     12        (.toolbar.icon-and-label-vertical .item.button): Deleted.
     13        (.toolbar.icon-and-label-horizontal .item.button): Deleted.
     14        (.toolbar .item.button > .glyph): Deleted.
     15        (.toolbar.small-size .item.button > .glyph): Deleted.
     16        * UserInterface/Views/DashboardContainerView.css:
     17        (.toolbar .dashboard-container): Deleted.
     18        (.toolbar.collapsed .dashboard-container): Deleted.
     19        (.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container): Deleted.
     20        (.toolbar .dashboard.slide-out-down): Deleted.
     21        (.toolbar .dashboard.slide-in-up): Deleted.
     22        * UserInterface/Views/Toolbar.css:
     23        (.toolbar .search-bar > input[type="search"]):
     24        (.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container):
     25        (body:not(.unknown-mac) .toolbar .dashboard-container):
     26        (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]):
     27        (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus):
     28        (body:not(.unknown-mac) .toolbar .item.button:active):
     29        (body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container):
     30        (body.unknown-mac .toolbar .dashboard-container):
     31        (body.unknown-mac .toolbar .search-bar > input[type="search"]):
     32        (body.unknown-mac .toolbar .search-bar > input[type="search"]:focus):
     33        (@media (-webkit-min-device-pixel-ratio: 2)):
     34        (body.unknown-mac .toolbar .item.button:active):
     35        (body.unknown-mac.window-inactive .toolbar .dashboard-container):
     36
    1372015-05-28  Devin Rousso  <drousso@apple.com>
    238

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

    r184750 r184978  
    2828    justify-content: center;
    2929
    30     border-radius: 4px;
    31     background-color: rgb(252, 252, 252);
    32 
    33     border: 1px solid transparent;
    34     border-top-color: white;
    35 
    36     box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
    37 
    3830    margin: 4px;
    39 
    4031    padding: 0 10px;
    41 }
    42 
    43 .toolbar .item.button:active {
    44     border-top-color: rgb(241, 241, 241);
    45     background-color: rgb(228, 228, 228);
    46 }
    47 
    48 body.window-inactive .toolbar .item.button {
    49     border: 1px solid rgb(220, 220, 220);
    50     background-color: rgb(246, 246, 246);
    51     box-shadow: none;
    5232}
    5333

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

    r184748 r184978  
    2626.toolbar .dashboard-container {
    2727    position: relative;
    28 
    2928    width: 36vw;
    3029
    3130    border-radius: 4px;
    32     background-color: rgb(252, 252, 252);
    33 
    34     border: 1px solid transparent;
    35     border-top-color: white;
    36 
    37     box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
    38 
    3931    margin: 4px;
    4032    overflow: hidden;
    4133}
    4234
    43 body.window-inactive .toolbar .dashboard-container {
    44     border: 1px solid rgb(220, 220, 220);
    45     background-color: rgb(246, 246, 246);
    46     box-shadow: none;
    47 }
    4835
    4936.toolbar.collapsed .dashboard-container {
    … …  
    8067
    8168    -webkit-animation-duration: 0.4s;
    82 }
    83 
    84 body.window-inactive .toolbar .dashboard {
    85     background-color: rgb(246, 246, 246);
    86     box-shadow: none;
    8769}
    8870

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

    r184877 r184978  
    106106.toolbar .search-bar > input[type="search"] {
    107107    width: 100%;
    108 
    109108    font-size: 12px;
    110 
    111     border-radius: 4px;
    112     background-color: rgb(252, 252, 252) !important;
    113 
    114     border: 1px solid transparent;
    115     border-top-color: white;
    116 
    117109    background-clip: initial;
    118 
    119110    margin: 4px;
    120 
    121     box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0);
    122     transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
    123 }
    124 
    125 .toolbar .search-bar > input[type="search"]:focus {
    126     box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
    127111}
    128112
    … …  
    131115}
    132116
    133 body.window-inactive .toolbar .search-bar > input[type="search"] {
    134     border: 1px solid rgb(220, 220, 220);
    135     background-color: rgb(246, 246, 246);
     117body:not(.unknown-mac) .toolbar .item.button,
     118body:not(.unknown-mac) .toolbar .search-bar > input[type="search"],
     119body:not(.unknown-mac) .toolbar .dashboard-container {
     120    background-color: hsl(0, 0%, 99%);
     121    border: 1px solid transparent;
     122    border-top-color: hsl(0, 0%, 100%);
     123    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0;
     124    border-radius: 4px;
     125}
     126
     127body:not(.unknown-mac) .toolbar .search-bar > input[type="search"] {
     128    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
     129    transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
     130}
     131
     132body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus {
     133    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
     134}
     135
     136body:not(.unknown-mac) .toolbar .item.button:active {
     137    border-top-color: hsl(0, 0%, 94%);
     138    background-color: hsl(0, 0%, 89%);
     139}
     140
     141body.window-inactive:not(.unknown-mac) .toolbar .item.button,
     142body.window-inactive:not(.unknown-mac) .toolbar .search-bar > input[type="search"],
     143body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container {
     144    border: 1px solid hsl(0, 0%, 86%);
     145    background-color: hsl(0, 0%, 96%);
    136146    box-shadow: none;
    137147}
     148
     149body.unknown-mac .toolbar .item.button,
     150body.unknown-mac .toolbar .search-bar > input[type="search"],
     151body.unknown-mac .toolbar .dashboard-container {
     152    background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));
     153    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
     154
     155    border-radius: 4px;
     156    border: 1px solid hsl(0, 1%, 82%);
     157    border-top-color: hsl(0, 0%, 83%);
     158    border-bottom-color: hsl(0, 0%, 76%);
     159}
     160
     161body.unknown-mac .toolbar .search-bar > input[type="search"] {
     162    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
     163    transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
     164}
     165
     166body.unknown-mac .toolbar .search-bar > input[type="search"]:focus {
     167    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
     168}
     169
     170@media (-webkit-min-device-pixel-ratio: 2) {
     171    body.unknown-mac .toolbar .item.button,
     172    body.unknown-mac .toolbar .search-bar > input[type="search"],
     173    body.unknown-mac .toolbar .dashboard-container {
     174        border: 0.5px solid hsl(0, 0%, 78%);
     175        border-top-color: hsl(0, 0%, 80%);
     176        border-bottom-color: hsl(0, 0%, 65%);
     177    }
     178}
     179
     180body.unknown-mac .toolbar .item.button:active {
     181    background-image: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 86%));
     182    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, inset 0 1px 1px -1px white;
     183}
     184
     185body.unknown-mac.window-inactive .toolbar .item.button,
     186body.unknown-mac.window-inactive .toolbar .search-bar > input[type="search"],
     187body.unknown-mac.window-inactive .toolbar .dashboard-container {
     188    opacity: 0.65;
     189    border-color: hsla(0, 0%, 0%, 0.15);
     190    background-color: transparent;
     191    background-image: none;
     192}
     193
     194@media (-webkit-min-device-pixel-ratio: 2) {
     195    body.unknown-mac.window-inactive .toolbar .item.button,
     196    body.unknown-mac.window-inactive .toolbar .search-bar > input[type="search"],
     197    body.unknown-mac.window-inactive .toolbar .dashboard-container {
     198        box-shadow: inset 0 0 1px 0 hsla(0, 0%, 0%, 0.1);
     199    }
     200}
Note: See TracChangeset for help on using the changeset viewer.