Upstream version 9.38.198.0

[platform/framework/web/crosswalk.git] / src / third_party / WebKit / Source / devtools / front_end / timelinePanel.css

diff --git a/src/third_party/WebKit/Source/devtools/front_end/timelinePanel.css b/src/third_party/WebKit/Source/devtools/front_end/timelinePanel.css
index 0a95ca8..1161192 100644 (file)
--- a/src/third_party/WebKit/Source/devtools/front_end/timelinePanel.css
+++ b/src/third_party/WebKit/Source/devtools/front_end/timelinePanel.css
@@ -28,7 +28,7 @@
  */
 
 #timeline-overview-panel {
-    flex: 0 0 81px;
+    flex: none;
     position: relative;
     border-bottom: 1px solid rgb(140, 140, 140);
 }
@@ -51,21 +51,11 @@
     flex: auto;
 }
 
-#timeline-overview-sidebar {
-    flex: none;
-    padding-right: 10px;
-    border-right: 1px solid rgb(64%, 64%, 64%);
-}
-
 #timeline-overview-grid {
     background-color: rgb(255, 255, 255);
 }
 
-.timeline-frames-view .timeline-records-counter {
-    display: none;
-}
-
-.timeline-frames-view #timeline-overview-grid {
+.timeline-overview-frames-mode #timeline-overview-grid {
     display: none;
 }
 
@@ -73,10 +63,9 @@
     pointer-events: auto;
 }
 
-.timeline-frames-view .overview-grid-window,
-.timeline-frames-view .overview-grid-dividers-background,
-.timeline-frames-view .overview-grid-window-resizer {
-    height: 15px;
+.timeline-overview-frames-mode .overview-grid-window,
+.timeline-overview-frames-mode .overview-grid-dividers-background {
+    height: 100%;
 }
 
 #timeline-overview-grid #resources-graphs {
@@ -93,16 +82,13 @@
     overflow-x: hidden;
 }
 
-.timeline-records-view {
-    overflow: hidden !important;
-}
-
 .timeline-details-split {
     flex: auto;
 }
 
 .timeline-view {
     flex: auto;
+    overflow: hidden;
 }
 
 .timeline-view-stack {
@@ -266,29 +252,33 @@
 }
 
 #timeline-overview-events,
-#timeline-overview-memory {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 20px;
+#timeline-overview-memory,
+#timeline-overview-power {
+    flex: 0 0 60px;
     z-index: 160;
+    width: 100%;
 }
 
-#timeline-overview-memory  {
-    top: 25px;
+#timeline-overview-memory {
+    flex-basis: 20px;
+}
+
+#timeline-overview-frames {
+    flex-basis: 79px;
 }
 
 #timeline-overview-pane {
     flex: auto;
     position: relative;
+    overflow: hidden;
 }
 
 #timeline-overview-container {
     display: flex;
-    flex: auto;
+    flex-direction: column;
+    flex: none;
     position: relative;
-    height: 80px;
+    overflow: hidden;
 }
 
 #timeline-overview-container canvas {
@@ -345,11 +335,6 @@
     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;
 }
@@ -370,26 +355,22 @@
     border: solid 1px;
 }
 
-.popover .timeline-aggregated-category.timeline-loading {
-    margin-left: 0;
-}
-
 .popover ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 }
 
-.garbage-collect-status-bar-item .glyph {
+.timeline-garbage-collect-status-bar-item .glyph {
     -webkit-mask-position: -128px -24px;
 }
 
-.glue-async-status-bar-item .glyph {
-    -webkit-mask-position: -128px -48px;
+.timeline-frames-status-bar-item .glyph {
+    -webkit-mask-position: -160px -48px;
 }
 
-.glue-async-status-bar-item.toggled-on:disabled .glyph {
-    background-color: rgba(0, 0, 0, 0.75);
+.timeline-flame-chart-status-bar-item .glyph {
+    -webkit-mask-position: -192px -48px;
 }
 
 #resources-container-content {
@@ -405,82 +386,6 @@
     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 {
-    height: 100%;
-}
-
-#timeline-overview-sidebar .sidebar-tree-item {
-    height: auto;
-    flex: auto;
-    margin: 1px 0 1px 0;
-    border-top: none;
-    display: flex;
-    align-items: center;
-    border-left: 6px solid transparent;
-    padding-left: 0;
-    color: #666;
-}
-
-#timeline-overview-sidebar .sidebar-tree-item:hover {
-    color: inherit;
-}
-
-#timeline-overview-sidebar .sidebar-tree-item.selected {
-    font-weight: bold;
-    color: inherit;
-    text-shadow: none;
-    background: none;
-    border-left: 6px solid #555;
-}
-
-#timeline-overview-sidebar .sidebar-tree-item .titles.no-subtitle {
-    top: initial;
-}
-
-#timeline-overview-sidebar .icon {
-    height: 24px;
-    margin: 0;
-    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
-    -webkit-mask-size: 320px 144px;
-    background-color: black;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-#timeline-overview-sidebar .icon {
-    -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.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;
@@ -489,25 +394,23 @@
     white-space: nowrap;
 }
 
