Changeset 220710 in webkit


Ignore:
Timestamp:
Aug 14, 2017 10:56:56 AM (7 years ago)
Author:
Matt Baker
Message:

Web Inspector: Remove text-shadow and gradient backgrounds
​https://bugs.webkit.org/show_bug.cgi?id=175430

Reviewed by Brian Burg.

Inspector should more closely match flat system look. Remove text-shadow
embossing and replace linear gradients in popover backgrounds and selected
tree item background color.

  • UserInterface/Views/CSSStyleDetailsSidebarPanel.css:

(.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):

  • UserInterface/Views/CompletionSuggestionsView.css:

(.completion-suggestions-container:not(:active) > .item.selected,):

  • UserInterface/Views/DebuggerDashboardView.css:

(.toolbar .dashboard.debugger):

  • UserInterface/Views/HierarchicalPathComponent.css:

(.hierarchical-path-component > .title):

  • UserInterface/Views/Main.css:

(.bouncy-highlight):

  • UserInterface/Views/NavigationSidebarPanel.css:

(.sidebar > .panel.navigation > .content .empty-content-placeholder > .message):

  • UserInterface/Views/Popover.js:

(WI.Popover.prototype._drawBackground):

  • UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:

(.sidebar > .details.recording-trace > .content > .no-trace-data > .message):

  • UserInterface/Views/RulesStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style .rules .label):
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):
(@media (-webkit-min-device-pixel-ratio: 2)): Deleted.
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,): Deleted.

  • UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:

(.style-spreadsheet .inherited):

  • UserInterface/Views/TimelineDataGrid.css:

(.tree-outline.timeline-data-grid .item:hover):

  • UserInterface/Views/TimelineDataGrid.js:

(WI.TimelineDataGrid.prototype._createPopoverContent):

  • UserInterface/Views/Variables.css:

(:root):

