Updating the Chromium reference build for Windows. The continuous...

resources/inspector/inspector.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer. 
@@ skipping 11 matching lines @@
  * 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.
  */
 
 body {
     cursor: default;
-    height: 100%;
-    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     overflow: hidden;
     font-family: Lucida Grande, sans-serif;
     font-size: 10px;
     margin: 0;
     -webkit-text-size-adjust: none;
     -webkit-user-select: none;
 }
 
 * {
     -webkit-box-sizing: border-box;
@@ skipping 32 matching lines @@
     -webkit-box-orient: horizontal;
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
 }
 
 body.inactive #toolbar {
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
     border-bottom: 1px solid rgb(64%, 64%, 64%);
 }
 
-body.detached.platform-mac-leopard #toolbar {
+body.detached.platform-mac-leopard #toolbar,
+body.detached.platform-mac-snowleopard #toolbar {
     background: transparent !important;
 }
 
 body.attached #toolbar {
     height: 34px;
     border-top: 1px solid rgb(100, 100, 100);
     cursor: row-resize;
     padding-left: 0;
 }
 
@@ skipping 141 matching lines @@
 }
 
 body.detached .toolbar-item.close-left, body.detached .toolbar-item.close-right {
     display: none;
 }
 
 body.attached.port-qt .toolbar-item.close-left, body.attached.port-qt .toolbar-item.close-right {
     display: none;
 }
 
-body.platform-mac-tiger .toolbar-item.close-right, body.platform-mac-leopard .toolbar-item.close-right { 
+body.platform-mac .toolbar-item.close-right {
     display: none;
 }
 
-body:not(.platform-mac-tiger):not(.platform-mac-leopard) .toolbar-item.close-left { 
+body:not(.platform-mac) .toolbar-item.close-left {
     display: none;
 }
 
 #main {
     position: absolute;
     z-index: 1;
     top: 56px;
     left: 0;
     right: 0;
     bottom: 0;
@@ skipping 96 matching lines @@
 }
 
 button.status-bar-item .glyph.shadow {
     background-color: rgba(255, 255, 255, 0.33) !important;
 }
 
 button.status-bar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235);
 }
 
+button.status-bar-item.toggled-1 .glyph {
+    background-color: rgb(66, 129, 235);
+}
+
+button.status-bar-item.toggled-2 .glyph {
+    background-color: purple;   
+}
+
 button.status-bar-item:disabled {
     opacity: 0.5;
     background-position: 0 0 !important;
 }
 
 select.status-bar-item {
     min-width: 48px;
     border-width: 0 17px 0 2px;
     padding: 0 2px 0 6px;
     font-weight: bold;
@@ skipping 101 matching lines @@
 }
 
 #drawer-status-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: none;
 }
 
+.monospace {
+    font-size: 10px;
+    font-family: monospace;
+}
+
+body.platform-mac .monospace, body.platform-mac .source-code {
+    font-family: Monaco, monospace;
+}
+
+/* Keep .platform-mac to make the rule more specific than the general one above. */
+body.platform-mac.platform-mac-snowleopard .monospace,
+body.platform-mac.platform-mac-snowleopard .source-code {
+    font-size: 11px;
+    font-family: Menlo, monospace;
+}
+
+body.platform-windows .monospace, body.platform-windows .source-code {
+    font-size: 12px;
+    font-family: Consolas, Lucida Console, monospace;
+}
+
+body.platform-linux .monospace, body.platform-linux .source-code {
+    font-size: 11px;
+    font-family: dejavu sans mono, monospace;
+}
+
 #console-messages {
     position: absolute;
     z-index: 0;
     top: 0;
     left: 0;
     right: 0;
     bottom: 23px;
-    font-size: initial;
-    font-family: monospace;
     padding: 2px 0;
     overflow-y: overlay;
