Changeset 196713 in webkit
- Timestamp:
- Feb 17, 2016 12:29:50 PM (8 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 23 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r196692 r196713 1 2016-02-17 Matt Baker <mattbaker@apple.com> 2 3 Web Inspector: add CSS variables for common border/background colors 4 https://bugs.webkit.org/show_bug.cgi?id=154302 5 <rdar://problem/24680944> 6 7 Reviewed by Timothy Hatcher. 8 9 Added CSS variables for commonly used border and background colors, and removed 10 duplicate CSS variables with less generic names. Inactive border colors declared in 11 rules with a body.window-inactive selector have been removed. A new rule using this 12 selector in Variables.css sets "--border-color" to the inactive color. 13 14 * UserInterface/Views/CSSStyleDetailsSidebarPanel.css: 15 (.sidebar > .panel.details.css-style > .content > .pseudo-classes): 16 (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)): 17 (.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label)): 18 * UserInterface/Views/DataGrid.css: 19 (.data-grid.inline): 20 (.data-grid th): 21 (.data-grid :matches(th, td):not(:last-child)): 22 (body.window-inactive .data-grid th): Deleted. 23 (body.window-inactive .data-grid :matches(th, td):not(:last-child)): Deleted. 24 * UserInterface/Views/DebuggerSidebarPanel.css: 25 (.sidebar > .panel.navigation.debugger.paused .details-section.scripts): 26 * UserInterface/Views/DetailsSection.css: 27 (.details-section): 28 (.details-section .details-section:first-child): 29 (.details-section > .header): 30 (.details-section > .content > .group): 31 (.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child)): 32 * UserInterface/Views/FilterBar.css: 33 (.filter-bar): 34 * UserInterface/Views/FindBanner.css: 35 (.find-banner): 36 (body.window-inactive .find-banner): Deleted. 37 * UserInterface/Views/LayerTreeDetailsSidebarPanel.css: 38 (.panel.details.layer-tree .bottom-bar): 39 * UserInterface/Views/Main.css: 40 (body.docked.bottom): 41 (body.docked.right): 42 (#split-content-browser): 43 (#split-content-browser > .navigation-bar): 44 (body.window-inactive.docked.bottom): Deleted. 45 (body.window-inactive.docked.right): Deleted. 46 (body.window-inactive #split-content-browser): Deleted. 47 * UserInterface/Views/MemoryCategoryView.css: 48 (.memory-category-view): 49 (.memory-category-view > .details): 50 (body.window-inactive .memory-category-view): Deleted. 51 (body.window-inactive .memory-category-view > .details): Deleted. 52 * UserInterface/Views/MemoryTimelineView.css: 53 (.timeline-view.memory): 54 (.timeline-view.memory > .content > .overview): 55 (.timeline-view.memory > .content > .details > .subtitle): 56 (.timeline-view.memory > .content > .overview > .divider): 57 (body.window-inactive .timeline-view.memory): Deleted. 58 (body.window-inactive .timeline-view.memory > .content > .overview): Deleted. 59 (body.window-inactive .timeline-view.memory > .content > .details > .subtitle): Deleted. 60 (body.window-inactive .timeline-view.memory > .content > .overview > .divider): Deleted. 61 * UserInterface/Views/NavigationBar.css: 62 (.navigation-bar): 63 (body.window-inactive .navigation-bar): Deleted. 64 * UserInterface/Views/NavigationSidebarPanel.css: 65 (.sidebar > .panel.navigation > .overflow-shadow): 66 (body.window-inactive .sidebar > .panel.navigation > .overflow-shadow): Deleted. 67 * UserInterface/Views/NetworkSidebarPanel.css: 68 (.sidebar > .panel.navigation.network > .title-bar): 69 (body.window-inactive .sidebar > .panel.navigation.network > .title-bar): Deleted. 70 * UserInterface/Views/OverviewTimelineView.css: 71 (.timeline-view.overview > .timeline-ruler > .header): 72 (body.window-inactive .timeline-view.overview > .timeline-ruler > .header): Deleted. 73 * UserInterface/Views/QuickConsole.css: 74 (.quick-console): 75 (body.window-inactive .quick-console): Deleted. 76 * UserInterface/Views/Sidebar.css: 77 (.sidebar): 78 (.sidebar.left): 79 (.sidebar.right): 80 (body.window-inactive .sidebar.left): Deleted. 81 (body.window-inactive .sidebar.right): Deleted. 82 * UserInterface/Views/TimelineDataGrid.css: 83 (.data-grid.timeline th): 84 (body.window-inactive .data-grid.timeline th): Deleted. 85 * UserInterface/Views/TimelineRuler.css: 86 (.timeline-ruler > .header): 87 (body.window-inactive .timeline-ruler > .header): Deleted. 88 * UserInterface/Views/TimelineSidebarPanel.css: 89 (.sidebar > .panel.navigation.timeline > .title-bar): 90 (.sidebar > .panel.navigation.timeline > .title-bar.timeline-events): 91 (body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar): Deleted. 92 (body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events): Deleted. 93 * UserInterface/Views/Toolbar.css: 94 (body.latest-mac .toolbar .dashboard-container): 95 * UserInterface/Views/Variables.css: 96 (:root): 97 (body.window-inactive *): 98 * UserInterface/Views/VisualStyleSelectorSection.css: 99 (.details-section.visual-style-selector-section:not(.collapsed) > .header): 100 (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider): 101 1 102 2016-02-17 Matt Baker <mattbaker@apple.com> 2 103 -
trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
r196236 r196713 41 41 .sidebar > .panel.details.css-style > .content > .pseudo-classes { 42 42 padding: 6px 10px; 43 border-bottom: 1px solid hsl(0, 0%, 70%);43 border-bottom: 1px solid var(--border-color); 44 44 45 45 display: flex; … … 72 72 width: 100%; 73 73 background-color: white; 74 border-top: 1px solid hsl(0, 0%, 70%);74 border-top: 1px solid var(--border-color); 75 75 } 76 76 … … 183 183 margin-top: 0; 184 184 border-top: none; 185 border-bottom: 1px solid hsl(0, 0%, 70%);185 border-bottom: 1px solid var(--border-color); 186 186 } 187 187 -
trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
r196620 r196713 59 59 60 60 .data-grid.inline { 61 border: 1px solid hsl(0, 0%, 70%);61 border: 1px solid var(--border-color); 62 62 } 63 63 … … 76 76 background-color: white; 77 77 78 border-bottom: 1px solid hsl(0, 0%, 70%);78 border-bottom: 1px solid var(--border-color); 79 79 80 80 font-weight: normal; … … 87 87 } 88 88 89 body.window-inactive .data-grid th {90 border-bottom-color: hsl(0, 0%, 85%);91 }92 93 89 .data-grid :matches(th, td):not(:last-child) { 94 border-right: 1px solid hsl(0, 0%, 70%); 95 } 96 97 body.window-inactive .data-grid :matches(th, td):not(:last-child) { 98 border-right-color: hsl(0, 0%, 85%); 90 border-right: 1px solid var(--border-color); 99 91 } 100 92 -
trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
r192283 r196713 58 58 59 59 .sidebar > .panel.navigation.debugger.paused .details-section.scripts { 60 border-bottom: 1px solid hsl(0, 0%, 70%);60 border-bottom: 1px solid var(--border-color); 61 61 } 62 62 -
trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
r196169 r196713 26 26 .details-section { 27 27 font-size: 10px; 28 background-color: hsl(0, 0%, 94%);29 border-bottom: 1px solid hsl(0, 0%, 70%);28 background-color: var(--panel-background-color); 29 border-bottom: 1px solid var(--border-color); 30 30 } 31 31 … … 40 40 41 41 .details-section .details-section:first-child { 42 border-top: 1px solid hsl(0, 0%, 70%);42 border-top: 1px solid var(--border-color); 43 43 } 44 44 … … 48 48 height: 23px; 49 49 50 background-color: hsl(0, 0%, 94%);50 background-color: var(--panel-background-color); 51 51 color: hsl(0, 0%, 22%); 52 52 … … 160 160 .details-section > .content > .group { 161 161 display: table-row-group; 162 border-bottom: 1px solid hsl(0, 0%, 70%);162 border-bottom: 1px solid var(--border-color); 163 163 } 164 164 … … 172 172 173 173 .details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) { 174 border-top: 1px solid hsl(0, 0%, 70%);174 border-top: 1px solid var(--border-color); 175 175 } 176 176 -
trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css
r191004 r196713 32 32 overflow: hidden; 33 33 34 background-color: hsl(0, 0%, 94%);34 background-color: var(--panel-background-color); 35 35 } 36 36 -
trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
r196634 r196713 25 25 26 26 .find-banner { 27 border-bottom: 1px solid hsl(0, 0%, 70%);27 border-bottom: 1px solid var(--border-color); 28 28 29 29 position: absolute; … … 43 43 44 44 z-index: var(--z-index-header); 45 }46 47 body.window-inactive .find-banner {48 border-bottom-color: hsl(0, 0%, 85%);49 45 } 50 46 -
trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css
r187105 r196713 59 59 bottom: 0; 60 60 width: 100%; 61 border-top: 1px solid hsl(0, 0%, 70%);61 border-top: 1px solid var(--border-color); 62 62 background-color: white; 63 63 } -
trunk/Source/WebInspectorUI/UserInterface/Views/Main.css
r195512 r196713 61 61 62 62 body.docked.bottom { 63 border-top: 1px solid hsl(0, 0%, 78%);63 border-top: 1px solid var(--border-color); 64 64 } 65 65 66 66 body.docked.right { 67 border-left: 1px solid hsl(0, 0%, 70%); 68 } 69 70 body.window-inactive.docked.bottom { 71 border-top-color: hsl(0, 0%, 85%); 72 } 73 74 body.window-inactive.docked.right { 75 border-left-color: hsl(0, 0%, 85%); 67 border-left: 1px solid var(--border-color); 76 68 } 77 69 … … 157 149 158 150 #split-content-browser { 159 border-top: 1px solid hsl(0, 0%, 70%); 160 } 161 162 body.window-inactive #split-content-browser { 163 border-top-color: hsl(0, 0%, 85%); 151 border-top: 1px solid var(--border-color); 164 152 } 165 153 … … 167 155 cursor: row-resize; 168 156 169 background-color: hsl(0, 0%, 94%);157 background-color: var(--panel-background-color); 170 158 } 171 159 -
trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
r195999 r196713 26 26 .memory-category-view { 27 27 display: flex; 28 border-bottom: 1px solid var(-- memory-active-divider-color);28 border-bottom: 1px solid var(--border-color); 29 29 } 30 30 … … 33 33 padding-left: 15px; 34 34 padding-top: 10px; 35 border-right: 1px solid var(-- memory-active-divider-color);35 border-right: 1px solid var(--border-color); 36 36 font-family: '-webkit-system-font'; 37 37 font-size: 12px; 38 38 color: hsl(0, 0%, 70%); 39 }40 41 body.window-inactive .memory-category-view {42 border-bottom-color: var(--memory-inactive-divider-color);43 }44 45 body.window-inactive .memory-category-view > .details {46 border-right-color: var(--memory-inactive-divider-color);47 39 } 48 40 -
trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
r195999 r196713 26 26 .timeline-view.memory { 27 27 overflow: scroll; 28 border-top: 1px solid var(--memory-active-divider-color); 29 } 30 31 body.window-inactive .timeline-view.memory { 32 border-top-color: var(--memory-inactive-divider-color); 28 border-top: 1px solid var(--border-color); 33 29 } 34 30 … … 41 37 padding: 10px; 42 38 margin-bottom: 10px; 43 border-bottom: 1px solid var(-- memory-active-divider-color);39 border-bottom: 1px solid var(--border-color); 44 40 } 45 41 … … 57 53 .timeline-view.memory > .content > .details > .subtitle { 58 54 padding: 10px; 59 border-bottom: 1px solid var(-- memory-active-divider-color);55 border-bottom: 1px solid var(--border-color); 60 56 } 61 57 … … 80 76 81 77 .timeline-view.memory > .content > .overview > .divider { 82 border-right: 1px solid var(-- memory-active-divider-color);78 border-right: 1px solid var(--border-color); 83 79 margin-left: 10px; 84 80 margin-right: 10px; 85 }86 87 body.window-inactive .timeline-view.memory > .content > .overview {88 border-bottom-color: var(--memory-inactive-divider-color);89 }90 91 body.window-inactive .timeline-view.memory > .content > .details > .subtitle {92 border-bottom-color: var(--memory-inactive-divider-color);93 }94 95 body.window-inactive .timeline-view.memory > .content > .overview > .divider {96 border-right-color: var(--memory-inactive-divider-color);97 81 } 98 82 -
trunk/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
r187105 r196713 30 30 31 31 box-shadow: inset hsla(0, 0%, 100%, 0.2) 0 1px 0; 32 border-bottom: 1px solid hsl(0, 0%, 70%);32 border-bottom: 1px solid var(--border-color); 33 33 34 34 height: 29px; … … 38 38 39 39 outline: none; 40 }41 42 body.window-inactive .navigation-bar {43 border-bottom-color: hsl(0, 0%, 85%);44 40 } 45 41 -
trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
r195303 r196713 46 46 opacity: 0; 47 47 48 border-bottom: 1px solid hsl(0, 0%, 70%);48 border-bottom: 1px solid var(--border-color); 49 49 } 50 50 … … 52 52 top: 28px; 53 53 bottom: initial; 54 }55 56 body.window-inactive .sidebar > .panel.navigation > .overflow-shadow {57 border-bottom-color: hsl(0, 0%, 85%);58 54 } 59 55 -
trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
r195303 r196713 43 43 height: 23px; 44 44 45 border-bottom: 1px solid hsl(0, 0%, 70%);46 background-color: hsl(0, 0%, 94%);45 border-bottom: 1px solid var(--border-color); 46 background-color: var(--panel-background-color); 47 47 color: hsl(0, 0%, 22%); 48 48 … … 57 57 white-space: nowrap; 58 58 overflow: hidden; 59 }60 61 body.window-inactive .sidebar > .panel.navigation.network > .title-bar {62 border-bottom-color: hsl(0, 0%, 85%);63 59 } 64 60 -
trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css
r187105 r196713 33 33 34 34 .timeline-view.overview > .timeline-ruler > .header { 35 border-top: 1px solid hsl(0, 0%, 70%);35 border-top: 1px solid var(--border-color); 36 36 height: 23px; 37 }38 39 body.window-inactive .timeline-view.overview > .timeline-ruler > .header {40 border-top-color: hsl(0, 0%, 85%);41 37 } 42 38 -
trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
r187105 r196713 31 31 32 32 background-color: white; 33 border-top: 1px solid hsl(0, 0%, 74%);33 border-top: 1px solid var(--border-color); 34 34 padding: 3px 0 4px; 35 35 … … 38 38 39 39 font-family: Menlo, monospace; 40 }41 42 body.window-inactive .quick-console {43 border-top-color: hsl(0, 0%, 85%);44 40 } 45 41 -
trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
r187105 r196713 27 27 position: relative; 28 28 29 background-color: hsl(0, 0%, 94%);29 background-color: var(--panel-background-color); 30 30 } 31 31 … … 78 78 79 79 .sidebar.left { 80 border-right: 1px solid hsl(0, 0%, 70%);80 border-right: 1px solid var(--border-color); 81 81 } 82 82 83 83 .sidebar.right { 84 border-left: 1px solid hsl(0, 0%, 70%);84 border-left: 1px solid var(--border-color); 85 85 } 86 87 body.window-inactive .sidebar.left {88 border-right-color: hsl(0, 0%, 85%);89 }90 91 body.window-inactive .sidebar.right {92 border-left-color: hsl(0, 0%, 85%);93 } -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
r195303 r196713 25 25 26 26 .data-grid.timeline th { 27 border-top: 1px solid hsl(0, 0%, 70%); 28 } 29 30 body.window-inactive .data-grid.timeline th { 31 border-top-color: hsl(0, 0%, 85%); 27 border-top: 1px solid var(--border-color); 32 28 } 33 29 -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
r195519 r196713 44 44 45 45 .timeline-ruler > .header { 46 border-bottom: 1px solid hsl(0, 0%, 70%);46 border-bottom: 1px solid var(--border-color); 47 47 48 48 position: absolute; … … 51 51 right: 0; 52 52 height: 29px; 53 }54 55 body.window-inactive .timeline-ruler > .header {56 border-bottom-color: hsl(0, 0%, 85%);57 53 } 58 54 -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
r195303 r196713 58 58 height: 29px; 59 59 60 border-bottom: 1px solid hsl(0, 0%, 70%);61 background-color: hsl(0, 0%, 94%);60 border-bottom: 1px solid var(--border-color); 61 background-color: var(--panel-background-color); 62 62 color: hsl(0, 0%, 22%); 63 63 … … 72 72 white-space: nowrap; 73 73 overflow: hidden; 74 }75 76 body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar {77 border-bottom-color: hsl(0, 0%, 85%);78 74 } 79 75 … … 101 97 display: flex; 102 98 height: 23px; 103 border-top: 1px solid hsl(0, 0%, 70%);99 border-top: 1px solid var(--border-color); 104 100 } 105 101 … … 118 114 .sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar > .default-item-selected > .multiple .arrows { 119 115 color: black; 120 }121 122 body.window-inactive .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {123 border-top-color: hsl(0, 0%, 85%);124 116 } 125 117 -
trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
r192134 r196713 153 153 body.latest-mac .toolbar .search-bar > input[type="search"], 154 154 body.latest-mac .toolbar .dashboard-container { 155 background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));155 background-image: linear-gradient(hsl(0, 0%, 99%), var(--panel-background-color)); 156 156 box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px; 157 157 -
trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css
r195999 r196713 1 1 /* 2 * Copyright (C) 2015 Apple Inc. All rights reserved.2 * Copyright (C) 2015-2016 Apple Inc. All rights reserved. 3 3 * 4 4 * Redistribution and use in source and binary forms, with or without … … 33 33 --z-index-uncaught-exception-sheet: 4096; 34 34 35 --border-color: hsl(0, 0%, 70%); 36 --panel-background-color: hsl(0, 0%, 94%); 37 35 38 --console-secondary-text-color: hsla(0, 0%, 0%, 0.33); 36 39 … … 41 44 --syntax-highlight-symbol-color: hsl(172, 45%, 45%); 42 45 43 --memory-active-divider-color: hsl(0, 0%, 70%);44 --memory-inactive-divider-color: hsl(0, 0%, 85%);45 46 --memory-javascript-fill-color: hsl(269, 65%, 75%); 46 47 --memory-javascript-stroke-color: hsl(269, 33%, 50%); … … 54 55 --memory-max-comparison-stroke-color: hsl(220, 10%, 55%); 55 56 } 57 58 body.window-inactive * { 59 --border-color: hsl(0, 0%, 85%); 60 } -
trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css
r193913 r196713 30 30 31 31 .details-section.visual-style-selector-section:not(.collapsed) > .header { 32 border-bottom: 1px solid hsl(0, 0%, 70%);32 border-bottom: 1px solid var(--border-color); 33 33 } 34 34 … … 106 106 padding: 2px; 107 107 background-color: hsl(0, 0%, 95%); 108 border-color: hsl(0, 0%, 70%);108 border-color: var(--border-color); 109 109 border-style: solid; 110 110 border-width: 1px 0;
Note: See TracChangeset
for help on using the changeset viewer.