aboutprofiling.css (3280B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .perf { 6 max-width: 670px; 7 margin: 10vh auto; 8 padding: 0 5%; 9 } 10 11 /* Intro */ 12 13 .perf-intro-title-bar { 14 display: flex; 15 align-items: center; 16 justify-content: space-between; 17 } 18 19 .perf-intro-row { 20 margin: 1.7em 0; 21 display: flex; 22 line-height: 1.8em; 23 align-items: center; 24 } 25 26 .perf-intro-icon { 27 width: 4em; 28 height: 4em; 29 margin-inline-end: 1.3em; 30 background-image: url(chrome://devtools/skin/images/tool-profiler.svg); 31 background-size: 100%; 32 -moz-context-properties: fill; 33 fill: currentColor; 34 opacity: 0.5; 35 } 36 37 /* Shared rules */ 38 39 .perf-toggle-label { 40 padding: 7px 0; 41 display: grid; 42 grid-template-columns: max-content auto; 43 max-width: max-content; 44 } 45 46 .perf-toggle-text-label { 47 display: flex; 48 align-items: baseline; 49 gap: 1em; 50 } 51 52 .perf-toggle-feature-value { 53 font-size: 11px; 54 color: var(--text-color-deemphasized); 55 } 56 57 .perf-toggle-description { 58 font-size: 13px; 59 line-height: 1.8; 60 color: var(--text-color-deemphasized); 61 grid-column: 2; 62 } 63 64 /* Presets section */ 65 66 .perf-presets { 67 margin: 2em 0; 68 border-bottom: 1px solid var(--border-color); 69 padding-bottom: 1em; 70 } 71 72 /* Features and settings */ 73 74 .perf-settings-row { 75 display: flex; 76 line-height: 1.8; 77 } 78 79 .perf-settings-range-row { 80 display: grid; 81 grid-template-columns: 140px 1fr 90px; 82 align-items: center; 83 min-height: 30px; 84 } 85 86 .perf-settings-range-input { 87 margin: 0; 88 } 89 90 .perf-settings-range-value { 91 text-align: end; 92 } 93 94 .perf-settings-thread-columns { 95 display: flex; 96 line-height: 1.3; 97 } 98 99 .perf-settings-thread-column { 100 flex: 1; 101 } 102 103 .perf-settings-thread-label { 104 margin-block: 12px; 105 } 106 107 .perf-settings-all-threads { 108 margin-block: 12px; 109 } 110 111 .perf-settings-text-label { 112 flex: 1; 113 } 114 115 .perf-settings-text-input { 116 width: 100%; 117 box-sizing: border-box; 118 } 119 120 #perftools-settings-thread-text { 121 margin-inline: 0; 122 } 123 124 .perf-settings-checkbox-label-disabled > :not(input) { 125 /* The checkboxes already get their opacity set to 0.5 in common.inc.css, 126 so only target the text. The descriptions get their text deemphasized, 127 so set a value a bit higher than 0.5 to compensate for that. */ 128 opacity: 0.65; 129 } 130 131 /* Local build section */ 132 133 .perf-settings-dir-list { 134 box-sizing: border-box; 135 width: 100%; 136 height: 100px; 137 border: 1px solid var(--border-color); 138 margin: 0; 139 padding: 0; 140 overflow-y: auto; 141 background-color: var(--background-color-box); 142 } 143 144 .perf-settings-dir-list:hover { 145 border-color: var(--border-color-interactive-hover); 146 } 147 148 .pref-settings-dir-list-item { 149 display: flex; 150 padding: 3px 5px; 151 } 152 153 .pref-settings-dir-list-item::before { 154 content: url(chrome://devtools/skin/images/folder.svg); 155 display: inline-flex; 156 align-self: center; 157 width: 12px; 158 height: 12px; 159 margin-inline-end: 5px; 160 -moz-context-properties: fill; 161 fill: currentColor; 162 } 163 164 .perf-settings-dir-list-button-group { 165 padding-block: 4px; 166 } 167 168 .perf-settings-dir-list-button-group > button { 169 margin-inline: 0 8px; 170 } 171 172 /* Back button */ 173 174 .perf-back { 175 margin-block-end: 13px; 176 } 177 178 .perf-back-button { 179 /* Remove the inherited margins */ 180 margin-inline: 0; 181 }