+    word-wrap: break-word;
     -webkit-user-select: text;
     -webkit-text-size-adjust: auto;
 }
 
 #console-prompt {
     position: relative;
     padding: 1px 22px 1px 24px;
     min-height: 16px; 
     white-space: pre-wrap;
     -webkit-user-modify: read-write-plaintext-only;
@@ skipping 38 matching lines @@
     display: inline-block;
     height: 14px;
     background-color: rgb(128, 151, 189);
     vertical-align: middle;
     white-space: nowrap;
     padding: 1px 4px;
     margin-top: -2px;
     margin-right: 4px;
     text-align: left;
     font-size: 11px;
+    line-height: normal;
     font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
     text-shadow: none;
     color: white;
     -webkit-border-radius: 7px;
 }
 
 .console-message-text {
     white-space: pre-wrap;
 }
@@ skipping 114 matching lines @@
 .console-group-messages .outline-disclosure {
     padding-left: 0;
 }
 
 .console-group-messages .outline-disclosure > ol {
     padding: 0 0 0 12px !important;
 }
 
 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
     font-size: inherit;
-    line-height: 1em;
+    line-height: 12px;
 }
 
 .console-group-messages .outline-disclosure.single-node li {
     padding-left: 2px;
 }
 
 .console-group-messages .outline-disclosure li .selection {
     margin-left: -6px;
     margin-right: -6px;
 }
 
 .console-group-messages .add-attribute {
     display: none;
 }
 
 .console-formatted-object, .console-formatted-node {
     position: relative;
     display: inline-block;
     vertical-align: top;
 }
 
 .console-formatted-object .section, .console-formatted-node .section {
     position: static;
 }
 
 .console-formatted-object .properties, .console-formatted-node .properties {
     padding-left: 0 !important;
 }
 
