Changeset 240506 in webkit
- Timestamp:
- Jan 25, 2019 2:05:09 PM (5 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r240502 r240506 1 2019-01-25 Devin Rousso <drousso@apple.com> 2 3 Web Inspector: Timelines: DOMContentLoaded and load event lines need to be more obvious 4 https://bugs.webkit.org/show_bug.cgi?id=193186 5 <rdar://problem/45100694> 6 7 Reviewed by Joseph Pecoraro. 8 9 Shift around z-index values to make Timelines markers appear behind record bars. Widen the 10 marker hit region to make it easier to see the tooltip. 11 12 * UserInterface/Views/Variables.css: 13 (:root): 14 15 * UserInterface/Views/TimelineRuler.css: 16 (.timeline-ruler): 17 (.timeline-ruler > .markers): 18 (.timeline-ruler > .markers > .marker): 19 (body[dir=ltr] .timeline-ruler > .markers > .marker): 20 (body[dir=rtl] .timeline-ruler > .markers > .marker): 21 (.timeline-ruler > .markers > .marker::before): 22 (body[dir=ltr] .timeline-ruler > .markers > .marker::before): 23 (body[dir=rtl] .timeline-ruler > .markers > .marker::before): 24 (.timeline-ruler > .markers > .marker::after): Added. 25 (body[dir=ltr] .timeline-ruler > .markers > .marker::after): Added. 26 (body[dir=rtl] .timeline-ruler > .markers > .marker::after): Added. 27 (.timeline-ruler > .markers > .marker.current-time): 28 (.timeline-ruler > .markers > .marker.current-time::after): Added. 29 (.timeline-ruler > .markers > .marker.load-event): 30 (.timeline-ruler > .markers > .marker.dom-content-event): 31 (.timeline-ruler > .markers > .marker.timestamp): 32 (.timeline-ruler > .selection-handle): 33 (.timeline-ruler.both-handles-clamped > .selection-handle): 34 (.timeline-ruler > .shaded-area): 35 (.timeline-ruler > .markers > .marker.current-time::before): Deleted. 36 37 * UserInterface/Views/TimelineRecordBar.css: 38 (.timeline-record-bar): 39 (.timeline-record-bar > .segment): 40 41 * UserInterface/Views/CPUTimelineOverviewGraph.css: 42 (.timeline-overview-graph.cpu > .legend): 43 * UserInterface/Views/MemoryTimelineOverviewGraph.css: 44 (.timeline-overview-graph.memory > .legend): 45 1 46 2019-01-25 Devin Rousso <drousso@apple.com> 2 47 -
trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
r240457 r240506 36 36 position: absolute; 37 37 top: 0; 38 z-index: var(--timeline-record-z-index); 38 39 padding: 2px; 39 40 font-size: 8px; -
trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
r213942 r240506 36 36 position: absolute; 37 37 top: 0; 38 z-index: var(--timeline-record-z-index); 38 39 padding: 2px; 39 40 font-size: 8px; -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
r238484 r240506 27 27 position: absolute; 28 28 height: 12px; 29 z-index: 1;29 z-index: var(--timeline-record-z-index); 30 30 31 31 --timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start: 1px solid hsla(215, 67%, 53%, 0.7) !important; … … 39 39 border-radius: 3px; 40 40 min-width: 4px; 41 z-index: 1;41 z-index: var(--timeline-record-z-index); 42 42 } 43 43 -
trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
r230891 r240506 27 27 position: relative; 28 28 pointer-events: none; 29 z-index: 1;30 29 31 30 --timeline-ruler-marker-translateX: -1px; … … 104 103 right: 0; 105 104 bottom: 0; 106 z-index: 10;105 z-index: var(--timeline-marker-z-index); 107 106 } 108 107 … … 119 118 top: 0; 120 119 bottom: 0; 121 pointer-events: all; 122 123 border: 0 solid hsla(0, 0%, 50%, 0.5); 120 width: 3px; 121 color: hsla(0, 0%, 50%, 0.5); 122 border: 0 solid currentColor; 123 pointer-events: all; 124 125 --timeline-ruler-marker-border-width: 1px; 124 126 } 125 127 126 128 body[dir=ltr] .timeline-ruler > .markers > .marker { 127 border-left-width: 1px;129 border-left-width: var(--timeline-ruler-marker-border-width); 128 130 } 129 131 130 132 body[dir=rtl] .timeline-ruler > .markers > .marker { 131 border-right-width: 1px; 132 } 133 134 /* Larger tooltip area */ 135 .timeline-ruler > .markers > .marker { 136 z-index: 20; 137 width: 3px; 133 border-right-width: var(--timeline-ruler-marker-border-width); 138 134 } 139 135 140 136 .timeline-ruler > .markers > .marker::before { 141 width: 3px; 137 width: var(--timeline-ruler-marker-before-size); 138 position: absolute; 139 top: 0; 140 bottom: 0; 142 141 content: ""; 143 position: absolute; 144 top: 0; 145 bottom: 0; 146 147 --timeline-ruler-marker-before-offset-start: -3px; 142 143 --timeline-ruler-marker-before-size: 6px; 144 --timeline-ruler-marker-before-offset: calc(-1 * ((var(--timeline-ruler-marker-before-size) + var(--timeline-ruler-marker-border-width)) / 2)); 148 145 } 149 146 150 147 body[dir=ltr] .timeline-ruler > .markers > .marker::before { 151 left: var(--timeline-ruler-marker-before-offset -start);148 left: var(--timeline-ruler-marker-before-offset); 152 149 } 153 150 154 151 body[dir=rtl] .timeline-ruler > .markers > .marker::before { 155 right: var(--timeline-ruler-marker-before-offset-start); 152 right: var(--timeline-ruler-marker-before-offset); 153 } 154 155 .timeline-ruler > .markers > .marker::after { 156 position: absolute; 157 top: calc(-1 * (var(--timeline-ruler-marker-after-size) - 1px) / 2); 158 content: ""; 159 border-right: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent; 160 border-left: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent; 161 border-top: calc(var(--timeline-ruler-marker-after-size) / 2) solid currentColor; 162 163 --timeline-ruler-marker-after-size: 10px; 164 --timeline-ruler-marker-after-offset: calc(-1 * ((var(--timeline-ruler-marker-after-size) + var(--timeline-ruler-marker-border-width)) / 2)); 165 } 166 167 body[dir=ltr] .timeline-ruler > .markers > .marker::after { 168 left: var(--timeline-ruler-marker-after-offset); 169 } 170 171 body[dir=rtl] .timeline-ruler > .markers > .marker::after { 172 right: var(--timeline-ruler-marker-after-offset); 156 173 } 157 174 158 175 .timeline-ruler > .markers > .marker.current-time { 159 border-color: red;160 } 161 162 .timeline-ruler > .markers > .marker.current-time:: before{163 position: absolute;164 top: -5px;165 width: 9px;166 height: 9px;167 b ackground-color: red;176 color: red; 177 } 178 179 .timeline-ruler > .markers > .marker.current-time::after { 180 top: var(--timeline-ruler-marker-after-offset); 181 width: var(--timeline-ruler-marker-after-size); 182 height: var(--timeline-ruler-marker-after-size); 183 background-color: currentColor; 184 border: none; 168 185 border-radius: 5px; 169 content: "";170 171 --timeline-ruler-marker-before-offset-start: -5px;172 186 } 173 187 174 188 .timeline-ruler > .markers > .marker.load-event { 175 border-color: hsla(0, 100%, 50%, 0.25);189 color: hsl(0, 100%, 50%); 176 190 } 177 191 178 192 .timeline-ruler > .markers > .marker.dom-content-event { 179 border-color: hsla(240, 100%, 50%, 0.25);193 color: hsl(240, 100%, 50%); 180 194 } 181 195 182 196 .timeline-ruler > .markers > .marker.timestamp { 183 border-color: hsla(119, 100%, 21%, 0.25);197 color: hsl(119, 100%, 21%); 184 198 } 185 199 … … 209 223 cursor: col-resize; 210 224 pointer-events: all; 211 z-index: 15;225 z-index: var(--timeline-selection-z-index); 212 226 213 227 --timeline-ruler-selection-handle-translateX: -4px; … … 234 248 235 249 .timeline-ruler.both-handles-clamped > .selection-handle { 236 z-index: 14;250 z-index: calc(var(--timeline-selection-z-index) - 1); 237 251 } 238 252 … … 256 270 bottom: 0; 257 271 background-color: hsla(0, 0%, 0%, 0.1); 258 z-index: 15;272 z-index: var(--timeline-selection-z-index); 259 273 } 260 274 -
trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css
r240457 r240506 106 106 --syntax-highlight-regex-group-color: var(--text-color-gray-medium); 107 107 108 --timeline-marker-z-index: 4; 109 --timeline-record-z-index: 8; 110 --timeline-selection-z-index: 16; 111 108 112 --memory-javascript-fill-color: hsl(269, 65%, 75%); 109 113 --memory-javascript-stroke-color: hsl(269, 33%, 50%);
Note: See TracChangeset
for help on using the changeset viewer.