Location:
trunk/Source/WebInspectorUI
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r220614 r220710  
     12017-08-14  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Remove text-shadow and gradient backgrounds
     4        https://bugs.webkit.org/show_bug.cgi?id=175430
     5
     6        Reviewed by Brian Burg.
     7
     8        Inspector should more closely match flat system look. Remove text-shadow
     9        embossing and replace linear gradients in popover backgrounds and selected
     10        tree item background color.
     11
     12        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
     13        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
     14        * UserInterface/Views/CompletionSuggestionsView.css:
     15        (.completion-suggestions-container:not(:active) > .item.selected,):
     16        * UserInterface/Views/DebuggerDashboardView.css:
     17        (.toolbar .dashboard.debugger):
     18        * UserInterface/Views/HierarchicalPathComponent.css:
     19        (.hierarchical-path-component > .title):
     20        * UserInterface/Views/Main.css:
     21        (.bouncy-highlight):
     22        * UserInterface/Views/NavigationSidebarPanel.css:
     23        (.sidebar > .panel.navigation > .content .empty-content-placeholder > .message):
     24        * UserInterface/Views/Popover.js:
     25        (WI.Popover.prototype._drawBackground):
     26        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:
     27        (.sidebar > .details.recording-trace > .content > .no-trace-data > .message):
     28        * UserInterface/Views/RulesStyleDetailsPanel.css:
     29        (.sidebar > .panel.details.css-style .rules .label):
     30        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):
     31        (@media (-webkit-min-device-pixel-ratio: 2)): Deleted.
     32        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,): Deleted.
     33        * UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:
     34        (.style-spreadsheet .inherited):
     35        * UserInterface/Views/TimelineDataGrid.css:
     36        (.tree-outline.timeline-data-grid .item:hover):
     37        * UserInterface/Views/TimelineDataGrid.js:
     38        (WI.TimelineDataGrid.prototype._createPopoverContent):
     39        * UserInterface/Views/Variables.css:
     40        (:root):
     41
    1422017-08-11  Nikita Vasilyev  <nvasilyev@apple.com>
    243

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

    r215192 r220710  
    5656.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
    5757    color: hsl(0, 0%, 37%);
    58     text-shadow: white 0 1px 0;
    5958
    6059    margin: 0 5px;

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

    r217229 r220710  
    7373.completion-suggestions-container:not(:active) > .item.selected,
    7474.completion-suggestions-container > .item:active {
    75     box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
    76     background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
    77 
     75    background-color: var(--selected-background-color);
    7876    color: white;
    79     text-shadow: hsl(209, 41%, 34%) 0 1px 0;
    8077}

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

    r214899 r220710  
    3030
    3131    text-align: center;
    32     text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
    3332    color: hsl(0, 0%, 23%);
    3433

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

    r212688 r220710  
    9292    vertical-align: top;
    9393
    94     text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
    9594    line-height: 20px;
    9695    height: 20px;

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

    r220114 r220710  
    327327
    328328    box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px;
    329     text-shadow: white 0 0 2px;
    330 
    331     background: linear-gradient(to bottom, hsl(54, 93%, 70%), hsl(50, 84%, 67%));
    332     border-radius: 7px;
     329
     330    background-color: hsl(54, 93%, 70%);
    333331
    334332    padding: 2px 4px;

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

    r218975 r220710  
    7171    white-space: nowrap;
    7272
    73     font-size: 13px;
     73    font-size: var(--sidebar-no-results-message-font-size);
     74    color: var(--text-color-gray-medium);
    7475
    75     color: white;
    76     background-color: hsla(0, 0%, 0%, 0.15);
    77     text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
    78     box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
    79 
    80     border-radius: 6px;
    8176    padding: 5px 15px 6px;
    8277}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js

    r220119 r220710  
    423423        ctx.clip();
    424424
    425         // Gradient fill, top-to-bottom.
    426         var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
    427         fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
    428         fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
    429         ctx.fillStyle = fillGradient;
     425        // Panel background color fill.
     426        ctx.fillStyle = "rgb(236, 236, 236)";
    430427        ctx.fillRect(0, 0, width, height);
    431428

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

    r220188 r220710  
    4545    display: inline-block;
    4646    padding: 5px 15px 6px;
    47     font-size: 13px;
     47    font-size: var(--sidebar-no-results-message-font-size);
    4848    white-space: nowrap;
    49     color: white;
    50     text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
    51     background-color: hsla(0, 0%, 0%, 0.15);
    52     box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
    53     border-radius: 6px;
     49    color: var(--text-color-gray-medium);
    5450}

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

    r216692 r220710  
    3030.sidebar > .panel.details.css-style .rules .label {
    3131    color: hsl(0, 0%, 60%);
    32     text-shadow: white 0 1px 0;
    3332    padding: 0 8px;
    3433}
    … …  
    8483
    8584.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
    86     font-size: 13px;
    87     color: white;
    88     background-color: hsla(0, 0%, 0%, 0.15);
    89     text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
    90     box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
    91     border-radius: 6px;
    9285    padding: 5px 15px 6px;
     86    font-size: var(--sidebar-no-results-message-font-size);
     87    color: var(--text-color-gray-medium);
    9388}
    94 
    95 @media (-webkit-min-device-pixel-ratio: 2) {
    96     .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,
    97     .no-filter-results-message {
    98         border-width: 0.5px !important;
    99     }
    100 }

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

    r220462 r220710  
    105105.style-spreadsheet .inherited {
    106106    color: hsl(0, 0%, 60%);
    107     text-shadow: white 0 1px 0;
    108107    padding: 4px 6px;
    109108    border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);

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

    r203843 r220710  
    2525
    2626.tree-outline.timeline-data-grid .item:hover {
     27    border-radius: 3px;
    2728    color: white;
    28     border-radius: 4px;
    29     box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
    30     background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
    31     background-origin: padding-box;
    32     background-clip: padding-box;
    33     text-shadow: hsl(209, 41%, 34%) 0 1px 0;
     29    background-color: var(--selected-background-color);
    3430}
    3531

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js

    r220119 r220710  
    503503        }
    504504
    505         var content = document.createElement("div");
    506         content.className = "timeline-data-grid-popover";
     505        let content = document.createElement("div");
    507506        content.appendChild(this._popoverCallStackTreeOutline.element);
    508507        return content;

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

    r220114 r220710  
    5353    --button-background-color-pressed: hsl(0, 0%, 85%);
    5454
    55     --panel-background-color: hsl(0, 0%, 94%);
     55    --panel-background-color: hsl(0, 0%, 93%);
    5656    --panel-background-color-light: hsl(0, 0%, 96%);
    5757
    … …  
    5959    --console-prompt-min-height: 30px;
    6060
    61     --text-color-gray-medium: hsl(0, 0%, 50%);
     61    --sidebar-no-results-message-font-size: 16px;
     62
     63    --text-color-gray-medium: hsl(0, 0%, 52%);
    6264    --error-text-color: hsl(0, 86%, 47%);
    6365
Note: See TracChangeset for help on using the changeset viewer.