Reviewed by Tim Hatcher.
[WebKit-https.git] / WebCore / page / inspector / inspector.css
index 53c2ec2..76b2fbe 100644 (file)
@@ -33,6 +33,7 @@ body {
     overflow: hidden;
     font-family: Lucida Grande, sans-serif;
     margin: 0;
+    -webkit-text-size-adjust: none;
 }
 
 iframe, a img {
@@ -110,6 +111,37 @@ body.inactive #toolbar button, body.inactive #toolbar button:disabled:active {
     -webkit-border-image: url(Images/toolbarButtonInactive.png) 3 3 4 3;
 }
 
+#toolbar select, #toolbar select:disabled:active {
+    background-color: transparent;
+    border-width: 3px 12px 4px 3px;
+    border-color: transparent;
+    -webkit-border-image: url(Images/toolbarPopup.png) 3 12 4 3;
+    height: 19px;
+    font-size: 10px;
+    padding-left: 8px;
+    padding-right: 4px;
+    -webkit-box-sizing: border-box;
+    -webkit-border-radius: 0;
+    -webkit-appearance: none;
+    vertical-align: middle;
+}
+
+#toolbar select:focus {
+    outline: none;
+}
+
+#toolbar select:active, #toolbar select.selected {
+    -webkit-border-image: url(Images/toolbarPopupPressed.png) 3 12 4 3;
+}
+
+body.inactive #toolbar select:active, body.inactive #toolbar select.selected {
+    -webkit-border-image: url(Images/toolbarPopupPressedInactive.png) 3 12 4 3;
+}
+
+body.inactive #toolbar select, body.inactive #toolbar select:disabled:active {
+    -webkit-border-image: url(Images/toolbarPopupInactive.png) 3 12 4 3;
+}
+
 #toolbar .split-button-divider {
     width: 1px;
     height: 19px;
@@ -167,10 +199,11 @@ body.inactive #toolbar .split-button-divider {
     top: -1px;
     width: 8px;
     height: 7px;
+    opacity: 0.66;
 }
 
 .view-button-source.selected img {
-    content: url(Images/sourceViewButtonSelected.png);
+    opacity: 1;
 }
 
 .view-button-dom img {
@@ -180,10 +213,11 @@ body.inactive #toolbar .split-button-divider {
     left: 1px;
     width: 10px;
     height: 7px;
+    opacity: 0.66;
 }
 
 .view-button-dom.selected img {
-    content: url(Images/domViewButtonSelected.png);
+    opacity: 1;
 }
 
 #viewbuttons {
@@ -274,11 +308,20 @@ body.inactive #sidebar {
     height: 21px;
     border-top: 1px solid #bbb;
     -webkit-box-sizing: border-box;
-    background-image: url(Images/sidebarResizeWidget.png), url(Images/sidebarStatusAreaBackground.png);
+    background-image: url(Images/sidebarStatusAreaBackground.png);
     background-position: right, center;
     background-repeat: no-repeat, repeat-x;
 }
 
+#statusbar #sidebarResizeWidget {
+    display: block;
+    float: right;
+    width: 17px;
+    height: 20px;
+    background: url(Images/sidebarResizeWidget.png) right no-repeat;
+    cursor: col-resize;
+}
+
 #statusbar button {
     -webkit-apearance: none;
     vertical-align: top;
@@ -481,10 +524,28 @@ body.attached #attachToggle:active {
     background-position: center center;
 }
 
+#list .icon.database {
+    background-image: url(Images/database.png);
+}
+
 #list .icon.plain {
     background-image: url(Images/plainDocument.png);
 }
 
+#list .icon.font {
+    background-image: url(Images/plainDocument.png);
+}
+
+#list .icon.font .preview {
+    overflow: hidden;
+    text-align: center;
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: normal;
+    color: black;
+    text-shadow: none;
+}
+
 #list .icon .preview {
     margin: auto;
     display: block;
@@ -628,6 +689,26 @@ body.inactive #sidebar li.selected {
     background-color: transparent !important;
 }
 