+.console-formatted-number {
+    color: rgb(28, 0, 207);
+}
+
+.console-formatted-string, .console-formatted-regexp {
+    color: rgb(196, 26, 22);
+}
+
+.console-formatted-null, .console-formatted-undefined {
+    color: rgb(128, 128, 128);
+}
+
 .error-message {
     color: red;
 }
 
 .auto-complete-text {
     color: rgb(128, 128, 128);
     -webkit-user-select: none;
     -webkit-user-modify: read-only;
 }
 
 .panel {
     display: none;
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 
 .panel.visible {
     display: block;
 }
 
 .resource-view {
     display: none;
-    overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    overflow: hidden;
 }
 
 .resource-view.visible {
     display: block;
 }
 
-.resource-view.headers-visible {
-    overflow-y: auto;
-    overflow-x: hidden;
+.resource-view .scope-bar {
+    display: none;
+    position: absolute;
+    height: 20px;
+    top: 0;
+    left: 0;
+    right: 0;
+    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);
+}
+
+.resource-view.headers-visible .scope-bar {
+    display: block;
+}
+
+.resource-view .scope-bar li {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .resource-view-headers {
-    display: none;
     padding: 6px;
-    border-bottom: 1px solid rgb(64%, 64%, 64%);
-    background-color: white;
-    -webkit-user-select: text;
+    -webkit-user-select: text;    
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+
+.resource-view.headers-visible .resource-view-headers {
+    top: 20px;
 }
 
 .resource-view-headers .outline-disclosure .parent {
     -webkit-user-select: none;
     font-weight: bold;
 }
 
-.resource-view.headers-visible .resource-view-headers {
-    display: block;
-}
-
 .resource-view-headers .outline-disclosure .children li {
     white-space: nowrap;
 }
 
 .resource-view-headers .outline-disclosure li.expanded .header-count {
     display: none;
 }
 
 .resource-view-headers .outline-disclosure .header-name {
     color: rgb(33%, 33%, 33%);
     display: inline-block;
-    width: 105px;
-    text-align: right;
     margin-right: 0.5em;
     font-weight: bold;
     vertical-align: top;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: pre-wrap;
 }
 
 .resource-view-headers .outline-disclosure .header-value {
-    display: inline-block;
-    white-space: normal;
-    word-break: break-word;
-    vertical-align: top;
+    display: inline;
     margin-right: 100px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 1px;
 }
 
 .resource-view-headers .outline-disclosure .raw-form-data {
     white-space:pre-wrap;
 }
 
 .resource-view .resource-view-content {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
 }
 
 .resource-view.headers-visible .resource-view-content {
-    position: relative;
-    top: auto;
-    right: auto;
-    left: auto;
-    bottom: auto;
-}
-
-.resource-view.headers-visible .source-view-frame {
-    height: auto;
-    vertical-align: top;
+    top: 20px;
 }
 
 .webkit-line-gutter-backdrop {
     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
     width: 31px;
     background-color: rgb(240, 240, 240);
     border-right: 1px solid rgb(187, 187, 187);
     position: absolute;
     z-index: -1;
     left: 0;
@@ skipping 27 matching lines @@
     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
     -webkit-user-select: text;
     -webkit-user-drag: auto;
 }
 
 .resource-url {
     vertical-align: middle;
 }
 
 .resource-status-image {
+    margin-top: -3px;
     vertical-align: middle;
 }
 
 .resource-view.image .title {
     text-align: center;
     font-size: 13px;
 }
 
 .resource-view.image .infoList {
     margin: 0;
@@ skipping 148 matching lines @@
     right: 0;
     height: 15px;
     z-index: -1;
 }
 
 .outline-disclosure li.selected .selection {
     display: block;
     background-color: rgb(212, 212, 212);
 }
 
-:focus .outline-disclosure li.selected .selection {
+.outline-disclosure ol:focus li.selected .selection {
     background-color: rgb(56, 121, 217);
 }
 
+.outline-disclosure {
+    font-size: 11px;
+}
+
 .outline-disclosure > ol {
     position: relative;
     padding: 2px 6px !important;
     margin: 0;
     color: black;
     cursor: default;
     min-width: 100%;
 }
 
 .outline-disclosure, .outline-disclosure ol {
     list-style-type: none;
-    font-size: 11px;
     -webkit-padding-start: 12px;
     margin: 0;
 }
 
+.source-code {
+    font-family: monospace;
+    font-size: 10px;
+    white-space: pre-wrap;
+}
+
 .outline-disclosure li {
-    padding: 0 0 2px 14px;
+    padding: 0 0 0 14px;
     margin-top: 1px;
     margin-bottom: 1px;
     word-wrap: break-word;
-    text-indent: -2px
+    text-indent: -2px;
 }
 
-:focus .outline-disclosure li.selected {
+.resources .outline-disclosure li {
+    text-indent: -1px;
+}
+
+.outline-disclosure ol:focus li.selected {
     color: white;
 }
 
-:focus .outline-disclosure li.selected * {
+.outline-disclosure ol:focus li.selected * {
     color: inherit;
 }
 
 .outline-disclosure li.parent {
     text-indent: -12px
 }
 
 .outline-disclosure li .webkit-html-tag.close {
     margin-left: -12px;
 }
 
 .outline-disclosure li.parent::before {
     content: url(Images/treeRightTriangleBlack.png);
     float: left;
     width: 8px;
     height: 8px;
     margin-top: 1px;
     padding-right: 2px;
 }
 
 .outline-disclosure li.parent::before {
     content: url(Images/treeRightTriangleBlack.png);
 }
 
-:focus .outline-disclosure li.parent.selected::before {
+.outline-disclosure ol:focus li.parent.selected::before {
     content: url(Images/treeRightTriangleWhite.png);
 }
 
 .outline-disclosure li.parent.expanded::before {
     content: url(Images/treeDownTriangleBlack.png);
 }
 
-:focus .outline-disclosure li.parent.expanded.selected::before {
+.outline-disclosure ol:focus li.parent.expanded.selected::before {
     content: url(Images/treeDownTriangleWhite.png);
 }
 
 .outline-disclosure ol.children {
     display: none;
 }
 
 .outline-disclosure ol.children.expanded {
     display: block;
 }
 
-.webkit-html-comment {
-    /* Keep this in sync with view-source.css (.webkit-html-comment) */
-    color: rgb(35, 110, 37);
-}
-
-.webkit-html-tag {
-    /* Keep this in sync with view-source.css (.webkit-html-tag) */
-    color: rgb(136, 18, 128);
-}
-
-.webkit-html-doctype {
-    /* Keep this in sync with view-source.css (.webkit-html-doctype) */
-    color: rgb(192, 192, 192);
-}
-
-.webkit-html-attribute-name {
-    /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
-    color: rgb(153, 69, 0);
-}
-
-.webkit-html-attribute-value {
-    /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
-    color: rgb(26, 26, 166);
-}
-
-.webkit-html-external-link, .webkit-html-resource-link {
-    /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
-    color: #00e;
-}
-
-.webkit-html-external-link {
-    /* Keep this in sync with view-source.css (.webkit-html-external-link) */
-    text-decoration: none;
-}
-
-.webkit-html-external-link:hover {
-    /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
-    text-decoration: underline;
-}
-
 .add-attribute {
     margin-left: 1px;
     margin-right: 1px;
     white-space: nowrap;
 }
 
 .placard {
     position: relative;
     margin-top: 1px;
     padding: 3px 8px 4px 18px;
@@ skipping 144 matching lines @@
 
 .section .header .subtitle a {
     color: inherit;
 }
 
 .section .properties, .event-bar .event-properties {
     display: none;
     margin: 0;
     padding: 2px 6px 3px;
     list-style: none;
-    background-color: white;
     min-height: 18px;
 }
 
 .section.no-affect .properties li {
     opacity: 0.5;
 }
 
 .section.no-affect .properties li.editing {
     opacity: 1.0;
 }
@@ skipping 125 matching lines @@
     margin-bottom: -1px;
     padding-bottom: 1px;
     opacity: 1.0 !important;
 }
 
 .editing, .editing * {
     color: black !important;
     text-decoration: none !important;
 }
 
+.elements-tree-editor {
+    -webkit-user-select: text;
+    -webkit-user-modify: read-write-plaintext-only;
+}
+
 .section .properties li.editing {
     margin-left: 10px;
     text-overflow: clip;
 }
 
 li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-button {
     display: none !important;
 }
 
 .watch-expressions > li.editing-sub-part .name {
@@ skipping 58 matching lines @@
 }
 
 .section .properties .name, .event-properties .name {
     color: rgb(136, 19, 145);
 }
 
 .section .properties .value.dimmed {
     color: rgb(100, 100, 100);
 }
 
+.section .properties .value.error {
+    color: red;
+}
+
 .section .properties .number, .event-properties .number {
     color: blue;
 }
 
 .section .properties .priority {
     color: rgb(128, 0, 0);
 }
 
 .section .properties .keyword, .event-properties .keyword {
     color: rgb(136, 19, 79);
@@ skipping 209 matching lines @@
     display: inline-block;
 }
 
 .metrics .bottom {
     display: inline-block;
 }
 
 .sidebar {
     position: absolute;
     top: 0;
-    min-height: 100%;
+    bottom: 0;
     left: 0;
     width: 200px;
     overflow-y: auto;
     overflow-x: hidden;
     background-color: rgb(214, 221, 229);
     border-right: 1px solid rgb(64%, 64%, 64%);
 }
 
 body.inactive .sidebar {
     background-color: rgb(232, 232, 232);
@@ skipping 272 matching lines @@
 .data-grid-resizer {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 5px;
     z-index: 500;
     cursor: col-resize;
 }
 
 .storage-view.query {
-    font-size: initial;
-    font-family: monospace;
     padding: 2px 0;
     overflow-y: overlay;
     overflow-x: hidden;
     -webkit-text-size-adjust: auto;
 }
 
 .database-query-prompt {
     position: relative;
     padding: 1px 22px 1px 24px;
     min-height: 16px; 
@@ skipping 93 matching lines @@
     font-size: 10px;
     color: rgb(110, 116, 128);
     margin-bottom: 12px;
     margin-left: 20px;
 }
 
 .panel-enabler-disclaimer:empty {
     display: none;
 }
 
-.panel-enabler-view img {
+.panel-enabler-view img, div.welcome-instructions-aligner {
     height: 100%;
     min-height: 200px;
     max-width: 100%;
     top: 0;
     bottom: 0;
     padding: 20px 0 20px 20px;
     margin: auto;
     vertical-align: middle;
 }
 
@@ skipping 12 matching lines @@
 }
 
 .panel-enabler-view label {
     position: relative;
     display: block;
     text-align: left;
     word-break: break-word;
     margin: 0 0 5px 20px;
 }
 
-.panel-enabler-view button, .pane button {
+.panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
     color: rgb(6, 6, 6);
     background-color: transparent;
     border: 1px solid rgb(165, 165, 165);
     background-color: rgb(237, 237, 237);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
     -webkit-border-radius: 12px;
     -webkit-appearance: none;
 }
 
-.panel-enabler-view button {
+.panel-enabler-view button:not(.status-bar-item) {
     font-size: 13px;
     margin: 6px 0 0 0;
     padding: 3px 20px;
     height: 24px;
 }
 
+button.show-all-nodes {
+    font-size: 13px;
+    margin: 0;
+    padding: 0 20px;
+    height: 20px;
+}
+
+.panel-enabler-view.welcome {
+    z-index: auto;
+}
+
+.panel-enabler-view.welcome div.welcome-instructions-aligner {
+    display: inline-block;
+    width: 0;
+}
+
+.panel-enabler-view.welcome .instructions {
+    display: inline-block;
+    vertical-align: middle;
+    width: 330px;
+    margin: 0;
+    white-space: normal;
+    line-height: 175%;
+}
+
+.panel-enabler-view.welcome .message {
+    margin-bottom: 2ex;
+}
+
+.panel-enabler-view.welcome button.status-bar-item {
+    vertical-align: middle;
+}
+
 .pane button {
     margin: 6px 0 6px 3px;
     padding: 2px 9px;
 }
 
-.panel-enabler-view button:active, .pane button:active {
+.panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
     background-color: rgb(215, 215, 215);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
 }
 
-body.inactive .panel-enabler-view button, .panel-enabler-view button:disabled, body.inactive .pane button, .pane button:disabled {
+body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
     color: rgb(130, 130, 130);
     border-color: rgb(212, 212, 212);
     background-color: rgb(239, 239, 239);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
 }
 
 .panel-enabler-view input {
     height: 17px;
     width: 17px;
     border: 1px solid rgb(165, 165, 165);
@@ skipping 78 matching lines @@
 }
 
 #scripts-step-into img {
     content: url(Images/debuggerStepInto.png);
 }
 
 #scripts-step-out img {
     content: url(Images/debuggerStepOut.png);
 }
 
+.toggle-breakpoints .glyph {
+    -webkit-mask-image: url(Images/breakpointsActivateButtonGlyph.png);
+    background-color: rgb(96, 96, 96) !important;
+}
+
+.toggle-breakpoints.toggled-on .glyph {
+    -webkit-mask-image: url(Images/breakpointsDeactivateButtonGlyph.png);
+}
+
 #scripts-debugger-status {
     position: absolute;
     line-height: 24px;
     top: 0;
     right: 8px;
 }
 
 #scripts-sidebar-resizer-widget {
     position: absolute;
     top: 0;
@@ skipping 11 matching lines @@
     right: 0;
     top: 0;
     bottom: 0;
     width: 225px;
     overflow: hidden;
     border-left: 1px solid rgb(64%, 64%, 64%);
 }
 
 #script-resource-views {
     display: block;
-    overflow: auto;
     padding: 0;
     position: absolute;
     top: 23px;
     left: 0;
     right: 225px;
     bottom: 0;
 }
 
 .script-view {
     display: none;
@@ skipping 18 matching lines @@
     background-color: rgb(245, 245, 245);
     border-left: 1px solid rgb(64%, 64%, 64%);
     cursor: default;
     overflow: auto;
 }
 
 .resources-larger-resources-status-bar-item .glyph {
     -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
 }
 
-#resources-filter {
+#resources-filter, #console-filter.console-filter-top {
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
     border-bottom: 1px solid rgb(64%, 64%, 64%);
+    width: 100%;
+}
+
+#console-messages.console-filter-top {
+    margin-top: 23px;
 }
 
 #console-filter {
     margin-top: 1px;
 }
 
 .scope-bar {
     height: 23px;
     padding: 2px 10px 0;
     overflow: hidden;
@@ skipping 240 matching lines @@
 }
 
 .resources-graph-label:empty {
     display: none;
 }
 
 .resources-graph-label.waiting {
     margin-right: 5px;
 }
 
+.resources-graph-label.waiting-right {
+    margin-left: 5px;
+}
+
 .resources-graph-label.before {
     color: rgba(0, 0, 0, 0.7);
     text-shadow: none;
     text-align: right;
     margin-right: 2px;
 }
 
 .resources-graph-label.before::after {
     padding-left: 2px;
     height: 6px;
@@ skipping 48 matching lines @@
 .filter-all .console-warning-level, .filter-warnings .console-warning-level,
 .filter-all .console-error-level, .filter-errors .console-error-level,
 .filter-all .console-log-level, .filter-logs .console-log-level {
     display: block;
 }
 
 .console-user-command-result {
     display: block;
 }
 
-.resources-graph-bar.waiting {
+.resources-graph-bar.waiting, .resources-graph-bar.waiting-right {
     opacity: 0.35;
 }
 
 .resource-cached .resources-graph-bar {
     -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
 }
 
 .resources-category-documents .resources-graph-bar {
     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
 }
@@ skipping 35 matching lines @@
 }
 
 .resources-category-xhr .resources-graph-bar {
     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
 }
 
 .resources-category-xhr.resource-cached .resources-graph-bar {
     -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
 }
 
-.tip-button {
-    background-image: url(Images/tipIcon.png);
-    border: none;
-    width: 16px;
-    height: 16px;
-    float: right;
-    background-color: transparent;
-    margin-top: 1px;
-}
-
-.tip-button:active {
-    background-image: url(Images/tipIconPressed.png);
-}
-
-.tip-balloon {
-    position: absolute;
-    left: 145px;
-    top: -5px;
-    z-index: 1000;
-    border-width: 51px 15px 18px 37px;
-    -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
-    width: 265px;
-}
-
-.tip-balloon.bottom {
-    position: absolute;
-    left: 145px;
-    top: auto;
-    bottom: -7px;
-    z-index: 1000;
-    border-width: 18px 15px 51px 37px;
-    -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
-}
-
-.tip-balloon-content {
-    margin-top: -40px;
-    margin-bottom: -2px;
-    margin-left: 2px;
-}
-
-.tip-balloon.bottom .tip-balloon-content {
-    margin-top: -10px;
-    margin-bottom: -35px;
-}
-
 #resource-views {
     position: absolute;
     top: 23px;
     right: 0;
     left: 200px;
     bottom: 0;
 }
 
 .source-view-frame {
     width: 100%;
     height: 100%;
 }
 
 .sidebar-resizer-vertical {
     position: absolute;
     top: 0;
-    min-height: 100%;
+    bottom: 0;
     width: 5px;
     z-index: 500;
     cursor: col-resize;
 }
 
 .resources .sidebar-resizer-vertical {
     top: 23px;
 }
 
 .sidebar-tree, .sidebar-tree .children {
@@ skipping 133 matching lines @@
     display: inline-block;
     height: 14px;
     min-width: 16px;
     margin-top: 1px;
     background-color: rgb(128, 151, 189);
     vertical-align: middle;
     white-space: nowrap;
     padding: 1px 4px;
     text-align: center;
     font-size: 11px;
+    line-height: normal;
     font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
     text-shadow: none;
     color: white;
     -webkit-border-radius: 7px;
 }
 
 .sidebar-tree-item .status .bubble:empty {
     display: none;
 }
@@ skipping 243 matching lines @@
 /* Timeline Style */
 
 #timeline-overview-panel {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 80px;
 }
 
+#timeline-overview-panel .timeline-graph-bar {
+    pointer-events: none;
+}
+
 .timeline-sidebar-background {
     top: 90px;
     bottom: 0;
 }
 
 .timeline .sidebar {
     overflow-y: hidden;
     z-index: 100;
+    min-height: 100%;
+    bottom: auto;
 }
 
 #timeline-overview-separator {
     position: absolute;
     top: 80px;
     left: 0;
     right: 0;
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
     border-top: 1px solid rgb(140, 140, 140);
     border-bottom: 1px solid rgb(115, 115, 115);
