| /* |
| * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. |
| * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of |
| * its contributors may be used to endorse or promote products derived |
| * from this software without specific prior written permission. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY |
| * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
| * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
| * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY |
| * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
| * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
| * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
| * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
| * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| #timeline-overview-panel { |
| flex: none; |
| position: relative; |
| border-bottom: 1px solid rgb(140, 140, 140); |
| } |
| |
| #timeline-overview-panel .timeline-graph-bar { |
| pointer-events: none; |
| } |
| |
| #timeline-overview-panel .split-view-sidebar > label { |
| margin: 6px 0 3px 5px; |
| height: auto; |
| display: flex; |
| } |
| |
| #timeline-overview-panel .split-view-sidebar > label > input { |
| margin-right: 6px; |
| } |
| |
| .timeline-records-title, .timeline-records-list { |
| background-color: rgb(236, 236, 236); |
| } |
| |
| .timeline-records-title { |
| padding: 3px 3px 3px 5px; |
| flex: 0 0 19px; |
| color: rgb(92, 110, 129); text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; |
| } |
| |
| .timeline-records-list { |
| flex: auto; |
| } |
| |
| #timeline-overview-grid { |
| background-color: rgb(255, 255, 255); |
| } |
| |
| .timeline-overview-frames-mode #timeline-overview-grid { |
| display: none; |
| } |
| |
| #timeline-overview-grid .resources-dividers-label-bar { |
| pointer-events: auto; |
| } |
| |
| .timeline-overview-frames-mode .overview-grid-window, |
| .timeline-overview-frames-mode .overview-grid-dividers-background { |
| height: 100%; |
| } |
| |
| #timeline-overview-grid #resources-graphs { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 80px; |
| } |
| |
| #timeline-container { |
| border-right: 0 none transparent; |
| overflow-y: scroll; |
| overflow-x: hidden; |
| } |
| |
| .timeline-records-view { |
| overflow: hidden !important; |
| } |
| |
| .timeline-details-split { |
| flex: auto; |
| } |
| |
| .timeline-view { |
| flex: auto; |
| overflow: hidden; |
| } |
| |
| .timeline-view-stack { |
| flex: auto; |
| display: flex; |
| } |
| |
| #timeline-container .webkit-html-external-link, |
| #timeline-container .webkit-html-resource-link { |
| color: inherit; |
| } |
| |
| .timeline-tree-item { |
| height: 18px; |
| line-height: 15px; |
| padding-right: 5px; |
| padding-left: 5px; |
| padding-top: 2px; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| .timeline-tree-item.selected { |
| background-color: rgb(56, 121, 217) !important; |
| color: white; |
| } |
| |
| .timeline-tree-item.hovered:not(.selected), |
| .timeline-graph-side.hovered { |
| background-color: rgba(0, 0, 0, 0.05) !important; |
| } |
| |
| .timeline-expandable { |
| position: absolute; |
| border-left: 1px solid rgb(163, 163, 163); |
| pointer-events: none; |
| } |
| |
| .timeline-expandable-left { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| width: 3px; |
| border-top: 1px solid rgb(163, 163, 163); |
| border-bottom: 1px solid rgb(163, 163, 163); |
| } |
| |
| .timeline-tree-item-expand-arrow { |
| display: inline-block; |
| -webkit-user-select: none; |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); |
| -webkit-mask-size: 320px 144px; |
| width: 10px; |
| height: 10px; |
| content: ""; |
| background-color: rgb(110, 110, 110); |
| position: relative; |
| top: -1px; |
| left: -1px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .timeline-tree-item-expand-arrow { |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| .timeline-tree-item-expand-arrow.parent { |
| -webkit-mask-position: -4px -96px; |
| } |
| |
| .timeline-tree-item-expand-arrow.parent.expanded { |
| -webkit-mask-position: -20px -96px; |
| } |
| |
| .timeline-expandable-arrow { |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 144px; |
| opacity: 0.5; |
| width: 10px; |
| height: 10px; |
| position: relative; |
| top: 3px; |
| left: 2px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .timeline-expandable-arrow { |
| background-image: url(Images/statusbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| .timeline-expandable-collapsed .timeline-expandable-arrow { |
| background-position: -4px -96px; |
| } |
| |
| .timeline-expandable-expanded .timeline-expandable-arrow { |
| background-position: -20px -96px; |
| } |
| |
| .timeline-tree-item .type { |
| padding-left: 5px; |
| } |
| |
| .timeline-tree-item .count { |
| font-weight: bold; |
| } |
| |
| .timeline-tree-item .timeline-tree-icon { |
| position: relative; |
| top: -1px; |
| left: 1px; |
| width: 7px; |
| height: 7px; |
| border-radius: 1px; |
| border: solid 1px; |
| display: inline-block; |
| } |
| |
| .timeline-tree-item.background .timeline-tree-icon { |
| background: none !important; |
| } |
| |
| .timeline-tree-item-warning { |
| display: block; |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 144px; |
| width: 10px; |
| height: 10px; |
| float: right; |
| background-position: -202px -107px; |
| position: relative; |
| top: 2px; |
| } |
| |
| .timeline-tree-item-child-warning { |
| opacity: 0.6; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .timeline-tree-item-warning { |
| background-image: url(Images/statusbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| .timeline-tree-item .data.dimmed { |
| color: rgba(0, 0, 0, 0.7); |
| pointer-events: none; |
| padding-left: 4px; |
| } |
| |
| .timeline-tree-item.selected .data.dimmed { |
| color: rgba(255, 255, 255, 0.8); |
| pointer-events: auto; |
| } |
| |
| .timeline-tree-item.selected .timeline-tree-item-expand-arrow { |
| background-color: white; |
| } |
| |
| #timeline-overview-events, |
| #timeline-overview-memory, |
| #timeline-overview-power { |
| flex: 0 0 60px; |
| z-index: 160; |
| width: 100%; |
| } |
| |
| #timeline-overview-memory { |
| flex-basis: 20px; |
| } |
| |
| #timeline-overview-frames { |
| flex-basis: 79px; |
| } |
| |
| #timeline-overview-pane { |
| flex: none; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #timeline-overview-container { |
| display: flex; |
| flex-direction: column; |
| flex: none; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| #timeline-overview-container canvas { |
| width: 100%; |
| height: 100%; |
| } |
| |
| #timeline-overview-frames canvas { |
| z-index: 200; |
| background-color: rgba(255, 255, 255, 0.8); |
| } |
| |
| #timeline-graphs { |
| position: absolute; |
| left: 0; |
| right: 0; |
| max-height: 100%; |
| top: 20px; |
| } |
| |
| .timeline-graph-side { |
| position: relative; |
| height: 18px; |
| padding: 0 5px; |
| white-space: nowrap; |
| margin-top: 0; |
| border-top: 1px solid transparent; |
| overflow: hidden; |
| } |
| |
| .timeline-graph-side.selected { |
| background-color: rgba(56, 121, 217, 0.1) !important; |
| } |
| |
| .timeline-graph-bar-area { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 0; |
| left: 3px; |
| pointer-events: none; |
| } |
| |
| .timeline-graph-bar { |
| position: absolute; |
| top: -1px; |
| bottom: 0; |
| margin: auto -2px; |
| height: 10px; |
| min-width: 5px; |
| z-index: 180; |
| pointer-events: visibleFill; |
| border-radius: 1px; |
| border: 1px solid; |
| } |
| |
| .timeline-graph-bar.with-children { |
| opacity: 0.25; |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); |
| } |
| |
| .timeline-graph-bar.cpu { |
| opacity: 0.7; |
| } |
| |
| .timeline-graph-side.background .timeline-graph-bar { |
| background: transparent !important; |
| border-width: 2px; |
| } |
| |
| .timeline-aggregated-category { |
| display: inline-block; |
| height: 11px; |
| margin-right: 2px; |
| margin-left: 6px; |
| position: relative; |
| top: 2px; |
| width: 10px; |
| border: solid 1px; |
| } |
| |
| .popover .timeline-aggregated-category.timeline-loading { |
| margin-left: 0; |
| } |
| |
| .popover ul { |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| } |
| |
| .timeline-garbage-collect-status-bar-item .glyph { |
| -webkit-mask-position: -128px -24px; |
| } |
| |
| .timeline-frames-status-bar-item .glyph { |
| -webkit-mask-position: -160px -48px; |
| } |
| |
| .timeline-flame-chart-status-bar-item .glyph { |
| -webkit-mask-position: -192px -48px; |
| } |
| |
| #resources-container-content { |
| overflow: hidden; |
| min-height: 100%; |
| } |
| |
| #resources-graphs { |
| position: absolute; |
| left: 0; |
| right: 0; |
| max-height: 100%; |
| top: 112px; |
| } |
| |
| .resources-graph-side { |
| position: relative; |
| height: 36px; |
| padding: 0 5px; |
| white-space: nowrap; |
| margin-top: 1px; |
| border-top: 1px solid transparent; |
| overflow: hidden; |
| } |
| |
| .resources-graph-bar-area { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 8px; |
| left: 9px; |
| } |
| |
| .memory-graph-label { |
| position: absolute; |
| left: 5px; |
| font-size: 9px; |
| color: rgb(50%, 50%, 50%); |
| white-space: nowrap; |
| } |
| |
| #memory-graphs-canvas-container { |
| overflow: hidden; |
| flex: auto; |
| position: relative; |
| } |
| |
| #memory-counters-graph { |
| flex: auto; |
| } |
| |
| #memory-graphs-canvas-container .memory-counter-marker { |
| position: absolute; |
| border-radius: 3px; |
| width: 5px; |
| height: 5px; |
| margin-left: -3px; |
| margin-top: -2px; |
| } |
| |
| #memory-graphs-container .split-view-contents-first { |
| background-color: rgb(236, 236, 236); |
| overflow-y: hidden; |
| } |
| |
| #memory-graphs-container .sidebar-tree-section { |
| flex: 0 0 24px; |
| padding: 5px 0 0 5px; |
| } |
| |
| .memory-counter-sidebar-info { |
| flex: 0 0 18px; |
| margin-left: 5px; |
| white-space: nowrap; |
| } |
| |
| .memory-counter-sidebar-info .swatch { |
| background-image: none; |
| border: 1px solid rgba(0,0,0,0.3); |
| opacity: 0.5; |
| } |
| |
| .memory-counter-sidebar-info.bottom-border-visible { |
| border-bottom: 1px solid #AAA; |
| } |
| |
| .memory-counter-sidebar-info .title { |
| margin: 4px; |
| } |
| |
| .memory-counter-value { |
| margin: 4px; |
| } |
| |
| #counter-values-bar { |
| flex: 0 0 18px; |
| border-bottom: solid 1px lightgray; |
| width: 100%; |
| overflow: hidden; |
| line-height: 18px; |
| } |
| |
| .timeline .resources-event-divider { |
| height: 19px; |
| width: 8px; |
| border-left-width: 2px; |
| border-left-style: solid; |
| bottom: auto; |
| pointer-events: auto; |
| } |
| |
| .resources-red-divider { |
| border-color: rgba(255, 0, 0, 0.5); |
| } |
| |
| .resources-blue-divider { |
| border-color: rgba(0, 0, 255, 0.5); |
| } |
| |
| .resources-orange-divider { |
| border-color: rgba(255, 178, 23, 0.5); |
| } |
| |
| .resources-green-divider { |
| border-color: rgba(0, 130, 0, 0.5); |
| } |
| |
| .resources-divider:last-child { |
| border-color: transparent; |
| } |
| |
| .timeline .resources-event-divider.timeline-frame-divider { |
| background-color: rgba(180, 180, 180, 0.8); |
| border-style: none; |
| width: 1px; |
| height: 100%; |
| pointer-events: none; |
| } |
| |
| .timeline-frame-container { |
| height: 19px; |
| overflow: hidden; |
| background-color: rgb(220, 220, 220); |
| opacity: 0.8; |
| color: black; |
| text-align: center; |
| z-index: 220; |
| pointer-events: auto; |
| } |
| |
| .timeline-frame-strip { |
| position: absolute; |
| height: 19px; |
| padding-top: 3px; |
| } |
| |
| .timeline-frame-strip.selected { |
| background-color: rgb(56, 121, 217); |
| color: white; |
| } |
| |
| #timeline-grid-header { |
| pointer-events: none; |
| height: 19px; |
| } |
| |
| #timeline-graph-records-header { |
| pointer-events: none; |
| height: 19px; |
| padding: 1px 0; |
| justify-content: center; |
| } |
| |
| .timeline-utilization-strip { |
| z-index: 250; |
| overflow: hidden; |
| flex: 0 1 12px; |
| position: relative; |
| height: 9px; |
| } |
| |
| .timeline-utilization-strip .timeline-graph-bar { |
| border-color: rgb(192, 192, 192); |
| background-color: rgba(0, 0, 0, 0.1); |
| margin: 1.5px auto; |
| height: auto; |
| } |
| |
| .timeline-utilization-strip.gpu .timeline-graph-bar { |
| background-color: #00a; |
| border: none; |
| opacity: 0.3; |
| min-width: 0; |
| } |
| |
| .timeline-utilization-strip.gpu .timeline-graph-bar.gpu-task-foreign { |
| background-color: #aaa; |
| } |
| |
| .timeline-cpu-curtain-left, .timeline-cpu-curtain-right { |
| background-color: rgba(210, 210, 210, 0.5); |
| position: absolute; |
| top: 0; |
| height: 100%; |
| z-index: 300; |
| } |
| |
| .timeline-cpu-curtain-left { |
| left: 0; |
| } |
| |
| .timeline-cpu-curtain-right { |
| right: 0; |
| } |
| |
| .image-preview-container { |
| background: transparent; |
| text-align: left; |
| border-spacing: 0; |
| } |
| |
| .image-preview-container img { |
| max-width: 100px; |
| max-height: 100px; |
| background-image: url(Images/checker.png); |
| -webkit-user-select: text; |
| -webkit-user-drag: auto; |
| } |
| |
| .image-container { |
| padding: 0; |
| } |
| |
| .memory-category-value { |
| float: right; |
| } |
| |
| .timeline-filters-header { |
| flex: 0 0 23px; |
| overflow: hidden; |
| } |
| |
| .timeline-details { |
| -webkit-user-select: text; |
| vertical-align: top; |
| } |
| |
| .timeline-details-title { |
| border-bottom: 1px solid #B8B8B8; |
| font-weight: bold; |
| padding-bottom: 5px; |
| padding-top: 0; |
| white-space: nowrap; |
| } |
| |
| .timeline-details-row-title { |
| font-weight: bold; |
| text-align: right; |
| white-space: nowrap; |
| } |
| |
| .timeline-details-row-data { |
| white-space: nowrap; |
| } |
| |
| .timeline-details-view { |
| color: #333; |
| overflow: hidden; |
| } |
| |
| .timeline-details-view-title { |
| padding: 2px 5px; |
| flex: 0 0 19px; |
| border-bottom: 1px solid rgb(202, 202, 202); |
| background-color: rgb(236, 236, 236); |
| white-space: nowrap; |
| display: flex; |
| color: rgb(92, 110, 129); |
| text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .timeline-details-view-body { |
| padding-top: 2px; |
| flex: auto; |
| overflow: auto; |
| position: relative; |
| } |
| |
| .timeline-details-view-block { |
| flex: none; |
| } |
| |
| .timeline-details-view-row { |
| padding: 2px 0 2px 6px; |
| white-space: nowrap; |
| } |
| |
| .timeline-details-view-row-title { |
| font-weight: bold; |
| color: rgb(48, 57, 66); |
| } |
| |
| .timeline-details-view-row-value { |
| padding-left: 10px; |
| } |
| |
| .timeline-details-view-row-details { |
| padding-left: 10px; |
| } |
| |
| .timeline-details-view-row-details .image-preview-container { |
| padding: 10px; |
| } |
| |
| .timeline-details-view-row-details table { |
| padding-left: 10px; |
| } |
| |
| .timeline-details-view-row-details table td { |
| text-align: left; |
| vertical-align: top; |
| } |
| |
| .timeline-details-view-row-details table td .section { |
| margin-top: -1px; |
| } |
| |
| .timeline-details-view-row-details table td .section > .header .title { |
| white-space: nowrap; |
| } |
| |
| .timeline-details-view-row-stack-trace { |
| padding: 4px 0 4px 20px; |
| } |
| |
| .timeline-details-view-row-stack-trace div { |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| |
| .timeline-details-view-row-stack-trace .webkit-html-external-link, |
| .timeline-details-view-row-stack-trace .webkit-html-resource-link { |
| color: #333 !important; |
| } |
| |
| .timeline-memory-split { |
| flex: auto; |
| } |
| |
| .timeline-memory-split > .split-view-contents-first { |
| overflow: hidden; |
| } |
| |
| .timeline-aggregated-info { |
| flex: none; |
| position: relative; |
| margin: 8px; |
| } |
| |
| .timeline-range-summary { |
| align-items: center; |
| margin: 6px; |
| } |
| |
| .timeline-range-summary > div { |
| flex-shrink: 0; |
| } |
| |
| .timeline-aggregated-info-legend > div { |
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| } |
| |
| .timeline-aggregated-info .pie-chart { |
| margin-left: 20px; |
| margin-bottom: 10px; |
| } |
| |
| .timeline-flamechart { |
| overflow: hidden; |
| } |
| |
| .timeline-progress-pane { |
| position: absolute; |
| top: 0px; |
| right: 0px; |
| bottom: 0px; |
| left: 0px; |
| color: #777; |
| background-color: rgba(255, 255, 255, 0.8); |
| font-size: 30px; |
| z-index: 500; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .revealable-link { |
| text-decoration: underline; |
| cursor: pointer; |
| } |