+.content.font {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-size: 60px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    text-align: center;
+}
+
+.content.font .preview {
+    position: absolute;
+    margin-top: auto;
+    margin-bottom: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 .content.image {
     position: relative;
     width: 100%;
@@ -871,7 +952,7 @@ body.inactive #sidebar li.selected {
     text-indent: -12px
 }
 
-.content.tree li .tag.close {
+.content.tree li .webkit-html-tag.close {
     margin-left: -12px;
 }
 
@@ -896,31 +977,38 @@ body.inactive #sidebar li.selected {
     display: block;
 }
 
-.content.tree li .comment, body.inactive .content.tree li .comment {
-    color: rgb(0, 116, 0);
+.webkit-html-comment {
+    /* Keep this in sync with view-source.css (.webkit-html-comment) */
+    color: rgb(35, 110, 37);
 }
 
-.content.tree li .tag, body.inactive .content.tree li .tag {
-    color: rgb(170, 13, 145);
+.webkit-html-tag {
+    /* Keep this in sync with view-source.css (.webkit-html-tag) */
+    color: rgb(136, 18, 128);
 }
 
-.content.tree li .attr, body.inactive .content.tree li .attr {
-    color: rgb(131, 108, 40);
+.webkit-html-attribute-name {
+    /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+    color: rgb(153, 69, 0);
 }
 
-.content.tree li .value, body.inactive .content.tree li .value {
-    color: rgb(196, 26, 22);
+.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 {
+.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;
 }
 
@@ -962,6 +1050,23 @@ body.inactive #sidebar li.selected {
     word-wrap: break-word;
 }
 
+.section .header label {
+    display: none;
+}
+
+.section.expanded .header label {
+    display: inline;
+}
+
+.section .header input[type=checkbox] {
+    height: 1em;
+    width: 1em;
+    margin-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    vertical-align: top;
+}
+
 .section .header .subtitle {
     margin-top: 2px;
     font-size: 10px;
@@ -988,6 +1093,7 @@ body.inactive #sidebar li.selected {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    -webkit-user-select: text;
 }
 
 .section .properties li.parent {
@@ -1032,6 +1138,15 @@ body.inactive #sidebar li.selected {
     opacity: 0.5;
 }
 
+.section .properties .inherited {
+    display: none;
+    opacity: 0.5;
+}
+
+.section.show-inherited .properties .inherited {
+    display: inline;
+}
+
 .section .properties .name {
     color: rgb(136, 19, 145);
 }
@@ -1236,7 +1351,7 @@ body.inactive #sidebar li.selected {
 
 .console-message-message {
     font-size: 11px;
-    whitespace: pre-wrap;
+    white-space: pre-wrap;
     margin-left: 22px;
 }
 
@@ -1253,23 +1368,23 @@ body.inactive #sidebar li.selected {
 }
 
 .console-error-level::before {
-       content: url(Images/errorMediumIcon.png);
-       position: absolute;
-       left: 4px;
-       top: 3px;
+    content: url(Images/errorMediumIcon.png);
+    position: absolute;
+    left: 4px;
+    top: 3px;
 }
 
 .console-warning-level::before {
-       content: url(Images/warningMediumIcon.png);
-       position: absolute;
-       left: 4px;
-       top: 3px;
+    content: url(Images/warningMediumIcon.png);
+    position: absolute;
+    left: 4px;
+    top: 3px;
 }
 
 .console-command-input, .console-command-output {
     font-size: 11px;
     margin-left: 22px;
-    whitespace: pre-wrap;
+    white-space: pre-wrap;
 }
 
 .console-command-input::before {
@@ -1277,9 +1392,225 @@ body.inactive #sidebar li.selected {
     font-weight: bold;
     font-size: 15px;
     color: blue;
-       position: absolute;
-       left: 7px;
-       top: 1px;
+    position: absolute;
+    left: 7px;
+    top: 1px;
+}
+
+.view-button-browse img {
+    content: url(Images/databaseBrowserViewButton.png);
+    position: relative;
+    top: -1px;
+    left: 1px;
+    width: 11px;
+    height: 7px;
+    opacity: 0.66;
+}
+
+.view-button-browse.selected img {
+    opacity: 1;
+}
+
+.view-button-query img {
+    content: url(Images/databaseQueryViewButton.png);
+    position: relative;
+    top: -1px;
+    left: 0px;
+    width: 10px;
+    height: 7px;
+    opacity: 0.66;
+}
+
+.view-button-query.selected img {
+    opacity: 1;
+}
+
+.database-table-reload {
+    padding-left: 0;
+    padding-right: 0;
+    width: 20px;
+    margin-left: 6px;
+}
+
+.database-table-reload img {
+    content: url(Images/reload.png);
+    position: relative;
+    top: -2px;
+    left: 0px;
+    width: 10px;
+    height: 11px;
+    opacity: 0.7;
+}
+
+.database-query.content {
+    bottom: 21px;
+}
+
+.database-browse.content {
+    font-size: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    bottom: 21px;
+}
+
+.database-browse.content .database-result-table {
+    border: none;
+}
+
+.database-browse.content .database-table-empty {
+    position: absolute;
+    top: 0;
+    bottom: 25%;
+    left: 0;
+    right: 0;
+    font-size: 24px;
+    color: rgb(75%, 75%, 75%);
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 50px;
+    line-height: 26px;
+    text-align: center;
+    font-weight: bold;
+    padding: 10px;
+}
+
+.database-browse.content .database-table-error {
+    position: absolute;
+    top: 0;
+    bottom: 25%;
+    left: 0;
+    right: 0;
+    font-size: 24px;
+    color: rgb(66%, 33%, 33%);
+    margin-top: auto;
+    margin-bottom: auto;
+    height: 50px;
+    line-height: 26px;
+    text-align: center;
+    padding: 10px;
+}
+
+.database-browse-table {
+    height: 100%;
+}
+
+.database-result-table .database-result-filler-row {
+    height: auto;
+}
+
+.database-result-table .database-result-filler-row.alternate td {
+    background-position-y: 16px;
+}
+
+.database-result-filler-row td {
+    background-image: url(Images/alternateTableRows.png);
+}
+
+.database-table-select {
+    margin-left: 6px;
+    max-width: 150px;
+    min-width: 75px;
+}
+
+.database-command-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.database-prompt {
+    font-family: monospace;
+    font-size: 11px;
+    margin: 0;
+    padding: 2px 0 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 18px;
+    resize: none;
+    outline: none;
+    border: none;
+    border-top: 1px solid rgb(64%, 64%, 64%);
+}
+
+.database-command {
+    font-size: 10px;
+    margin: 0;
+    padding: 5px;
+    border-bottom: 1px solid rgb(75%, 75%, 75%);
+    word-break: break-word;
+    position: relative;
+}
+
+.database-command a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.database-command-query {
+    font-family: monospace;
+    font-size: 11px;
+    white-space: pre-wrap;
+}
+
+.database-command-result {
+    margin-top: 3px;
+}
+
+.database-command-result.error {
+    color: red;
+}
+
+.database-result-table {
+    border: 1px solid #aaa;
+    table-layout: fixed;
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+}
+
+.database-result-table th {
+    text-align: left;
+    background: url(Images/glossyHeader.png) repeat-x;
+    border-right: 1px solid #aaa;
+    height: 15px;
+    -webkit-box-sizing: border-box;
+    border-bottom: 1px solid #aaa;
+    font-weight: normal;
+    vertical-align: middle;
+    padding: 0 4px;
+    white-space: nowrap;
+}
+
+.database-result-table tr {
+    height: 16px;
+}
+
+.database-result-table tr.alternate {
+    background-color: rgb(236, 243, 254);
+}
+
+.database-result-table td {
+    vertical-align: top;
+    padding: 2px 4px;
+    -webkit-box-sizing: border-box;
+    white-space: nowrap;
+    border-right: 1px solid #aaa;
+}
+
+.database-result-table td > div, .database-result-table th > div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .network-timeline {
@@ -1347,6 +1678,7 @@ body.inactive #sidebar li.selected {
     background-repeat: repeat-x;
     background-position: top, bottom;
     overflow: hidden;
+    -webkit-user-select: text;
 }
 
 .network-info table {
@@ -1592,3 +1924,13 @@ body.inactive #sidebar li.selected {
     margin-top: -10px;
     margin-bottom: -35px;
 }
+
+.sidebarResizeArea {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 222px;
+    width: 5px;
+    z-index: 100;
+    cursor: col-resize;
+}