@@ skipping 223 matching lines @@
 .timeline-graph-bar {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto -2px;
     border-width: 4px 4px 5px;
     height: 9px;
     min-width: 5px;
     opacity: 0.8;
     -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
-    pointer-events: none;
+    z-index: 180;
+    pointer-events: visibleFill;
 }
 
 .timeline-graph-side.even {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
 .timeline-category-loading .timeline-graph-bar {
     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
 }
 
@@ skipping 179 matching lines @@
     -webkit-padding-start: 2px;
     list-style: none;
     margin: 0;
 }
 
 .breakpoint-list li {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     margin: 4px 0;
+    color: rgb(33%, 33%, 33%);
+    cursor: pointer;
+}
+
+.breakpoint-list li:hover {
+    color: rgb(15%, 15%, 15%);
 }
 
 .breakpoint-list .checkbox-elem {
     font-size: 10px;
     margin: 0 4px;
     vertical-align: top;
     position: relative;
     z-index: 1;
 }
 
 .breakpoint-list .source-text {
-    font-family: monospace;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     margin: 2px 0 0px 20px;
 }
 
-.breakpoint-list a {
-    color: rgb(33%, 33%, 33%);
-    cursor: pointer;
-}
-
-.breakpoint-list a:hover {
-    color: rgb(15%, 15%, 15%);
-}
-
 .webkit-html-js-node, .webkit-html-css-node {
     white-space: pre;
 }