-.max.memory-graph-label {
-    top: 5px;
-}
-
-.min.memory-graph-label {
-    bottom: 5px;
-}
-
-#memory-counters-graph {
-    border-right: 1px solid rgb(196, 196, 196);
-}
-
 #memory-graphs-canvas-container {
     overflow: hidden;
+    flex: auto;
+    position: relative;
 }
 
-#memory-graphs-canvas-container.dom-counters .resources-dividers,
 #memory-counters-graph {
-    top: 17px;
+    flex: auto;
+}
+
+#memory-graphs-canvas-container .memory-counter-marker {
+    position: absolute;
+    border-radius: 3px;
+    width: 5px;
+    height: 5px;
+    margin-left: -3px;
+    margin-top: -2px;
 }
 
 #memory-graphs-container .split-view-contents-first {
@@ -516,24 +419,22 @@
 }
 
 #memory-graphs-container .sidebar-tree-section {
-    padding-left: 5px;
+    flex: 0 0 24px;
+    padding: 5px 0 0 5px;
 }
 
 .memory-counter-sidebar-info {
-    margin: 5px;
+    flex: 0 0 18px;
+    margin-left: 5px;
     white-space: nowrap;
 }
 
-.memory-counter-sidebar-info .swatch{
+.memory-counter-sidebar-info .swatch {
     background-image: none;
     border: 1px solid rgba(0,0,0,0.3);
     opacity: 0.5;
 }
 
-.memory-counter-sidebar-info.bottom-border-visible {
-    border-bottom: 1px solid #AAA;
-}
-
 .memory-counter-sidebar-info .title {
     margin: 4px;
 }
@@ -543,35 +444,49 @@
 }
 
 #counter-values-bar {
+    flex: 0 0 18px;
     border-bottom: solid 1px lightgray;
     width: 100%;
-    height: 17px;
     overflow: hidden;
+    line-height: 18px;
 }
 
 .timeline .resources-event-divider {
     height: 19px;
-    width: 8px;
-    border-left-width: 2px;
-    border-left-style: solid;
-    bottom: auto;
+    width: 6px;
     pointer-events: auto;
+    margin-left: -2px;
 }
 
