| .network-larger-resources-status-bar-item .glyph { |
| -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png); |
| } |
| |
| .network-sidebar .data-grid { |
| border: none; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| font-size: 11px; |
| } |
| |
| .network-sidebar .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))); |
| font-size: 11px; |
| } |
| |
| .network-sidebar .data-grid.small table.data { |
| -webkit-background-size: 1px 42px; |
| } |
| |
| .network-sidebar .data-grid td { |
| line-height: 17px; |
| height: 37px; |
| border-right: 1px solid rgb(210, 210, 210); |
| vertical-align: middle; |
| } |
| |
| .network-sidebar .data-grid.small td { |
| height: 17px; |
| } |
| |
| .network-sidebar .data-grid th { |
| border-bottom: 1px solid rgb(64%, 64%, 64%); |
| height: 30px; |
| font-size: 11px; |
| font-weight: bold; |
| } |
| |
| .network-sidebar .data-grid.small th { |
| height: 22px; |
| } |
| |
| .network-sidebar .data-grid th, .network.panel .data-grid th.sort-descending, .network.panel .data-grid th.sort-ascending { |
| background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217))); |
| } |
| |
| .network-sidebar .data-grid .data-container { |
| top: 31px; |
| } |
| |
| .network-sidebar .data-grid.small .data-container { |
| top: 23px; |
| } |
| |
| .network-sidebar .data-grid select { |
| -webkit-appearance: none; |
| background-color: transparent; |
| border: none; |
| width: 100%; |
| font-size: 11px; |
| font-weight: bold; |
| } |
| |
| .network-sidebar .data-grid.small tr.offscreen { |
| height: 21px; |
| } |
| |
| .network-sidebar .data-grid tr.offscreen { |
| height: 41px; |
| } |
| |
| .network-sidebar .data-grid tr.offscreen td { |
| display: none; |
| } |
| |
| .network-sidebar .data-grid tr.filler { |
| background-color: white; |
| } |
| |
| .network-sidebar .data-grid td.name-column { |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| .network.panel:not(.viewing-resource) .network-sidebar td.name-column:hover { |
| text-decoration: underline; |
| } |
| |
| .network-sidebar .data-grid td.method-column, |
| .network-sidebar .data-grid td.status-column, |
| .network-sidebar .data-grid td.type-column, |
| .network-sidebar .data-grid td.size-column, |
| .network-sidebar .data-grid td.time-column { |
| background-color: rgba(0, 0, 0, 0.07); |
| } |
| |
| .network-sidebar .data-grid td.size-column, |
| .network-sidebar .data-grid td.time-column { |
| text-align: right; |
| } |
| |
| .network-sidebar .small .network-graph-side { |
| height: 14px; |
| } |
| |
| .network-sidebar .data-grid th.sortable:active { |
| background-image: none; |
| } |
| |
| .network-cell-subtitle { |
| font-weight: normal; |
| color: gray; |
| } |
| |
| .network-sidebar tr.selected .network-cell-subtitle { |
| color: white; |
| } |
| |
| .network-header-subtitle { |
| color: gray; |
| } |
| |
| .network-sidebar .data-grid.small .network-cell-subtitle, |
| .network-sidebar .data-grid.small .network-header-subtitle |
| { |
| display: none; |
| } |
| |
| /* Resource preview icons */ |
| |
| .network-sidebar .data-grid .icon { |
| content: url(Images/resourcePlainIcon.png); |
| } |
| |
| .network-sidebar .data-grid.small .icon { |
| content: url(Images/resourcePlainIconSmall.png); |
| } |
| |
| .network-sidebar .network-category-scripts .icon { |
| content: url(Images/resourceJSIcon.png); |
| } |
| |
| .network-sidebar .data-grid.small .network-category-scripts .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-sidebar .network-category-documents .icon { |
| content: url(Images/resourceDocumentIcon.png); |
| } |
| |
| .network-sidebar .data-grid.small .network-category-documents .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-sidebar .network-category-stylesheets .icon { |
| content: url(Images/resourceCSSIcon.png); |
| } |
| |
| .network-sidebar .data-grid.small .network-category-stylesheets .icon { |
| content: url(Images/resourceDocumentIconSmall.png); |
| } |
| |
| .network-sidebar .network-category-images .icon { |
| position: relative; |
| background-image: url(Images/resourcePlainIcon.png); |
| background-repeat: no-repeat; |
| content: ""; |
| } |
| |
| .network-sidebar .data-grid.small .network-category-images .icon { |
| background-image: url(Images/resourcePlainIconSmall.png); |
| content: ""; |
| } |
| |
| .network-sidebar .data-grid .icon { |
| float: left; |
| width: 32px; |
| height: 32px; |
| margin-top: 1px; |
| margin-right: 3px; |
| } |
| |
| .network-sidebar .data-grid.small .icon { |
| width: 16px; |
| height: 16px; |
| } |
| |
| .network-sidebar .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-sidebar .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 5px; |
| white-space: nowrap; |
| margin-top: 1px; |
| border-top: 1px solid transparent; |
| overflow: hidden; |
| } |
| |
| .network-graph-bar-area { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 8px; |
| left: 9px; |
| } |
| |
| .network-graph-label { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| margin: auto -7px; |
| height: 13px; |
| line-height: 13px; |
| font-size: 9px; |
| 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; |
| font-weight: bold; |
| 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: 13px; |
| min-width: 14px; |
| opacity: 0.65; |
| -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 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) 6 7 6 7; |
| } |
| |
| .network-category-documents .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7; |
| } |
| |
| .network-category-documents.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7; |
| } |
| |
| .network-category-stylesheets .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7; |
| } |
| |
| .network-category-stylesheets.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7; |
| } |
| |
| .network-category-images .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7; |
| } |
| |
| .network-category-images.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7; |
| } |
| |
| .network-category-fonts .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7; |
| } |
| |
| .network-category-fonts.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7; |
| } |
| |
| .network-category-scripts .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7; |
| } |
| |
| .network-category-scripts.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7; |
| } |
| |
| .network-category-xhr .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7; |
| } |
| |
| .network-category-xhr.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7; |
| } |
| |
| .network-category-websockets .network-graph-bar { |
| -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7; |
| } |
| |
| .network-category-websockets.resource-cached .network-graph-bar { |
| -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7; |
| } |
| |
| |
| /* Popover */ |
| |
| .network-timing-row { |
| position: relative; |
| height: 16px; |
| } |
| |
| .network-timing-bar { |
| position: absolute; |
| background-color: red; |
| border-left: 1px solid red; |
| opacity: 0.4; |
| top: 0; |
| bottom: 0; |
| } |
| |
| .network-timing-bar-title { |
| position: absolute; |
| color: black; |
| top: 1px; |
| } |
| |
| .network-dim-cell { |
| color: grey; |
| } |
| |
| /* Dividers */ |
| |
| .network-timeline-grid { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| pointer-events: none; |
| } |
| |
| .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-sidebar .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-sidebar .resources-dividers { |
| z-index: 0; |
| } |
| |
| .network-sidebar .resources-dividers-label-bar { |
| background-color: transparent; |
| border: none; |
| height: 30px; |
| pointer-events: none; |
| } |
| |
| .network-sidebar .network-timeline-grid.small .resources-dividers-label-bar { |
| height: 23px; |
| } |
| |
| .network-sidebar .resources-divider-label { |
| top: 0px; |
| margin-top: -4px; |
| color: black; |
| } |
| |
| .network-sidebar .resources-dividers-label-bar .resources-divider { |
| top: 23px; |
| } |
| |
| .network-sidebar .network-timeline-grid.small .resources-dividers-label-bar .resources-divider { |
| top: 15px; |
| } |
| |
| .network-sidebar .resources-divider.first .resources-divider-label { |
| display: none; |
| } |
| |
| .network-sidebar .resources-dividers-label-bar .resources-divider.first { |
| background-color: transparent; |
| } |
| |
| /* Filters */ |
| #network-filter { |
| margin-top: 1px; |
| } |
| |
| .data-grid table.data tr.revealed.network-item { |
| display: none; |
| } |
| |
| .data-grid.filter-all table.data tr.revealed.network-item, |
| .data-grid.filter-documents table.data tr.revealed.network-category-documents, |
| .data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets, |
| .data-grid.filter-images table.data tr.revealed.network-category-images, |
| .data-grid.filter-scripts table.data tr.revealed.network-category-scripts, |
| .data-grid.filter-xhr table.data tr.revealed.network-category-xhr, |
| .data-grid.filter-fonts table.data tr.revealed.network-category-fonts, |
| .data-grid.filter-websockets table.data tr.revealed.network-category-websockets, |
| .data-grid.filter-other table.data tr.revealed.network-category-other { |
| display: table-row; |
| } |
| |
| /* Summary */ |
| |
| .network-sidebar tr.filler td { |
| padding-bottom: 20px !important; |
| } |
| |
| .network-summary-bar { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| margin-right: -14px; |
| background-color: rgb(101, 111, 130); |
| } |
| |
| .network-sidebar .data-grid .network-summary-bar td { |
| color: white; |
| height: 20px; |
| border: none; |
| font-size: 11px; |
| font-weight: bold; |
| padding: 0 0 0 8px; |
| white-space: pre; |
| overflow : hidden; |
| text-overflow : ellipsis; |
| } |
| |
| .network-summary-bar img { |
| vertical-align: middle; |
| padding-right: 8px; |
| } |
| |
| /* Viewer */ |
| |
| .network.panel.viewing-resource .network-sidebar .data-grid td, |
| .network.panel.viewing-resource .network-sidebar .data-grid th { |
| border-right: none; |
| } |
| |
| .network.panel.viewing-resource .data-grid th.corner { |
| display: none; |
| } |
| |
| #network-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| border-right: 0 none transparent; |
| overflow-y: auto; |
| overflow-x: hidden; |
| } |
| |
| .network.panel.viewing-resource #network-container { |
| border-right: 1px solid rgb(163, 163, 163); |
| } |
| |
| #network-views { |
| position: absolute; |
| background: rgb(203, 203, 203); |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| #network-close-button { |
| position: absolute; |
| width: 14px; |
| height: 14px; |
| background-image: url(Images/closeButtons.png); |
| background-position: 0 0; |
| background-color: transparent; |
| border: 0 none transparent; |
| top: 8px; |
| left: 5px; |
| z-index: 10; |
| display: none; |
| } |
| |
| #network-views.small #network-close-button { |
| top: 4px; |
| } |
| |
| #network-close-button:hover { |
| background-position: 14px 0; |
| } |
| |
| #network-close-button:active { |
| background-position: 28px 0; |
| } |
| |
| .network.panel.viewing-resource #network-close-button { |
| display: block; |
| } |
| |
| |
| .network-sidebar .data-grid.full-grid-mode .viewer-column { |
| display: none; |
| } |
| |
| .network-sidebar .data-grid.brief-grid-mode .viewer-column, |
| .network-sidebar .data-grid.brief-grid-mode .method-column, |
| .network-sidebar .data-grid.brief-grid-mode .status-column, |
| .network-sidebar .data-grid.brief-grid-mode .type-column, |
| .network-sidebar .data-grid.brief-grid-mode .size-column, |
| .network-sidebar .data-grid.brief-grid-mode .time-column { |
| display: none; |
| } |
| |
| .network.panel.viewing-resource .network-timeline-grid { |
| display: none; |
| } |
| |
| .network-sidebar .data-grid.viewing-resource-mode .method-column, |
| .network-sidebar .data-grid.viewing-resource-mode .status-column, |
| .network-sidebar .data-grid.viewing-resource-mode .type-column, |
| .network-sidebar .data-grid.viewing-resource-mode .size-column, |
| .network-sidebar .data-grid.viewing-resource-mode .time-column, |
| .network-sidebar .data-grid.viewing-resource-mode .timeline-column { |
| display: none; |
| } |
| |
| .network.panel .network-sidebar { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| .network.panel:not(.viewing-resource) .sidebar-resizer-vertical { |
| display: none; |
| } |
| |
| .network.panel.viewing-resource .network-sidebar .data-grid-resizer { |
| display: none; |
| } |
| |
| .network.panel .scope-bar { |
| height: 23px; |
| padding-top: 5px; |
| } |
| |
| .network.panel:not(.viewing-resource) .data-grid tr.selected { |
| background-color: transparent; |
| color: black; |
| } |
| |
| #network-views .network-item-view .tabbed-pane-header { |
| height: 31px; |
| padding-top: 8px; |
| padding-left: 25px; |
| white-space: nowrap; |
| } |
| |
| #network-views.small .network-item-view .tabbed-pane-header { |
| height: 23px; |
| padding-top: 0; |
| } |
| |
| .network.panel.viewing-resource .data-grid .data-container { |
| padding-right: 0; |
| } |
| |
| .network-item-view { |
| display: none; |
| position: absolute; |
| background: white; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .network-item-view.visible { |
| display: -webkit-box; |
| } |
| |
| .network-item-view .tabbed-pane-header { |
| height: 20px; |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217))); |
| border-bottom: 1px solid rgb(163, 163, 163); |
| } |
| |
| .network-item-view .scope-bar li { |
| border-bottom-left-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
| |
| .resource-headers-view { |
| display: none; |
| padding: 6px; |
| -webkit-user-select: text; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| overflow: auto; |
| } |
| |
| .resource-headers-view.visible { |
| display: block; |
| } |
| |
| .resource-headers-view .outline-disclosure .parent { |
| -webkit-user-select: none; |
| font-weight: bold; |
| } |
| |
| .resource-headers-view .outline-disclosure .children li { |
| white-space: nowrap; |
| } |
| |
| .resource-headers-view .outline-disclosure li.expanded .header-count { |
| display: none; |
| } |
| |
| .resource-headers-view .outline-disclosure li .header-toggle { |
| display: none; |
| } |
| |
| .resource-headers-view .outline-disclosure li.expanded .header-toggle { |
| display: inline; |
| margin-left: 30px; |
| font-weight: normal; |
| color: rgb(45%, 45%, 45%); |
| } |
| |
| .resource-headers-view .outline-disclosure li .header-toggle:hover { |
| color: rgb(20%, 20%, 45%); |
| cursor: pointer; |
| } |
| |
| .resource-headers-view .outline-disclosure .header-name { |
| color: rgb(33%, 33%, 33%); |
| display: inline-block; |
| margin-right: 0.5em; |
| font-weight: bold; |
| vertical-align: top; |
| white-space: pre-wrap; |
| } |
| |
| .resource-headers-view .outline-disclosure .header-value { |
| display: inline; |
| margin-right: 100px; |
| white-space: pre-wrap; |
| word-break: break-all; |
| margin-top: 1px; |
| } |
| |
| .resource-headers-view .outline-disclosure li.headers-text { |
| text-indent: 0; |
| margin-left: -2px; |
| } |
| |
| .resource-headers-view .outline-disclosure .raw-form-data { |
| white-space: pre-wrap; |
| } |
| |
| .resource-cookies-view { |
| display: none; |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| bottom: 0; |
| overflow: auto; |
| padding: 12px; |
| height: 100%; |
| } |
| |
| .resource-cookies-view.visible { |
| display: block; |
| } |
| |
| .resource-cookies-view .data-grid { |
| height: 100%; |
| } |
| |
| .resource-cookies-view .data-grid .row-group { |
| font-weight: bold; |
| font-size: 11px; |
| } |
| |
| .resource-timing-view { |
| display: none; |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| bottom: 0; |
| padding: 6px; |
| font-weight: bold; |
| font-size: 11px; |
| color: rgb(30%, 30%, 30%); |
| } |
| |
| .resource-timing-view table { |
| border-spacing: 21px 0; |
| } |
| |
| .resource-timing-view .network-timing-bar { |
| opacity: 1; |
| } |
| |
| .resource-timing-view .network-timing-bar.proxy { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76))); |
| border-left: 1px solid rgb(139, 128, 76); |
| } |
| |
| .resource-timing-view .network-timing-bar.dns { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189))); |
| border-left: 1px solid rgb(81, 174, 189); |
| } |
| |
| .resource-timing-view .network-timing-bar.connecting { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56))); |
| border-left: 1px solid rgb(160, 214, 56); |
| } |
| |
| .resource-timing-view .network-timing-bar.ssl { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132))); |
| border-left: 1px solid rgb(216, 149, 132); |
| } |
| |
| .resource-timing-view .network-timing-bar.sending { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130))); |
| border-left: 1px solid rgb(216, 147, 130); |
| } |
| |
| .resource-timing-view .network-timing-bar.waiting { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175))); |
| border-left: 1px solid rgb(141, 125, 175); |
| } |
| |
| .resource-timing-view .network-timing-bar.receiving { |
| background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182))); |
| border-left: 1px solid rgb(182, 182, 182); |
| } |
| |
| .resource-timing-view.visible { |
| display: block; |
| } |