+
+.source-frame-breakpoint-condition {
+    z-index: 30;
+    padding: 4px;
+    background-color: rgb(203, 226, 255);
+    -webkit-border-radius: 7px;
+    border: 2px solid rgb(169, 172, 203); 
+    width: 90%; 
+}
+
+.source-frame-breakpoint-message {
+    background-color: transparent;
+    font-family: Lucida Grande, sans-serif; 
+    font-weight: normal;
+    font-size: 11px;
+    text-align: left;
+    text-shadow: none;
+    color: rgb(85, 85, 85);
+    cursor: default;
+    margin: 0 0 2px 0; 
+}
+
+#source-frame-breakpoint-condition {
+    margin: 0;
+    border: 1px inset rgb(190, 190, 190) !important;
+    width: 100%;
+    box-shadow: none !important;
+    outline: none !important;
+    -webkit-user-modify: read-write;
+}
+
+.source-frame-popover-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-weight: bold;
+    padding-left: 18px;
+}
+
+.source-frame-popover-tree {
+    border-top: 1px solid rgb(194, 194, 147);
+    overflow: auto;
+    position: absolute;
+    top: 15px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.source-frame-eval-expression {
+    border: 1px solid rgb(163, 41, 34);
+    margin: -1px;
+    background-color: rgb(255, 255, 194);
+}
+
+.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 {
+    font-weight: bold;
+    white-space: nowrap;
+}
+