| /* |
| * 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: 0 0 81px; |
| position: relative; |
| border-bottom: 1px solid rgb(140, 140, 140); |
| } |
| |
| #timeline-overview-panel .timeline-graph-bar { |
| pointer-events: none; |
| } |
| |
| .timeline .sidebar { |
| overflow-y: hidden; |
| min-height: 100%; |
| bottom: auto !important; |
| } |
| |
| .timeline.split-view-vertical .split-view-resizer { |
| top: 20px; |
| } |
| |
| #timeline-overview-sidebar { |
| position: absolute; |
| width: 200px; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| border-right: 1px solid rgb(163, 163, 163); |
| } |
| |
| #timeline-overview-grid { |
| background-color: rgb(255, 255, 255); |
| } |
| |
| .timeline-frame-overview #timeline-overview-grid { |
| display: none; |
| } |
| |
| #timeline-overview-grid .resources-dividers-label-bar { |
| pointer-events: auto; |
| } |
| |
| .timeline-frame-overview .overview-grid-window { |
| height: 80px; |
| } |
| |
| .timeline-frame-overview .overview-grid-dividers-background { |
| height: 80px; |
| } |
| |
| #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; |
| position: relative; |
| flex: 1 1; |
| } |
| |
| #timeline-container .split-view-sidebar { |
| z-index: 1; |
| } |
| |
| #timeline-container .webkit-html-external-link, |
| #timeline-container .webkit-html-resource-link { |
| color: inherit; |
| } |
| |
| .timeline-misc-status-bar-items { |
| right: 64px; |
| } |
| |
| .timeline-misc-status-bar-filters { |
| display: -webkit-flex; |
| -webkit-flex-orientation: row; |
| } |
| |
| .timeline-category-statusbar-item { |
| height: 24px; |
| line-height: 22px; |
| padding-left: 6px; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| text-shadow: white 0 1px 0; |
| overflow: hidden; |
| min-width: 20px; |
| -webkit-flex: auto 0 1; |
| } |
| |
| .timeline-category-statusbar-item, |
| .timeline-records-counter { |
| color: rgb(65, 65, 65); |
| } |
| |
| .timeline-category-checkbox { |
| width: 10px; |
| height: 10px; |
| margin: 0 3px 0 9px; |
| padding: 0; |
| border-radius: 2px; |
| border: solid 1px; |
| display: inline-block; |
| overflow: visible; |
| opacity: 0.8; |
| vertical-align: -1px; |
| } |
| |
| |
| .timeline-category-checkbox-check { |
| -webkit-appearance: none; |
| width: 11px; |
| height: 11px; |
| margin-top: -2px; |
| margin-left: 1px; |
| } |
| |
| .timeline-category-checkbox-checked { |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 120px; |
| background-position: -129px -110px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .timeline-category-checkbox-checked { |
| background-image: url(Images/statusbarButtonGlyphs2x.png); |
| } |
| } /* media */ |
| |
| .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-expandable { |
| position: absolute; |
| border-left: 1px solid rgb(163, 163, 163); |
| } |
| |
| .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-expandable-arrow { |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 120px; |
| 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/statusbarButtonGlyphs2x.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: 14px; |
| } |
| |
| .timeline-tree-item .count { |
| font-weight: bold; |
| } |
| |
| .timeline-tree-item .timeline-tree-icon { |
| display: block; |
| margin-top: 4px; |
| margin-left: 2px; |
| width: 7px; |
| height: 7px; |
| border-radius: 1px; |
| border: solid 1px; |
| position: absolute; |
| } |
| |
| .timeline-tree-item.background .timeline-tree-icon { |
| background: none !important; |
| } |
| |
| .timeline-tree-item.even { |
| background-color: rgba(0, 0, 0, 0.05); |
| } |
| |
| .timeline-tree-item.warning::after, |
| .timeline-tree-item.child-warning::after { |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 120px; |
| width: 10px; |
| height: 10px; |
| float: right; |
| content: ""; |
| position: relative; |
| top: 2px; |
| background-position: -202px -107px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .timeline-tree-item.warning::after, |
| .timeline-tree-item.child-warning::after { |
| background-image: url(Images/statusbarButtonGlyphs2x.png); |
| } |
| } /* media */ |
| |
| .timeline-tree-item.child-warning::after { |
| opacity: 0.5; |
| } |
| |
| .timeline-tree-item .data.dimmed { |
| color: rgba(0, 0, 0, 0.7); |
| } |
| |
| #timeline-overview-events, |
| #timeline-overview-memory { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 20px; |
| z-index: 160; |
| } |
| |
| #timeline-overview-memory { |
| top: 25px; |
| } |
| |
| #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: 19px; |
| } |
| |
| .timeline-graph-side { |
| position: relative; |
| height: 18px; |
| padding: 0 5px; |
| white-space: nowrap; |
| margin-top: 0; |
| border-top: 1px solid transparent; |
| overflow: hidden; |
| pointer-events: none; |
| } |
| |
| .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-graph-side.even { |
| background-color: rgba(0, 0, 0, 0.05); |
| } |
| |
| .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; |
| } |
| |
| .garbage-collect-status-bar-item .glyph { |
| -webkit-mask-position: -128px -24px; |
| } |
| |
| .glue-async-status-bar-item .glyph { |
| -webkit-mask-position: -128px -48px; |
| } |
| |
| .glue-async-status-bar-item.toggled-on:disabled .glyph { |
| background-color: rgba(0, 0, 0, 0.75); |
| } |
| |
| .timeline-frame-overview-status-bar-item.toggled-on .glyph { |
| background-color: rgb(66, 129, 235) !important; |
| } |
| |
| .timeline-records-stats, .storage-application-cache-status, .storage-application-cache-connectivity { |
| text-shadow: white 0 1px 0; |
| } |
| |
| .timeline-records-stats { |
| margin-top: 3px; |
| margin-left: 6px; |
| -webkit-flex: 1; |
| } |
| |
| .timeline-records-stats-container { |
| display: inline-block; |
| height: 24px; |
| margin-left: 6px; |
| } |
| |
| .timeline-frames-stats { |
| pointer-events: auto; |
| text-decoration: underline; |
| cursor: pointer; |
| } |
| |
| #resources-container-content { |
| overflow: visible; |
| 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; |
| } |
| |
| #timeline-overview-sidebar .sidebar-tree-item { |
| line-height: 26px; |
| height: 24px; |
| margin-top: 0; |
| border-top: none; |
| } |
| |
| #timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle { |
| top: 5px; |
| } |
| |
| #timeline-overview-sidebar .icon { |
| height: 24px; |
| margin-top: -1px; |
| margin-left: 0; |
| margin-right: 0; |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); |
| -webkit-mask-size: 320px 120px; |
| background-color: black; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| #timeline-overview-sidebar .icon { |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png); |
| } |
| } /* media */ |
| |
| .timeline-overview-sidebar-events .icon { |
| -webkit-mask-position: -192px -48px; |
| } |
| |
| .timeline-overview-sidebar-frames .icon { |
| -webkit-mask-position: -160px -48px; |
| } |
| |
| .timeline-overview-sidebar-memory .icon { |
| -webkit-mask-position: -224px -48px; |
| } |
| |
| .memory-graph-label { |
| position: absolute; |
| left: 5px; |
| font-size: 9px; |
| color: rgb(50%, 50%, 50%); |
| white-space: nowrap; |
| } |
| |
| .max.memory-graph-label { |
| top: 5px; |
| } |
| |
| .min.memory-graph-label { |
| bottom: 5px; |
| } |
| |
| #timeline-memory-splitter { |
| position: absolute; |
| z-index: 5; |
| left: 0; |
| right: 0; |
| height: 5px; |
| cursor: ns-resize; |
| } |
| |
| #memory-counters-graph { |
| overflow: hidden; |
| } |
| |
| #memory-graphs-container { |
| border-top: 1px solid #AAA; |
| position: relative; |
| flex: 0 0 auto; |
| } |
| |
| #memory-graphs-canvas-container { |
| border-right: 1px solid #AAA; |
| } |
| |
| #memory-graphs-canvas-container.dom-counters .resources-dividers { |
| top: 15px; |
| } |
| |
| #memory-graphs-container .split-view-contents { |
| overflow: hidden; |
| } |
| |
| .memory-counter-sidebar-info { |
| margin: 10px; |
| } |
| |
| .memory-counter-sidebar-info .swatch{ |
| background-image: none; |
| } |
| |
| .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 { |
| border-bottom: solid 1px lightgray; |
| min-height: 15px; |
| } |
| |
| .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-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; |
| } |
| |
| .sidebar-tree-item .timeline-frame-overview-status-bar-item { |
| position: absolute; |
| right: 10px; |
| top: 4px; |
| } |
| |
| .timeline-frame-container { |
| height: 19px; |
| overflow: hidden; |
| background-color: rgb(220, 220, 220); |
| opacity: 0.6; |
| color: #222; |
| text-align: center; |
| padding-top: 3px; |
| z-index: 350; |
| pointer-events: auto; |
| } |
| |
| .timeline-frame-strip { |
| position: absolute; |
| height: 19px; |
| } |
| |
| #timeline-grid-header { |
| pointer-events: none; |
| } |
| |
| .timeline-cpu-bars { |
| position: absolute; |
| top: 0; |
| height: 19px; |
| z-index: 350; |
| width: 100%; |
| overflow: hidden; |
| } |
| |
| .timeline-cpu-bars .timeline-graph-bar { |
| border-color: rgb(192, 192, 192); |
| background-color: rgba(0, 0, 0, 0.1); |
| top: 4px; |
| bottom: 4px; |
| height: auto; |
| } |
| |
| .timeline-cpu-curtain-left, .timeline-cpu-curtain-right { |
| background-color: rgba(0, 0, 0, 0.15); |
| position: absolute; |
| top: 0; |
| height: 100%; |
| } |
| |
| .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; |
| } |
| |
| .highlighted-timeline-record { |
| -webkit-animation: "timeline_record_highlight" 2s 0s; |
| } |
| |
| @-webkit-keyframes timeline_record_highlight { |
| from {background-color: rgba(255, 255, 120, 1); } |
| to { background-color: rgba(255, 255, 120, 0); } |
| } |