-.resources-red-divider {
-    border-color: rgba(255, 0, 0, 0.5);
+.timeline .resources-event-divider::before {
+    height: 19px;
+    width: 2px;
+    margin: 0 2px;
+    background-color: rgb(163, 109, 0);
+    bottom: auto;
+    content: "";
+    display: block;
+}
+
+.timeline .resources-event-divider:hover::before {
+    width: 4px;
+    margin: 0 1px;
 }
 
-.resources-blue-divider {
-    border-color: rgba(0, 0, 255, 0.5);
+.timeline .resources-event-divider.resources-red-divider::before {
+    background-color: rgb(255, 0, 0);
 }
 
-.resources-orange-divider {
-    border-color: rgba(255, 178, 23, 0.5);
+.timeline .resources-event-divider.resources-blue-divider::before {
+    background-color: rgb(0, 0, 255);
 }
 
-.resources-green-divider {
-    border-color: rgba(0, 130, 0, 0.5);
+.timeline .resources-event-divider.resources-orange-divider::before {
+    background-color: rgb(255, 178, 23);
+}
+
+.timeline .resources-event-divider.resources-green-divider::before {
+    background-color: rgb(0, 130, 0);
 }
 
 .resources-divider:last-child {
@@ -593,7 +508,6 @@
     opacity: 0.8;
     color: black;
     text-align: center;
-    padding-top: 3px;
     z-index: 220;
     pointer-events: auto;
 }
@@ -601,13 +515,21 @@
 .timeline-frame-strip {
     position: absolute;
     height: 19px;
+    padding-top: 3px;
+}
+
+.timeline-frame-strip.selected {
+    background-color: rgb(56, 121, 217);
+    color: white;
 }
 
 #timeline-grid-header {
     pointer-events: none;
+    height: 19px;
 }
 
-.timeline-utilization-strips {
+#timeline-graph-records-header {
+    pointer-events: none;
     height: 19px;
     padding: 1px 0;
     justify-content: center;
@@ -618,6 +540,7 @@
     overflow: hidden;
     flex: 0 1 12px;
     position: relative;
+    height: 9px;
 }
 
 .timeline-utilization-strip .timeline-graph-bar {
@@ -672,19 +595,6 @@
     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); }
-}
-
 .timeline-filters-header {
     flex: 0 0 23px;
     overflow: hidden;
@@ -715,19 +625,7 @@
 
 .timeline-details-view {
     color: #333;
-}
-
-.timeline-details-view-title {
-    padding: 2px 5px;
-    flex: 0 0 19px;
-    border-bottom: 1px solid rgb(202, 202, 202);
-    background-color: rgb(236, 236, 236);
-    white-space: nowrap;
-    display: flex;
-    color: rgb(92, 110, 129);
-    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
     overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .timeline-details-view-body {
@@ -763,6 +661,23 @@
     padding: 10px;
 }
 
+.timeline-details-view-row-details table {
+    padding-left: 10px;
+}
+
+.timeline-details-view-row-details table td {
+    text-align: left;
+    vertical-align: top;
+}
+
+.timeline-details-view-row-details table td .section {
+    margin-top: -1px;
+}
+
+.timeline-details-view-row-details table td .section  > .header .title {
+    white-space: nowrap;
+}
+
 .timeline-details-view-row-stack-trace {
     padding: 4px 0 4px 20px;
 }
@@ -777,66 +692,65 @@
     color: #333 !important;
 }
 
-.timeline-memory-split {
-    flex: auto;
+.timeline-aggregated-info {
+    flex: none;
+    position: relative;
+    margin: 8px;
 }
 
-.timeline-memory-split > .split-view-contents-first {
-    overflow: hidden;
+.timeline-range-summary {
+    align-items: center;
+    margin: 6px;
 }
 
-.pie-chart {
-    width: 100px;
-    height: 110px;
+.timeline-range-summary > div {
+    flex-shrink: 0;
 }
 
-.pie-chart-background {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    border-radius: 50px;
-    background-color: rgb(248, 248, 248);
-    box-shadow: 0 1px 2px;
+.timeline-aggregated-info-legend > div {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.pie-chart-foreground {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    text-align: center;
-    line-height: 100px;
-    z-index: 10;
+.timeline-aggregated-info .pie-chart {
+    margin-left: 20px;
+    margin-bottom: 10px;
 }
 
-.pie-chart-slice {
-    position: absolute;
-    width: 100px;
-    height: 100px;
-    border-radius: 50px;
-    clip: rect(0px, 100px, 100px, 50px);
+.timeline-flamechart {
+    overflow: hidden;
 }
 
-.pie-chart-slice-inner {
+.timeline-progress-pane {
     position: absolute;
-    width: 100px;
-    height: 100px;
-    border-radius: 50px;
-    clip: rect(0px, 50px, 100px, 0px);
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    color: #777;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-size: 30px;
+    z-index: 500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.timeline-aggregated-info {
-    flex: none;
-    position: relative;
-    margin: 8px 2px;
-    width: 160px;
+.timeline-paint-profiler-view .outline-disclosure li {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 1 1 1 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.timeline-aggregated-info-legend > div {
+.paint-profiler-image-view {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 }
 
-.timeline-aggregated-info .pie-chart {
-    margin-left: 20px;
+.paint-profiler-image-view img {
+    border: solid 1px black;
+    -webkit-transform-origin: 0px 0px;
 }