Index: resources/inspector/inspector.css |
=================================================================== |
--- resources/inspector/inspector.css (revision 51185) |
+++ resources/inspector/inspector.css (working copy) |
@@ -27,6 +27,10 @@ |
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
*/ |
+html { |
+ height: 100%; |
+} |
+ |
body { |
cursor: default; |
position: absolute; |
@@ -219,6 +223,10 @@ |
background-image: url(Images/profilesIcon.png); |
} |
+.toolbar-item.audits .toolbar-icon { |
+ background-image: url(Images/auditsIcon.png); |
+} |
+ |
.toolbar-item.console .toolbar-icon { |
background-image: url(Images/consoleIcon.png); |
} |
@@ -416,7 +424,7 @@ |
-webkit-mask-image: url(Images/consoleButtonGlyph.png); |
} |
-#clear-console-status-bar-item .glyph { |
+.clear-status-bar-item .glyph { |
-webkit-mask-image: url(Images/clearConsoleButtonGlyph.png); |
} |
@@ -424,16 +432,12 @@ |
-webkit-mask-image: url(Images/consoleButtonGlyph.png); /* TODO: Needs Image for Changes Toggle Button */ |
} |
-#clear-changes-status-bar-item .glyph { |
- -webkit-mask-image: url(Images/clearConsoleButtonGlyph.png); |
-} |
- |
-#count-items { |
+#counters { |
position: absolute; |
right: 16px; |
top: 0; |
cursor: pointer; |
- padding: 6px 2px; |
+ padding: 6px 2px 6px 0px; |
font-size: 10px; |
height: 19px; |
} |
@@ -882,6 +886,7 @@ |
right: 0; |
left: 0; |
bottom: 0; |
+ overflow: auto; |
} |
.resource-view.headers-visible .resource-view-content { |
@@ -974,7 +979,7 @@ |
position: absolute; |
top: 0; |
left: 0; |
- right: 225px; |
+ right: 325px; |
bottom: 0; |
} |
@@ -983,7 +988,7 @@ |
top: 0; |
right: 0; |
bottom: 0; |
- width: 225px; |
+ width: 325px; |
background-color: rgb(245, 245, 245); |
border-left: 1px solid rgb(64%, 64%, 64%); |
cursor: default; |
@@ -1288,10 +1293,6 @@ |
-webkit-background-clip: padding; |
} |
-.section.no-affect .header { |
- background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(167, 167, 167)), to(rgb(123, 123, 123))) |
-} |
- |
.section .header::before { |
position: absolute; |
top: 4px; |
@@ -1301,10 +1302,6 @@ |
content: url(Images/treeRightTriangleWhite.png); |
} |
-.section.blank-section .header::before { |
- display: none; |
-} |
- |
.section.expanded .header::before { |
content: url(Images/treeDownTriangleWhite.png); |
} |
@@ -1328,15 +1325,6 @@ |
display: inline; |
} |
-.section .header input[type=checkbox] { |
- height: 10px; |
- width: 10px; |
- margin-left: 0; |
- margin-top: 0; |
- margin-bottom: 0; |
- vertical-align: 2px; |
-} |
- |
.section .header .subtitle, .event-bar .header .subtitle { |
float: right; |
font-size: 10px; |
@@ -1501,6 +1489,10 @@ |
text-decoration: none !important; |
} |
+.editing br { |
+ display: none; |
+} |
+ |
.elements-tree-editor { |
-webkit-user-select: text; |
-webkit-user-modify: read-write-plaintext-only; |
@@ -1534,33 +1526,6 @@ |
text-overflow: clip; |
} |
-.section .properties .overloaded, .section .properties .disabled { |
- text-decoration: line-through; |
-} |
- |
-.section.computed-style .properties .disabled { |
- text-decoration: none; |
- opacity: 0.5; |
-} |
- |
-.section .properties .implicit, .section .properties .inherited { |
- opacity: 0.5; |
-} |
- |
-.section:not(.show-inherited) .properties .inherited { |
- display: none; |
-} |
- |
-.section .properties .enabled-button { |
- display: none; |
- float: right; |
- font-size: 10px; |
- margin: 0 0 0 4px; |
- vertical-align: top; |
- position: relative; |
- z-index: 1; |
-} |
- |
/* FIXME: need a better icon (comment in bug 27514) */ |
.section .properties .delete-button { |
width: 10px; |
@@ -1572,10 +1537,6 @@ |
border: 0 none transparent; |
} |
-.section:hover .properties .enabled-button { |
- display: block; |
-} |
- |
.section .properties .name, .event-properties .name { |
color: rgb(136, 19, 145); |
} |
@@ -1658,7 +1619,6 @@ |
} |
.pane > .title > select { |
- display: none; |
float: right; |
width: 23px; |
height: 17px; |
@@ -1673,10 +1633,6 @@ |
-webkit-appearance: none; |
} |
-.pane.expanded:hover > .title > select { |
- display: inline-block; |
-} |
- |
.pane > .title > select:hover { |
background-position: -23px 0px; |
} |
@@ -1721,6 +1677,26 @@ |
height: 5px; |
} |
+.sidebar-pane-subtitle { |
+ float: right; |
+ font-weight: normal; |
+ overflow: hidden; |
+} |
+ |
+body.platform-windows .sidebar-pane-subtitle { |
+ padding-top: 1px; |
+} |
+ |
+.sidebar-pane-subtitle input, .section .header input[type=checkbox] { |
+ font-size: inherit; |
+ hight: 1em; |
+ width: 1em; |
+ margin-left: 0; |
+ margin-top: 0; |
+ margin-bottom: 0.25em; |
+ vertical-align: bottom; |
+} |
+ |
.metrics { |
padding: 8px; |
font-size: 10px; |
@@ -2292,7 +2268,6 @@ |
.panel-enabler-view.welcome .instructions { |
display: inline-block; |
vertical-align: middle; |
- width: 330px; |
margin: 0; |
white-space: normal; |
line-height: 175%; |
@@ -2303,7 +2278,8 @@ |
} |
.panel-enabler-view.welcome button.status-bar-item { |
- vertical-align: middle; |
+ background-image: none; |
+ vertical-align: top; |
} |
.pane button { |
@@ -2379,6 +2355,10 @@ |
max-width: 250px; |
} |
+#scripts-files option.extension-script { |
+ color: rgb(70, 134, 240); |
+} |
+ |
#scripts-functions { |
max-width: 150px; |
} |
@@ -2653,7 +2633,7 @@ |
margin-right: 3px; |
} |
-#resources-dividers { |
+.resources-dividers { |
position: absolute; |
left: 0; |
right: 0; |
@@ -2662,7 +2642,7 @@ |
z-index: -100; |
} |
-#resources-event-dividers { |
+.resources-event-dividers { |
position: absolute; |
left: 0; |
right: 0; |
@@ -2672,7 +2652,11 @@ |
pointer-events: none; |
} |
-#resources-dividers-label-bar { |
+.timeline .resources-event-dividers { |
+ height: 19px; |
+} |
+ |
+.resources-dividers-label-bar { |
position: absolute; |
top: 0; |
left: 0px; |
@@ -2700,24 +2684,26 @@ |
pointer-events: auto; |
} |
-.resources-onload-divider { |
+.resources-event-divider { |
position: absolute; |
width: 2px; |
top: 0; |
bottom: 0; |
z-index: 300; |
+} |
+ |
+.resources-red-divider { |
background-color: rgba(255, 0, 0, 0.5); |
} |
-.resources-ondomcontent-divider { |
- position: absolute; |
- width: 2px; |
- top: 0; |
- bottom: 0; |
- z-index: 300; |
+.resources-blue-divider { |
background-color: rgba(0, 0, 255, 0.5); |
} |
+.resources-orange-divider { |
+ background-color: rgba(255, 178, 23, 0.5); |
+} |
+ |
.resources-divider.last { |
background-color: transparent; |
} |
@@ -2731,6 +2717,15 @@ |
white-space: nowrap; |
} |
+.memory-graph-label { |
+ position: absolute; |
+ top: 5px; |
+ left: 5px; |
+ font-size: 9px; |
+ color: rgb(50%, 50%, 50%); |
+ white-space: nowrap; |
+} |
+ |
.resources-graph-label { |
position: absolute; |
top: 0; |
@@ -3356,7 +3351,7 @@ |
top: 0px; |
bottom: 0px; |
left: 0px; |
- padding-top: 1px; |
+ padding-top: 2px; |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209))); |
border-right: 1px solid rgb(163, 163, 163); |
} |
@@ -3367,23 +3362,50 @@ |
bottom: 0px; |
left: 200px; |
right: 0px; |
- background-color: rgb(224, 224, 224); |
+ background-color: rgb(255, 255, 255); |
} |
+.timeline-window-selector { |
+ position: absolute; |
+ top: 0; |
+ bottom: 0; |
+ background-color: rgba(125, 173, 217, 0.5); |
+ z-index: 250; |
+} |
+ |
#timeline-overview-window { |
background-color: white; |
position: absolute; |
left: 0; |
right: 0; |
top: 0; |
+ bottom: 60px; |
+ z-index: 150; |
+} |
+ |
+.timeline-overview-dividers-background { |
+ left: 0%; |
+ right: 0%; |
+ top: 0px; |
+ bottom: 60px; |
+ background-color: black; |
+ position: absolute; |
+} |
+ |
+.timeline-overview-window-rulers { |
+ top: 0; |
bottom: 0; |
+ position: absolute; |
+ opacity: 0.2; |
+ border-right: 1px solid black; |
+ border-left: 1px solid black; |
z-index: 150; |
} |
.timeline-window-resizer { |
position: absolute; |
- top: 35px; |
- bottom: 15px; |
+ top: 0px; |
+ bottom: 60px; |
width: 5px; |
margin-left: -3px; |
margin-right: -2px; |
@@ -3413,13 +3435,9 @@ |
overflow-x: hidden; |
} |
-.timeline-clear-status-bar-item .glyph { |
- -webkit-mask-image: url(Images/clearConsoleButtonGlyph.png); |
-} |
- |
-.timeline-category-tree-item { |
- height: 20px; |
- line-height: 20px; |
+.timeline-category-statusbar-item { |
+ height: 24px; |
+ line-height: 24px; |
padding-left: 6px; |
white-space: nowrap; |
text-overflow: ellipsis; |
@@ -3427,7 +3445,7 @@ |
font-weight: bold; |
} |
-.timeline-category-tree-item .timeline-category-checkbox { |
+.timeline-category-statusbar-item .timeline-category-checkbox { |
width: 10px; |
height: 11px; |
margin: 0 3px 0 5px; |
@@ -3439,26 +3457,22 @@ |
-webkit-appearance: none; |
} |
-.timeline-category-tree-item .timeline-category-checkbox:checked { |
+.timeline-category-statusbar-item .timeline-category-checkbox:checked { |
background-position-x: -10px; |
} |
-.timeline-category-tree-item.timeline-category-loading .timeline-category-checkbox { |
+.timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox { |
background-position-y: 0; |
} |
-.timeline-category-tree-item.timeline-category-scripting .timeline-category-checkbox { |
+.timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox { |
background-position-y: -33px; |
} |
-.timeline-category-tree-item.timeline-category-rendering .timeline-category-checkbox { |
+.timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox { |
background-position-y: -11px; |
} |
-.timeline-category-tree-item:nth-of-type(2n) { |
- background-color: rgba(0, 0, 0, 0.05); |
-} |
- |
.timeline-tree-item { |
height: 18px; |
line-height: 15px; |
@@ -3524,14 +3538,25 @@ |
color: rgba(0, 0, 0, 0.7); |
} |
-#timeline-overview-graphs { |
+#timeline-overview-timelines, |
+#timeline-overview-memory { |
position: absolute; |
left: 0; |
right: 0; |
bottom: 0; |
top: 20px; |
+ z-index: 160; |
} |
+#timeline-overview-memory > canvas { |
+ position: absolute; |
+ left: 0; |
+ right: 0; |
+ bottom: 0; |
+ top: 5px; |
+} |
+ |
+ |
#timeline-graphs { |
position: absolute; |
left: 0; |
@@ -3584,6 +3609,14 @@ |
pointer-events: visibleFill; |
} |
+.timeline-graph-bar.with-children { |
+ opacity: 0.2; |
+} |
+ |
+.timeline-graph-bar.cpu { |
+ opacity: 0.6; |
+} |
+ |
.timeline-graph-side.even { |
background-color: rgba(0, 0, 0, 0.05); |
} |
@@ -3600,6 +3633,32 @@ |
-webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4; |
} |
+.timeline-aggregated-category { |
+ display: inline-block; |
+ height: 11px; |
+ margin-right: 2px; |
+ margin-left: 6px; |
+ position: relative; |
+ top: 2px; |
+ width: 10px; |
+} |
+ |
+.timeline-loading { |
+ -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4; |
+} |
+ |
+.timeline-scripting { |
+ -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4; |
+} |
+ |
+.timeline-rendering { |
+ -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4; |
+} |
+ |
+.popover .timeline-aggregated-category.timeline-loading { |
+ margin-left: 0px; |
+} |
+ |
.timeline-category-loading .timeline-tree-icon { |
background-position-y: 0px; |
} |
@@ -3612,6 +3671,53 @@ |
background-position-y: 72px; |
} |
+.timeline-details { |
+ -webkit-user-select: text; |
+} |
+ |
+.timeline-details-row-title { |
+ font-weight: bold; |
+ text-align: right; |
+ white-space: nowrap; |
+} |
+ |
+.timeline-details-row-data { |
+ white-space: nowrap; |
+} |
+ |
+.timeline-details-title { |
+ border-bottom: 1px solid #B8B8B8; |
+ font-size: 11px; |
+ font-weight: bold; |
+ padding-bottom: 5px; |
+ padding-top: 0px; |
+ white-space: nowrap; |
+} |
+ |
+.timeline-filter-status-bar-item .glyph { |
+ -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png); |
+} |
+ |
+.timeline-filter-status-bar-item.toggled-on .glyph { |
+ background-color: rgb(66, 129, 235) !important; |
+} |
+ |
+.timeline-records-counter { |
+ font-size: 11px; |
+ text-shadow: white 0 1px 0; |
+} |
+ |
+#main-status-bar > .timeline-records-counter { |
+ float: right; |
+ margin-top: 4px; |
+ margin-right: 25px; |
+} |
+ |
+#counters > .timeline-records-counter { |
+ float: left; |
+ margin-top: -2px; |
+} |
+ |
/* Profiler Style */ |
#profile-views { |
@@ -3622,6 +3728,7 @@ |
bottom: 0; |
} |
+#timeline-view-status-bar-items, |
#profile-view-status-bar-items { |
position: absolute; |
top: 0; |
@@ -3862,22 +3969,200 @@ |
background-color: rgb(255, 255, 194); |
} |
-.timeline-details { |
- -webkit-user-select: text; |
+.styles-sidebar-separator { |
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209))); |
+ padding: 0 5px; |
+ border-top: 1px solid rgb(189, 189, 189); |
+ border-bottom: 1px solid rgb(189, 189, 189); |
+ color: rgb(110, 110, 110); |
+ text-shadow: white 0 1px 0; |
+ white-space: nowrap; |
+ text-overflow: ellipsis; |
+ overflow: hidden; |
+ font-size: 11px; |
} |
-.timeline-details-row-title { |
- font-weight: bold; |
- text-align: right; |
+.styles-selector { |
+ cursor: text; |
+} |
+ |
+.workers-list { |
+ list-style: none; |
+ margin: 0; |
+ padding: 0; |
+} |
+ |
+.workers-list > li { |
+ overflow: hidden; |
+ text-overflow: ellipsis; |
white-space: nowrap; |
+ margin-left: 1em; |
+ font-size: 12px; |
} |
-.timeline-details-row-data { |
+a.worker-item { |
+ color: rgb(33%, 33%, 33%); |
+ cursor: pointer; |
+ text-decoration: none; |
+} |
+.styles-section { |
+ padding: 2px 2px 4px 4px; |
+ min-height: 18px; |
white-space: nowrap; |
+ -webkit-background-origin: padding; |
+ -webkit-background-clip: padding; |
+ -webkit-user-select: text; |
} |
-.timeline-details-title { |
- font-weight: bold; |
+.styles-section:not(.first-styles-section) { |
+ border-top: 1px solid rgb(191, 191, 191); |
+} |
+ |
+.styles-section .header { |
white-space: nowrap; |
+ -webkit-background-origin: padding; |
+ -webkit-background-clip: padding; |
} |
+.styles-section .header .title { |
+ word-wrap: break-word; |
+ white-space: normal; |
+} |
+ |
+.styles-section .header .subtitle { |
+ color: rgb(85, 85, 85); |
+ float: right; |
+ margin-left: 5px; |
+ max-width: 65%; |
+ text-overflow: ellipsis; |
+ overflow: hidden; |
+} |
+ |
+.styles-section .header .subtitle a { |
+ color: inherit; |
+} |
+ |
+.styles-section .subtitle::before, .styles-section .subtitle a::before { |
+ content: attr(data-uncopyable); |
+} |
+ |
+.styles-section .properties { |
+ display: none; |
+ margin: 0; |
+ padding: 2px 4px 0 8px; |
+ list-style: none; |
+} |
+ |
+.styles-section.no-affect .properties li { |
+ opacity: 0.5; |
+} |
+ |
+.styles-section.no-affect .properties li.editing { |
+ opacity: 1.0; |
+} |
+ |
+.styles-section.expanded .properties { |
+ display: block; |
+} |
+ |
+.styles-section .properties li { |
+ margin-left: 12px; |
+ white-space: nowrap; |
+ text-overflow: ellipsis; |
+ overflow: hidden; |
+ cursor: auto; |
+} |
+ |
+.styles-section .properties li.parent { |
+ margin-left: 1px; |
+} |
+ |
+.styles-section .properties ol { |
+ display: none; |
+ margin: 0; |
+ -webkit-padding-start: 12px; |
+ list-style: none; |
+} |
+ |
+.styles-section .properties ol.expanded { |
+ display: block; |
+} |
+ |
+.styles-section .properties li.parent::before { |
+ content: url(Images/treeRightTriangleBlack.png); |
+ opacity: 0.75; |
+ float: left; |
+ width: 8px; |
+ height: 8px; |
+ margin-top: 0; |
+ padding-right: 3px; |
+ -webkit-user-select: none; |
+ cursor: default; |
+} |
+ |
+.styles-section .properties li.parent.expanded::before { |
+ content: url(Images/treeDownTriangleBlack.png); |
+ margin-top: 1px; |
+} |
+ |
+.styles-section .properties li .info { |
+ padding-top: 4px; |
+ padding-bottom: 3px; |
+} |
+ |
+.styles-section:hover .properties .enabled-button { |
+ display: block; |
+} |
+ |
+.styles-section .properties li.disabled .enabled-button { |
+ display: block; |
+} |
+ |
+.styles-section .properties .enabled-button { |
+ display: none; |
+ float: right; |
+ font-size: 10px; |
+ margin: 0 0 0 4px; |
+ vertical-align: top; |
+ position: relative; |
+ z-index: 1; |
+} |
+ |
+.styles-section .properties .overloaded, .styles-section .properties .disabled { |
+ text-decoration: line-through; |
+} |
+ |
+.styles-section.computed-style .properties .disabled { |
+ text-decoration: none; |
+ opacity: 0.5; |
+} |
+ |
+.styles-section .properties .implicit, .styles-section .properties .inherited { |
+ opacity: 0.5; |
+} |
+ |
+ |
+.body .styles-section .properties .inherited { |
+ display: none; |
+} |
+ |
+.body.show-inherited .styles-section .properties .inherited { |
+ display: block; |
+} |
+ |
+a.worker-item:hover { |
+ color: rgb(15%, 15%, 15%); |
+} |
+ |
+.resource-content-unavailable { |
+ color: rgb(50%, 50%, 50%); |
+ font-style: italic; |
+ font-size: 14px; |
+ text-align: center; |
+ padding: 32px; |
+} |
+ |
+.node-link { |
+ text-decoration: underline; |
+ cursor: pointer; |
+} |