| .network-log-grid.data-grid { |
| border: none; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .network-log-grid.data-grid table.data { |
| -webkit-background-size: 1px 82px; |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05))); |
| } |
| |
| .network-log-grid.data-grid.small table.data { |
| -webkit-background-size: 1px 42px; |
| } |
| |
| .network-log-grid.data-grid td { |
| line-height: 17px; |
| height: 41px; |
| border-right: 1px solid rgb(210, 210, 210); |
| vertical-align: middle; |
| } |
| |
| .network-log-grid.data-grid.small td { |
| height: 21px; |
| } |
| |
| .network-log-grid.data-grid th { |
| border-bottom: 1px solid rgb(64%, 64%, 64%); |
| height: 30px; |
| } |
| |
| .network-log-grid.data-grid.small th { |
| height: 22px; |
| } |
| |
| .network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending { |
| background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217))); |
| } |
| |
| .network-log-grid.data-grid .data-container { |
| top: 31px; |
| } |
| |
| .network-log-grid.data-grid.small .data-container { |
| top: 23px; |
| } |
| |
| .network-log-grid.data-grid select { |
| -webkit-appearance: none; |
| background-color: transparent; |
| border: none; |
| width: 100%; |
| font-size: inherit; |
| color: inherit; |
| } |
| |
| .network-log-grid.data-grid.small tr.offscreen { |
| height: 21px; |
| } |
| |
| .network-log-grid.data-grid tr.offscreen { |
| height: 41px; |
| } |
| |
| .network-log-grid.data-grid tr.offscreen > td > div { |
| display: none; |
| } |
| |
| .network-log-grid.data-grid tr.filler { |
| background-color: white; |
| } |
| |
| .network-log-grid.data-grid tr:not(.filler) td.name-column { |
| cursor: pointer; |
| } |
| |
| #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: 14px; |
| } |
| |
| .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-cell-subtitle { |
| color: white; |
| } |
| |
| .network-log-grid tr.highlighted-row { |
| -webkit-animation: "network-row-highlight-fadeout" 2s 0s; |
| } |
| |
| @-webkit-keyframes network-row-highlight-fadeout { |
| from {background-color: rgba(56, 121, 217, 1); } |
| to { background-color: rgba(56, 121, 217, 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 .network-type-script .icon { |
| content: url(Images/resourceJSIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .network-type-script .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .network-type-document .icon { |
| content: url(Images/resourceDocumentIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .network-type-document .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .network-type-stylesheet .icon { |
| content: url(Images/resourceCSSIcon.png); |
| } |
| |
| .network-log-grid.data-grid.small .network-type-stylesheet .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-log-grid.data-grid .network-type-image .icon { |
| position: relative; |
| background-image: url(Images/resourcePlainIcon.png); |
| background-repeat: no-repeat; |
| content: ""; |
| } |
| |
| .network-log-grid.data-grid.small .network-type-image .icon { |
| 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: 36px; |
| padding: 0; |
| white-space: nowrap; |
| margin-top: 1px; |
| border-top: 1px solid transparent; |
| 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-graph-label { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| margin: auto -7px; |
| height: 13px; |
| line-height: 13px; |
| 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; |
| opacity: 0; |
| -webkit-transition: opacity 250ms ease-in-out; |
| } |
| |
| .network-graph-side:hover .network-graph-label { |
| opacity: 1; |
| } |
| |
| .network-graph-label:empty { |
| display: none; |
| } |
| |
| .network-graph-label.waiting { |
| margin-right: 5px; |
| } |
| |
| .network-graph-label.waiting-right { |
| margin-left: 5px; |
| } |
| |
| .network-graph-label.before { |
| color: rgba(0, 0, 0, 0.7); |
| text-shadow: none; |
| text-align: right; |
| margin-right: 2px; |
| } |
| |
| .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: 2px; |
| } |
| |
| .network-graph-label.after::before { |
| padding-right: 2px; |
| height: 6px; |
| content: url(Images/graphLabelCalloutRight.png); |
| } |
| |
| .network-graph-bar { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| margin: auto -7px; |
| border-width: 6px 7px; |
| height: 0; |
| min-width: 14px; |
| opacity: 0.65; |
| -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; |
| } |
| |
| .network-graph-bar.waiting, .network-graph-bar.waiting-right { |
| opacity: 0.35; |
| } |
| |
| /* Resource categories */ |
| |
| |
| .resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; |
| } |
| |
| .network-type-document .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7; |
| } |
| |
| .network-type-document.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7; |
| } |
| |
| .network-type-stylesheet .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7; |
| } |
| |
| .network-type-stylesheet.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7; |
| } |
| |
| .network-type-image .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7; |
| } |
| |
| .network-type-image.resource-cached .network-graph-bar { |
| border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7; |
| } |
| |
| .network-type-font .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7; |
| } |
| |
| .network-type-font.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7; |
| } |
| |
| .network-type-script .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7; |
| } |
| |
| .network-type-script.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7; |
| } |
| |
| .network-type-xhr .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7; |
| } |
| |
| .network-type-xhr.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7; |
| } |
| |
| .network-type-websocket .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; |
| } |
| |
| .network-type-websocket.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; |
| } |
| |
| .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-log-grid.data-grid .timeline-column, |
| .network.panel .data-grid th.timeline-column { |
| border-right: none; |
| } |
| |
| .data-grid td.timeline-column { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| .network-event-divider-padding { |
| position: absolute; |
| width: 8px; |
| top: 0; |
| bottom: 0; |
| pointer-events: auto; |
| } |
| |
| .network-event-divider { |
| position: absolute; |
| width: 2px; |
| top: 31px; |
| bottom: 0; |
| z-index: 300; |
| } |
| |
| .network-timeline-grid.small .network-event-divider { |
| top: 23px; |
| } |
| |
| .network-red-divider { |
| background-color: rgba(255, 0, 0, 0.5); |
| } |
| |
| .network-blue-divider { |
| background-color: rgba(0, 0, 255, 0.5); |
| } |
| |
| .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; |
| } |
| |
| /* Filters */ |
| |
| .network-log-grid.data-grid table.data tr.revealed.network-item { |
| display: none; |
| } |
| |
| /* Summary */ |
| |
| .network-log-grid.data-grid tr.filler td { |
| padding-bottom: 20px !important; |
| } |
| |
| .network-log-grid.data-grid .network-summary-bar { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgb(101, 111, 130); |
| } |
| |
| .network-log-grid.data-grid .network-summary-bar td { |
| color: white; |
| height: 20px !important; |
| border: none; |
| font-size: 110%; |
| padding: 0 0 0 8px; |
| white-space: pre; |
| overflow : hidden; |
| text-overflow : ellipsis; |
| } |
| |
| .network-log-grid.data-grid .network-summary-bar img { |
| vertical-align: middle; |
| padding-right: 8px; |
| } |
| |
| #network-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| width: 100%; |
| height: 100%; |
| border-right: 0 none transparent; |
| overflow-y: auto; |
| overflow-x: hidden; |
| } |
| |
| // Brief mode peculiarities. |
| #network-container.brief-mode .network-timeline-grid { |
| display: none; |
| } |
| |
| #network-container.brief-mode td, |
| #network-container.brief-mode th { |
| border-right: none; |
| } |
| |
| #network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer { |
| display: none; |
| } |
| |
| #network-container.brief-mode .network-timeline-grid { |
| display: none; |
| } |
| |
| #network-container:not(.brief-mode) .data-grid tr.selected { |
| background-color: transparent; |
| color: #222; |
| } |
| |
| #network-container.brief-mode .data-grid .data-container { |
| padding-right: 0; |
| } |