| /* |
| * Copyright (C) 2013 Google Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions are |
| * met: |
| * |
| * * Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * * 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. |
| * * Neither the name of Google Inc. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT |
| * OWNER OR 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. |
| */ |
| |
| .network-log-grid.data-grid { |
| border: none; |
| flex: auto; |
| } |
| |
| .network-summary-bar { |
| flex: 0 0 27px; |
| line-height: 27px; |
| padding-left: 5px; |
| background-color: #eee; |
| border-top: 1px solid #ccc; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| .network-summary-bar label[is=dt-icon-label] { |
| margin-right: 6px; |
| } |
| |
| .network-summary-bar > * { |
| flex: none; |
| } |
| |
| .network-log-grid.data-grid table.data { |
| background: transparent; |
| } |
| |
| .network-log-grid .odd { |
| background: #f5f5f5; |
| } |
| |
| .network-log-grid .network-navigation-row, |
| .network-log-grid .network-navigation-row.odd { |
| background: #def; |
| } |
| |
| .network-log-grid.data-grid td { |
| line-height: 17px; |
| height: 41px; |
| border-left: 1px solid #e1e1e1; |
| vertical-align: middle; |
| } |
| |
| .network-log-grid.data-grid.small td { |
| height: 21px; |
| } |
| |
| .network-log-grid.data-grid th { |
| border-bottom: 1px solid rgb(205, 205, 205); |
| border-left: 1px solid rgb(205, 205, 205); |
| background: white; |
| } |
| |
| .network-log-grid.data-grid .header-container { |
| height: 31px; |
| } |
| |
| .network-log-grid.data-grid .data-container { |
| top: 31px; |
| } |
| |
| .network-log-grid.data-grid.small .header-container { |
| height: 27px; |
| } |
| |
| .network-log-grid.data-grid.small .data-container { |
| top: 27px; |
| } |
| |
| .network-log-grid.data-grid select { |
| -webkit-appearance: none; |
| background-color: transparent; |
| border: none; |
| width: 100%; |
| color: inherit; |
| } |
| |
| .network-log-grid.data-grid .name-column { |
| cursor: pointer; |
| } |
| |
| .network-log-grid.data-grid .timeline-column { |
| padding: 1px 0; |
| } |
| |
| .network-log-grid.data-grid .timeline-column .sort-order-icon-container { |
| right: 15px; |
| pointer-events: none; |
| } |
| |
| #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover { |
| text-decoration: underline; |
| } |
| |
| .network-log-grid.data-grid.small .network-graph-side { |
| height: 19px; |
| } |
| |
| .network-log-grid.data-grid th.sortable:active { |
| background-image: none !important; |
| } |
| |
| .network-cell-subtitle { |
| font-weight: normal; |
| color: gray; |
| } |
| |
| .network-error-row, |
| .network-error-row .network-cell-subtitle { |
| color: rgb(230, 0, 0); |
| } |
| |
| .initiator-column a { |
| color: inherit; |
| } |
| |
| .network-log-grid.data-grid tr.selected, |
| .network-log-grid.data-grid tr.selected .network-cell-subtitle, |
| .network-log-grid.data-grid tr.selected .network-dim-cell { |
| color: inherit !important; |
| } |
| |
| .network-log-grid.data-grid:focus tr.selected, |
| .network-log-grid.data-grid:focus tr.selected .network-cell-subtitle, |
| .network-log-grid.data-grid:focus tr.selected .network-dim-cell { |
| color: white !important; |
| } |
| |
| .network-log-grid tr.highlighted-row { |
| -webkit-animation: network-row-highlight-fadeout 2s 0s; |
| } |
| |
| @-webkit-keyframes network-row-highlight-fadeout { |
| from {background-color: rgba(255, 255, 120, 1); } |
| to { background-color: rgba(255, 255, 120, 0); } |
| } |
| |
| .network-header-subtitle { |
| color: gray; |
| } |
| |
| .network-log-grid.data-grid.small .network-cell-subtitle, |
| .network-log-grid.data-grid.small .network-header-subtitle { |
| display: none; |
| } |
| |
| /* Resource preview icons */ |
| |
| .network-log-grid.data-grid .icon { |
| content: url(Images/resourcePlainIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .icon { |
| content: url(Images/resourcePlainIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .icon.script { |
| content: url(Images/resourceJSIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .icon.script { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .icon.document { |
| content: url(Images/resourceDocumentIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .icon.document { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .icon.stylesheet { |
| content: url(Images/resourceCSSIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .icon.stylesheet { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .icon.media { |
| content: url(Images/resourcePlainIcon.png); /* FIXME: media icon */ |
| } |
| |
| .network-log-grid.data-grid.small .icon.media { |
| content: url(Images/resourcePlainIconSmall.png); /* FIXME: media icon */ |
| } |
| .network-log-grid.data-grid .icon.texttrack { |
| content: url(Images/resourcePlainIcon.png); /* FIXME: vtt icon */ |
| } |
| |
| .network-log-grid.data-grid.small .icon.texttrack { |
| content: url(Images/resourcePlainIconSmall.png); /* FIXME: vtt icon */ |
| } |
| |
| .network-log-grid.data-grid .icon.image { |
| position: relative; |
| background-image: url(Images/resourcePlainIcon.png); |
| background-repeat: no-repeat; |
| content: ""; |
| } |
| |
| .network-log-grid.data-grid.small .icon.image { |
| background-image: url(Images/resourcePlainIconSmall.png); |
| content: ""; |
| } |
| |
| .network-log-grid.data-grid .icon { |
| float: left; |
| width: 32px; |
| height: 32px; |
| margin-top: 1px; |
| margin-right: 3px; |
| } |
| |
| .network-log-grid.data-grid.small .icon { |
| width: 16px; |
| height: 16px; |
| } |
| |
| .network-log-grid.data-grid .image-network-icon-preview { |
| position: absolute; |
| margin: auto; |
| top: 3px; |
| bottom: 4px; |
| left: 5px; |
| right: 5px; |
| max-width: 18px; |
| max-height: 21px; |
| min-width: 1px; |
| min-height: 1px; |
| } |
| |
| .network-log-grid.data-grid.small .image-network-icon-preview { |
| top: 2px; |
| bottom: 1px; |
| left: 3px; |
| right: 3px; |
| max-width: 8px; |
| max-height: 11px; |
| } |
| |
| /* Graph styles */ |
| |
| .network-graph-side { |
| position: relative; |
| height: 39px; |
| padding: 0; |
| white-space: nowrap; |
| overflow: hidden; |
| } |
| |
| .network-graph-bar-area { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| } |
| |
| .network-graph-bar-area, |
| .network-timeline-grid .resources-dividers, |
| .network-timeline-grid .resources-event-dividers, |
| .network-timeline-grid .resources-dividers-label-bar { |
| right: 12px; |
| left: 12px; |
| } |
| |
| .network-timeline-grid .resources-event-dividers { |
| margin-left: 1px; |
| } |
| |
| .network-graph-label { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| height: 13px; |
| line-height: 13px; |
| margin: auto; |
| font-size: 90%; |
| color: rgba(0, 0, 0, 0.75); |
| text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0; |
| z-index: 150; |
| overflow: hidden; |
| text-align: center; |
| visibility: hidden; |
| } |
| |
| .network-graph-side:hover .network-graph-label { |
| visibility: visible; |
| } |
| |
| .network-graph-label:empty { |
| display: none; |
| } |
| |
| .network-graph-label.waiting { |
| margin-right: 5px; |
| } |
| |
| .network-graph-label.before { |
| color: rgba(0, 0, 0, 0.7); |
| text-shadow: none; |
| text-align: right; |
| margin-right: -1px; |
| } |
| |
| .network-graph-label.before::after { |
| padding-left: 2px; |
| height: 6px; |
| content: url(Images/graphLabelCalloutLeft.png); |
| } |
| |
| .network-graph-label.after { |
| color: rgba(0, 0, 0, 0.7); |
| text-shadow: none; |
| text-align: left; |
| margin-left: -1px; |
| } |
| |
| .network-graph-label.after::before { |
| padding-right: 2px; |
| height: 6px; |
| content: url(Images/graphLabelCalloutRight.png); |
| } |
| |
| .small .network-graph-bar { |
| top: 3px; |
| bottom: 3px; |
| } |
| |
| .network-graph-bar { |
| position: absolute; |
| top: 13px; |
| bottom: 13px; |
| min-width: 3px; |
| } |
| |
| .network-graph-bar:not(.request-timing) { |
| border-width: 1px; |
| border-style: solid; |
| border-color: hsl(0, 0%, 75%); |
| background: linear-gradient(0deg, hsl(0, 0%, 85%), hsl(0, 0%, 95%)); |
| } |
| |
| .network-graph-bar.waiting:not(.request-timing) { |
| opacity: 0.5; |
| } |
| |
| /* Resource categories */ |
| |
| .network-graph-bar.request-timing.queueing, |
| .network-graph-bar.request-timing.total, |
| .network-graph-bar.request-timing.proxy, |
| .network-graph-bar.request-timing.dns, |
| .network-graph-bar.request-timing.ssl, |
| .network-graph-bar.request-timing.connecting, |
| .network-graph-bar.request-timing.blocking, |
| .network-graph-bar.request-timing.push { |
| margin: 3px 0; |
| } |
| |
| .network-graph-bar.request-timing.queueing, |
| .network-graph-bar.request-timing.total, -theme-preserve { |
| border: solid 1px #AAAAAA; |
| } |
| |
| .network-graph-bar.request-timing.receiving, -theme-preserve, |
| .network-graph-bar.request-timing.receiving-push, -theme-preserve { |
| background-color: #03A9F4; |
| } |
| |
| .network-graph-bar.request-timing.waiting, -theme-preserve { |
| background-color: #00C853; |
| } |
| |
| .network-graph-bar.request-timing.connecting, -theme-preserve { |
| background-color: #FF9800; |
| } |
| |
| .network-graph-bar.request-timing.ssl, -theme-preserve { |
| background-color: #9C27B0; |
| } |
| |
| .network-graph-bar.request-timing.dns, -theme-preserve { |
| background-color: #009688; |
| } |
| |
| .network-graph-bar.request-timing.proxy, -theme-preserve { |
| background-color: #A1887F; |
| } |
| |
| .network-graph-bar.request-timing.blocking, -theme-preserve { |
| background-color: #AAAAAA; |
| } |
| |
| .network-graph-bar.request-timing.push, -theme-preserve { |
| background-color: #8CDBff; |
| } |
| |
| .network-graph-bar.cached { |
| background: hsl(0, 0%, 90%); |
| } |
| |
| .network-graph-bar.document { |
| border-color: hsl(215, 49%, 60%); |
| background: linear-gradient(0deg, hsl(215, 72%, 65%), hsl(215, 100%, 80%)); |
| } |
| |
| .network-graph-bar.cached.document { |
| background: hsl(215, 99%, 80%); |
| } |
| |
| .network-graph-bar.stylesheet { |
| border-color: hsl(99, 34%, 60%); |
| background: linear-gradient(0deg, hsl(100, 50%, 65%), hsl(90, 50%, 80%)); |
| } |
| |
| .network-graph-bar.cached.stylesheet { |
| background: hsl(99, 100%, 80%); |
| } |
| |
| .network-graph-bar.image { |
| border-color: hsl(272, 31%, 60%); |
| background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%)); |
| } |
| |
| .network-graph-bar.cached.image { |
| background: hsl(272, 65%, 80%); |
| } |
| |
| .network-graph-bar.media { |
| border-color: hsl(272, 31%, 60%); |
| background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%)); |
| } |
| |
| .network-graph-bar.cached.media { |
| background: hsl(272, 65%, 80%); |
| } |
| |
| .network-graph-bar.font { |
| border-color: hsl(8, 49%, 60%); |
| background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%)); |
| } |
| |
| .network-graph-bar.cached.font { |
| background: hsl(8, 100%, 80%); |
| } |
| |
| .network-graph-bar.texttrack { |
| border-color: hsl(8, 49%, 60%); |
| background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%)); |
| } |
| |
| .network-graph-bar.cached.texttrack { |
| background: hsl(8, 100%, 80%); |
| } |
| |
| .network-graph-bar.script { |
| border-color: hsl(31, 49%, 60%); |
| background: linear-gradient(0deg, hsl(31, 72%, 65%), hsl(31, 100%, 80%)); |
| } |
| |
| .network-graph-bar.cached.script { |
| background: hsl(31, 100%, 80%); |
| } |
| |
| .network-graph-bar.xhr { |
| border-color: hsl(53, 49%, 60%); |
| background: linear-gradient(0deg, hsl(53, 72%, 65%), hsl(53, 100%, 80%)); |
| } |
| |
| .network-graph-bar.cached.xhr { |
| background: hsl(53, 100%, 80%); |
| } |
| |
| .network-graph-bar.websocket { |
| border-color: hsl(0, 0%, 60%); |
| background: linear-gradient(0deg, hsl(0, 0%, 65%), hsl(0, 0%, 80%)); |
| } |
| |
| .network-graph-bar.cached.websocket { |
| background: hsl(0, 0%, 80%); |
| } |
| |
| .network-dim-cell { |
| color: grey; |
| } |
| |
| /* Dividers */ |
| |
| .network-timeline-grid { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 14px; /* Keep in sync with td.corner width */ |
| pointer-events: none; |
| } |
| |
| .network-event-divider { |
| position: absolute; |
| width: 1px; |
| margin-left: -1px; |
| top: 31px; |
| bottom: 0; |
| z-index: 300; |
| } |
| |
| .network-event-divider.invisible { |
| visibility: hidden; |
| } |
| |
| .network-timeline-grid.small .network-event-divider { |
| top: 23px; |
| } |
| |
| .network-red-divider { |
| background-color: rgba(255, 0, 0, 0.5); |
| } |
| |
| .-theme-with-dark-background .network-red-divider { |
| background-color: hsla(0, 100%, 80%, 0.7); |
| } |
| |
| .network-summary-bar .summary-red { |
| color: red; |
| } |
| |
| .-theme-with-dark-background .network-blue-divider { |
| background-color: hsla(240, 100%, 80%, 0.7); |
| } |
| |
| .network-frame-divider { |
| width: 2px; |
| background-color: #FCCC49; |
| z-index: 10; |
| visibility: hidden; |
| } |
| |
| .network-frame-divider-selected { |
| visibility: visible; |
| } |
| |
| .network-summary-bar .summary-blue { |
| color: blue; |
| } |
| |
| .network-log-grid.data-grid .resources-dividers { |
| z-index: 0; |
| } |
| |
| .network-log-grid.data-grid .resources-dividers-label-bar { |
| background-color: transparent; |
| border: none; |
| height: 30px; |
| pointer-events: none; |
| } |
| |
| .network-timeline-grid.small .resources-dividers-label-bar { |
| height: 23px; |
| } |
| |
| .network-timeline-grid .resources-divider-label { |
| top: 0; |
| margin-top: -5px; |
| } |
| |
| .network-timeline-grid .resources-dividers-label-bar .resources-divider { |
| top: 23px; |
| } |
| |
| .network-timeline-grid.small .resources-dividers-label-bar .resources-divider { |
| top: 15px; |
| } |
| |
| .network-timeline-grid .resources-divider:first-child .resources-divider-label { |
| display: none; |
| } |
| |
| .network-timeline-grid .resources-dividers-label-bar .resources-divider:first-child { |
| background-color: transparent; |
| } |
| |
| #network-container { |
| overflow: hidden; |
| } |
| |
| /* Brief mode peculiarities. */ |
| #network-container.brief-mode .network-timeline-grid { |
| display: none; |
| } |
| |
| .network-log-grid.data-grid .data-container tr:not(.data-grid-filler-row):not(.selected):hover { |
| background-color: rgba(56, 121, 217, 0.1); |
| } |
| |
| .network-log-grid .network-node-on-initiator-path { |
| background-color: hsla(120, 68%, 54%, 0.2) !important; |
| } |
| |
| .network-log-grid .network-node-on-initiated-path { |
| background-color: hsla(0, 68%, 54%, 0.2) !important; |
| } |
| |
| .network-status-pane { |
| color: #777; |
| background-color: white; |
| z-index: 500; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| padding: 0 20px; |
| overflow: auto; |
| } |
| |
| .network-status-pane > .recording-hint { |
| font-size: 14px; |
| text-align: center; |
| line-height: 28px; |
| } |