Fixes #13563 and #10356 Debug window styles are only downloaded and injected to the page if productionMode==false and ?debug parameter is present and not in ‘quiet’ mode Change-Id: I3ac588745f4702a1cc0473b95806877cbf7062adtags/7.3.0.alpha2
@@ -39,7 +39,6 @@ | |||
@import "upload/upload.scss"; | |||
@import "widget/widget.scss"; | |||
@import "window/window.scss"; | |||
@import "debug/debug.scss"; | |||
@import "browserframe/browserframe.scss"; | |||
.v-vaadin-version:after { | |||
@@ -119,5 +118,4 @@ $line-height: normal; | |||
} | |||
// always include, don't wrap in .themename{} | |||
@include debug-globals; | |||
@include fonts; |
@@ -1,307 +0,0 @@ | |||
/* | |||
* Debug console related styles. NOTE that these are global, and not really part | |||
* of a theme (the console is a sigleton). You can customize, but it will apply | |||
* globally, e.g in a portal environment. | |||
*/ | |||
@mixin debug-globals { | |||
.v-debug-console { | |||
background: #fff; | |||
opacity: .9; | |||
border: 1px solid #000; | |||
font-family: sans-serif; | |||
} | |||
.v-debug-console-caption { | |||
background: #000; | |||
border-bottom: 1px solid grey; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.v-debug-console-content { | |||
font-size: x-small; | |||
overflow: auto; | |||
white-space: pre; | |||
} | |||
.v-debug-console-content input { | |||
font-size: xx-small; | |||
} | |||
/* Debug style */ | |||
.v-app .invalidlayout, | |||
.v-app .invalidlayout * { | |||
background: #f99 !important; | |||
} | |||
/* NEW debug window */ | |||
$mainbg: #fff; | |||
$darkborder: #666; | |||
$lightborder: #999; | |||
$maincolor: #666; | |||
$activecolor: #000; | |||
@font-face { | |||
font-family: 'vdebugfont'; | |||
src:url('fonts/font.eot'); | |||
src:url('fonts/font.eot?#iefix') format('embedded-opentype'), | |||
url('fonts/font.woff') format('woff'), | |||
url('fonts/font.ttf') format('truetype'), | |||
url('fonts/font.svg#fontawesome') format('svg'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
.v-debugwindow [data-icon]:before, | |||
.v-debugwindow-menu [data-icon]:before { | |||
font-family: 'vdebugfont'; | |||
content: attr(data-icon); | |||
speak: none; | |||
font-weight: normal; | |||
font-variant: normal; | |||
text-transform: none; | |||
line-height: 1; | |||
-webkit-font-smoothing: antialiased; | |||
font-style: normal; | |||
vertical-align: text-bottom; | |||
} | |||
.v-debugwindow { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
-moz-opacity: 0.8; | |||
-webkit-opacity: 0.8; | |||
opacity: 0.8; | |||
color: $maincolor; | |||
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; | |||
font-size: 13px; | |||
.v-debugwindow-handle { | |||
position: absolute; | |||
bottom: 0; | |||
background-color: #fff; | |||
-moz-opacity: 0; | |||
-webkit-opacity: 0; | |||
opacity: 0; | |||
z-index: 1000; | |||
} | |||
.v-debugwindow-handle-sw { | |||
width: 7px; | |||
height: 7px; | |||
} | |||
.v-debugwindow-handle-se { | |||
right: 0; | |||
width: 14px; | |||
height: 14px; | |||
} | |||
} | |||
.v-debugwindow:hover { | |||
-moz-opacity: 1; | |||
-webkit-opacity: 1; | |||
opacity: 1; | |||
} | |||
.v-debugwindow * { | |||
font-size: inherit !important; | |||
} | |||
.v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { | |||
font-size: 10px; | |||
} | |||
.v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { | |||
font-size: 13px; | |||
} | |||
.v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { | |||
font-size: 16px; | |||
} | |||
.v-debugwindow-head { | |||
text-align: right; | |||
background-color: transparent; | |||
} | |||
.v-debugwindow-tabs { | |||
display: inline-block; | |||
background-color: $mainbg; | |||
} | |||
.v-debugwindow-tab, .v-debugwindow-controls > * { | |||
width: 2em; | |||
border: none; | |||
margin: 0; | |||
line-height: 1.5em; | |||
background-color: $mainbg; | |||
color: $maincolor; | |||
} | |||
.v-debugwindow-tab { | |||
position: relative; | |||
top: 1px; | |||
border-width: 1px 0 1px 1px; | |||
border-style: solid; | |||
border-color: $darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-tab-selected { | |||
color: $maincolor; | |||
background-color: $mainbg; | |||
border-bottom: 1px solid #fff; | |||
} | |||
.v-debugwindow-controls { | |||
position: relative; | |||
top: 1px; | |||
display: inline-block; | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-section-head { | |||
text-align: left; | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-bottom: 1px solid $lightborder; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
min-height: 1.5em; | |||
line-height: 1.5em; | |||
padding-left: 5px; | |||
} | |||
.v-debugwindow-button { | |||
border: none; | |||
background-color: transparent; | |||
color: $maincolor; | |||
} | |||
.v-debugwindow-button:hover { | |||
color: $activecolor; | |||
text-decoration: underline; | |||
} | |||
.v-debugwindow-button-active { | |||
color: $maincolor; | |||
box-shadow: 1px 1px 3px 0 inset; | |||
} | |||
.v-debugwindow-content { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-top: none; | |||
} | |||
.v-debugwindow-menu { | |||
background-color: $mainbg; | |||
padding: 4px; | |||
border: 1px solid $lightborder; | |||
border-top: none; | |||
border-radius: 0 0 5px 5px; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
} | |||
.v-debugwindow-menu-content { | |||
min-width: 100px; | |||
} | |||
.v-debugwindow-menu-content .v-debugwindow-button { | |||
line-height: 22px; | |||
} | |||
.v-debugwindow-menu-content > div > .v-debugwindow-button { | |||
width: 33%; | |||
} | |||
/* GLOBAL color every other row */ | |||
.v-debugwindow-row { | |||
display: table-row; | |||
} | |||
.v-debugwindow-row:nth-child(odd) { | |||
background-color: rgba(0, 61, 255, 0.11); | |||
} | |||
.v-debugwindow-row > span { | |||
display: table-cell; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-row.SEVERE { | |||
color: #550000; | |||
background-color: #FFC5C5; | |||
} | |||
.v-debugwindow-row.WARNING { | |||
background-color: #FFFF99; | |||
} | |||
.v-debugwindow-row.FINE { | |||
color: lighten($maincolor, 5%); | |||
} | |||
.v-debugwindow-row.FINER { | |||
color: lighten($maincolor, 10%); | |||
} | |||
.v-debugwindow-row.FINEST { | |||
color: lighten($maincolor, 15%); | |||
} | |||
.v-debugwindow-row > span.caption { | |||
color: #999; | |||
text-align: right; | |||
white-space: nowrap; | |||
} | |||
.v-debugwindow-row > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector :hover { | |||
background: rgba(255,32,32,0.5); | |||
} | |||
/* LOG */ | |||
.v-debugwindow-log { | |||
font-family: monospace; | |||
.v-debugwindow-reset { | |||
color: #fff; | |||
background-color: #4C92ED; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-time { | |||
text-align: right; | |||
color: #999; | |||
} | |||
.v-debugwindow-message { | |||
white-space: nowrap; | |||
width: 100% | |||
} | |||
.v-debugwindow-message:hover { | |||
white-space: normal; | |||
word-wrap: break-word; | |||
} | |||
.v-debugwindow-message em { | |||
background-color: #C4E6F8; | |||
} | |||
} | |||
/* HIERARCHY */ | |||
.v-debugwindow-hierarchy { | |||
.v-debugwindow-info { | |||
padding: 1em; | |||
} | |||
} | |||
/* NETWORK */ | |||
.v-debugwindow-network { | |||
.v-debugwindow-row { | |||
display: block !important; | |||
} | |||
.v-debugwindow-row > span { | |||
display: inline; | |||
} | |||
} | |||
} |
@@ -1,306 +0,0 @@ | |||
// TODO remove this file when debug window styles come directly from GWT module | |||
$v-include-debug-styles: true !default; | |||
@if $v-include-debug-styles { | |||
.v-debug-console { | |||
background: #fff; | |||
opacity: .9; | |||
border: 1px solid #000; | |||
font-family: sans-serif; | |||
} | |||
.v-debug-console-caption { | |||
background: #000; | |||
border-bottom: 1px solid grey; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.v-debug-console-content { | |||
font-size: x-small; | |||
overflow: auto; | |||
white-space: pre; | |||
} | |||
.v-debug-console-content input { | |||
font-size: xx-small; | |||
} | |||
// Debug style | |||
.v-app .invalidlayout, | |||
.v-app .invalidlayout * { | |||
background: #f99 !important; | |||
} | |||
// NEW debug window | |||
$mainbg: #fff; | |||
$darkborder: #666; | |||
$lightborder: #999; | |||
$maincolor: #666; | |||
$activecolor: #000; | |||
@font-face { | |||
font-family: 'vdebugfont'; | |||
src:url('fonts/font.eot'); | |||
src:url('fonts/font.eot?#iefix') format('embedded-opentype'), | |||
url('fonts/font.woff') format('woff'), | |||
url('fonts/font.ttf') format('truetype'), | |||
url('fonts/font.svg#fontawesome') format('svg'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
.v-debugwindow [data-icon]:before, | |||
.v-debugwindow-menu [data-icon]:before { | |||
font-family: 'vdebugfont'; | |||
content: attr(data-icon); | |||
speak: none; | |||
font-weight: normal; | |||
font-variant: normal; | |||
text-transform: none; | |||
line-height: 1; | |||
-webkit-font-smoothing: antialiased; | |||
font-style: normal; | |||
vertical-align: text-bottom; | |||
} | |||
.v-debugwindow { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
-moz-opacity: 0.8; | |||
-webkit-opacity: 0.8; | |||
opacity: 0.8; | |||
color: $maincolor; | |||
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; | |||
font-size: 13px; | |||
.v-debugwindow-handle { | |||
position: absolute; | |||
bottom: 0; | |||
background-color: #fff; | |||
-moz-opacity: 0; | |||
-webkit-opacity: 0; | |||
opacity: 0; | |||
z-index: 1000; | |||
} | |||
.v-debugwindow-handle-sw { | |||
width: 7px; | |||
height: 7px; | |||
} | |||
.v-debugwindow-handle-se { | |||
right: 0; | |||
width: 14px; | |||
height: 14px; | |||
} | |||
} | |||
.v-debugwindow:hover { | |||
-moz-opacity: 1; | |||
-webkit-opacity: 1; | |||
opacity: 1; | |||
} | |||
.v-debugwindow * { | |||
font-size: inherit !important; | |||
} | |||
.v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { | |||
font-size: 10px; | |||
} | |||
.v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { | |||
font-size: 13px; | |||
} | |||
.v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { | |||
font-size: 16px; | |||
} | |||
.v-debugwindow-head { | |||
text-align: right; | |||
background-color: transparent; | |||
} | |||
.v-debugwindow-tabs { | |||
display: inline-block; | |||
background-color: $mainbg; | |||
} | |||
.v-debugwindow-tab, .v-debugwindow-controls > * { | |||
width: 2em; | |||
border: none; | |||
margin: 0; | |||
line-height: 1.5em; | |||
background-color: $mainbg; | |||
color: $maincolor; | |||
} | |||
.v-debugwindow-tab { | |||
position: relative; | |||
top: 1px; | |||
border-width: 1px 0 1px 1px; | |||
border-style: solid; | |||
border-color: $darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-tab-selected { | |||
color: $maincolor; | |||
background-color: $mainbg; | |||
border-bottom: 1px solid #fff; | |||
} | |||
.v-debugwindow-controls { | |||
position: relative; | |||
top: 1px; | |||
display: inline-block; | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-section-head { | |||
text-align: left; | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-bottom: 1px solid $lightborder; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
min-height: 1.5em; | |||
line-height: 1.5em; | |||
padding-left: 5px; | |||
} | |||
.v-debugwindow-button { | |||
border: none; | |||
background-color: transparent; | |||
color: $maincolor; | |||
} | |||
.v-debugwindow-button:hover { | |||
color: $activecolor; | |||
text-decoration: underline; | |||
} | |||
.v-debugwindow-button-active { | |||
color: $maincolor; | |||
box-shadow: 1px 1px 3px 0 inset; | |||
} | |||
.v-debugwindow-content { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
background-color: $mainbg; | |||
border: 1px solid $darkborder; | |||
border-top: none; | |||
} | |||
.v-debugwindow-menu { | |||
background-color: $mainbg; | |||
padding: 4px; | |||
border: 1px solid $lightborder; | |||
border-top: none; | |||
border-radius: 0 0 5px 5px; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
} | |||
.v-debugwindow-menu-content { | |||
min-width: 100px; | |||
} | |||
.v-debugwindow-menu-content .v-debugwindow-button { | |||
line-height: 22px; | |||
} | |||
.v-debugwindow-menu-content > div > .v-debugwindow-button { | |||
width: 33%; | |||
} | |||
// GLOBAL color every other row | |||
.v-debugwindow-row { | |||
display: table-row; | |||
} | |||
.v-debugwindow-row:nth-child(odd) { | |||
background-color: rgba(0, 61, 255, 0.11); | |||
} | |||
.v-debugwindow-row > span { | |||
display: table-cell; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-row.SEVERE { | |||
color: #550000; | |||
background-color: #FFC5C5; | |||
} | |||
.v-debugwindow-row.WARNING { | |||
background-color: #FFFF99; | |||
} | |||
.v-debugwindow-row.FINE { | |||
color: lighten($maincolor, 5%); | |||
} | |||
.v-debugwindow-row.FINER { | |||
color: lighten($maincolor, 10%); | |||
} | |||
.v-debugwindow-row.FINEST { | |||
color: lighten($maincolor, 15%); | |||
} | |||
.v-debugwindow-row > span.caption { | |||
color: #999; | |||
text-align: right; | |||
white-space: nowrap; | |||
} | |||
.v-debugwindow-row > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector :hover { | |||
background: rgba(255,32,32,0.5); | |||
} | |||
// LOG | |||
.v-debugwindow-log { | |||
font-family: monospace; | |||
.v-debugwindow-reset { | |||
color: #fff; | |||
background-color: #4C92ED; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-time { | |||
text-align: right; | |||
color: #999; | |||
} | |||
.v-debugwindow-message { | |||
white-space: nowrap; | |||
width: 100% | |||
} | |||
.v-debugwindow-message:hover { | |||
white-space: normal; | |||
word-wrap: break-word; | |||
} | |||
.v-debugwindow-message em { | |||
background-color: #C4E6F8; | |||
} | |||
} | |||
// HIERARCHY | |||
.v-debugwindow-hierarchy { | |||
.v-debugwindow-info { | |||
padding: 1em; | |||
} | |||
} | |||
// NETWORK | |||
.v-debugwindow-network { | |||
.v-debugwindow-row { | |||
display: block !important; | |||
} | |||
.v-debugwindow-row > span { | |||
display: inline; | |||
} | |||
} | |||
} |
@@ -1,7 +1,3 @@ | |||
// TODO remove once debug window styles are bundled to the GWT module | |||
@import "_debug.scss"; | |||
// Import global variables | |||
@import "shared/variables"; | |||
@@ -29,6 +29,7 @@ import com.google.gwt.core.client.GWT; | |||
import com.google.gwt.core.client.GWT.UncaughtExceptionHandler; | |||
import com.google.gwt.core.client.JavaScriptObject; | |||
import com.google.gwt.core.client.JsArrayString; | |||
import com.google.gwt.core.client.RunAsyncCallback; | |||
import com.google.gwt.core.client.Scheduler; | |||
import com.google.gwt.core.client.Scheduler.ScheduledCommand; | |||
import com.google.gwt.logging.client.LogConfiguration; | |||
@@ -43,6 +44,7 @@ import com.vaadin.client.debug.internal.ProfilerSection; | |||
import com.vaadin.client.debug.internal.Section; | |||
import com.vaadin.client.debug.internal.TestBenchSection; | |||
import com.vaadin.client.debug.internal.VDebugWindow; | |||
import com.vaadin.client.debug.internal.theme.DebugWindowStyles; | |||
import com.vaadin.client.metadata.BundleLoadCallback; | |||
import com.vaadin.client.metadata.ConnectorBundleLoader; | |||
import com.vaadin.client.metadata.NoDataException; | |||
@@ -633,6 +635,21 @@ public class ApplicationConfiguration implements EntryPoint { | |||
if (isQuietDebugMode()) { | |||
window.close(); | |||
} else { | |||
// Load debug window styles asynchronously | |||
GWT.runAsync(new RunAsyncCallback() { | |||
@Override | |||
public void onSuccess() { | |||
DebugWindowStyles dws = GWT | |||
.create(DebugWindowStyles.class); | |||
dws.css().ensureInjected(); | |||
} | |||
@Override | |||
public void onFailure(Throwable reason) { | |||
Window.alert("Failed to load Vaadin debug window styles"); | |||
} | |||
}); | |||
window.init(); | |||
} | |||
@@ -0,0 +1,34 @@ | |||
package com.vaadin.client.debug.internal.theme; | |||
import com.google.gwt.resources.client.ClientBundle; | |||
import com.google.gwt.resources.client.CssResource; | |||
import com.google.gwt.resources.client.CssResource.NotStrict; | |||
import com.google.gwt.resources.client.DataResource; | |||
import com.google.gwt.resources.client.DataResource.DoNotEmbed; | |||
public interface DebugWindowStyles extends ClientBundle { | |||
@Source({ "debugwindow.css" }) | |||
@NotStrict | |||
public CssResource css(); | |||
// Can't embed because IE8 doesn't support datauri for fonts (images only) | |||
@Source("font.eot") | |||
@DoNotEmbed | |||
DataResource iconFontEot(); | |||
// Can't embed because GWT compiler doesn't know the mimetype for these | |||
// (ends up as content/unknown) | |||
@Source("font.ttf") | |||
@DoNotEmbed | |||
DataResource iconFontTtf(); | |||
@Source("font.woff") | |||
@DoNotEmbed | |||
DataResource iconFontWoff(); | |||
@Source("font.svg") | |||
@DoNotEmbed | |||
DataResource iconFontSvg(); | |||
} |
@@ -0,0 +1,322 @@ | |||
.v-debug-console { | |||
background: #fff; | |||
opacity: .9; | |||
border: 1px solid #000; | |||
font-family: sans-serif; | |||
} | |||
.v-debug-console-caption { | |||
background: #000; | |||
border-bottom: 1px solid grey; | |||
color: white; | |||
font-weight: bold; | |||
} | |||
.v-debug-console-content { | |||
font-size: x-small; | |||
overflow: auto; | |||
white-space: pre; | |||
} | |||
.v-debug-console-content input { | |||
font-size: xx-small; | |||
} | |||
/* Debug style */ | |||
.v-app .invalidlayout, | |||
.v-app .invalidlayout * { | |||
background: #f99 !important; | |||
} | |||
/* NEW debug window */ | |||
@def mainbg #fff; | |||
@def darkborder #666; | |||
@def lightborder #999; | |||
@def maincolor #666; | |||
@def maincolor-lighten-5pc #737373; | |||
@def maincolor-lighten-10pc gray; | |||
@def maincolor-lighten-15pc #8c8c8c; | |||
@def activecolor #000; | |||
@url urlForTtf iconFontTtf; | |||
@url urlForWoff iconFontWoff; | |||
@url urlForEot iconFontEot; | |||
@url urlForSvg iconFontSvg; | |||
@font-face { | |||
font-family: 'vdebugfont'; | |||
src: urlForEot; | |||
} | |||
@font-face { | |||
font-family: 'vdebugfont'; | |||
src: urlForWoff format('woff'), | |||
urlForTtf format('truetype'), | |||
urlForSvg format('svg'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
.v-debugwindow [data-icon]:before, | |||
.v-debugwindow-menu [data-icon]:before { | |||
font-family: 'vdebugfont'; | |||
content: attr(data-icon); | |||
speak: none; | |||
font-weight: normal; | |||
font-variant: normal; | |||
text-transform: none; | |||
line-height: 1; | |||
-webkit-font-smoothing: antialiased; | |||
font-style: normal; | |||
vertical-align: text-bottom; | |||
} | |||
.v-debugwindow { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
opacity: .8; | |||
color: maincolor; | |||
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; | |||
font-size: 13px; | |||
} | |||
.v-debugwindow-handle { | |||
position: absolute; | |||
bottom: 0; | |||
background-color: #fff; | |||
opacity: 0; | |||
z-index: 1000; | |||
} | |||
.v-debugwindow-handle-sw { | |||
width: 7px; | |||
height: 7px; | |||
} | |||
.v-debugwindow-handle-se { | |||
right: 0; | |||
width: 14px; | |||
height: 14px; | |||
} | |||
.v-debugwindow:hover { | |||
opacity: 1; | |||
} | |||
.v-debugwindow * { | |||
font-size: inherit !important; | |||
} | |||
.v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { | |||
font-size: 10px; | |||
} | |||
.v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { | |||
font-size: 13px; | |||
} | |||
.v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { | |||
font-size: 16px; | |||
} | |||
.v-debugwindow-head { | |||
text-align: right; | |||
background-color: transparent; | |||
} | |||
.v-debugwindow-tabs { | |||
display: inline-block; | |||
} | |||
.v-debugwindow-tab, .v-debugwindow-controls > * { | |||
width: 2em; | |||
border: none; | |||
margin: 0; | |||
line-height: 1.5em; | |||
background-color: mainbg; | |||
color: maincolor; | |||
} | |||
.v-debugwindow-tab { | |||
position: relative; | |||
top: 1px; | |||
border-width: 1px 0 1px 1px; | |||
border-style: solid; | |||
border-color: darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-tab-selected { | |||
color: maincolor; | |||
background-color: mainbg; | |||
border-bottom: 1px solid #fff; | |||
} | |||
.v-debugwindow-controls { | |||
position: relative; | |||
top: 1px; | |||
display: inline-block; | |||
background-color: mainbg; | |||
border: 1px solid darkborder; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
.v-debugwindow-section-head { | |||
text-align: left; | |||
background-color: mainbg; | |||
border: 1px solid darkborder; | |||
border-bottom: 1px solid lightborder; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
min-height: 1.5em; | |||
line-height: 1.5em; | |||
padding-left: 5px; | |||
} | |||
.v-debugwindow-button { | |||
border: none; | |||
background-color: transparent; | |||
color: maincolor; | |||
} | |||
.v-debugwindow-button:hover { | |||
color: activecolor; | |||
text-decoration: underline; | |||
} | |||
.v-debugwindow-button-active { | |||
color: maincolor; | |||
box-shadow: 1px 1px 3px 0 inset; | |||
} | |||
.v-debugwindow-content { | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
background-color: mainbg; | |||
border: 1px solid darkborder; | |||
border-top: none; | |||
} | |||
.v-debugwindow-menu { | |||
background-color: mainbg; | |||
padding: 4px; | |||
border: 1px solid lightborder; | |||
border-top: none; | |||
border-radius: 0 0 5px 5px; | |||
box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); | |||
} | |||
.v-debugwindow-menu-content { | |||
min-width: 100px; | |||
} | |||
.v-debugwindow-menu-content .v-debugwindow-button { | |||
line-height: 22px; | |||
} | |||
.v-debugwindow-menu-content > div > .v-debugwindow-button { | |||
width: 33%; | |||
} | |||
/* GLOBAL color every other row */ | |||
.v-debugwindow-row { | |||
display: table-row; | |||
} | |||
/* Escape function signature so that this gets past GWT compiler */ | |||
.v-debugwindow-row:nth-child\(odd\) { | |||
background-color: rgba(0, 61, 255, 0.11); | |||
} | |||
.v-debugwindow-row > span { | |||
display: table-cell; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-row.SEVERE { | |||
color: #550000; | |||
background-color: #FFC5C5; | |||
} | |||
.v-debugwindow-row.WARNING { | |||
background-color: #FFFF99; | |||
} | |||
.v-debugwindow-row.FINE { | |||
color: maincolor-lighten-5pc; | |||
} | |||
.v-debugwindow-row.FINER { | |||
color: maincolor-lighten-10pc; | |||
} | |||
.v-debugwindow-row.FINEST { | |||
color: maincolor-lighten-15pc; | |||
} | |||
.v-debugwindow-row > span.caption { | |||
color: #999; | |||
text-align: right; | |||
white-space: nowrap; | |||
} | |||
.v-debugwindow-row > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector > span.value { | |||
width: 100%; | |||
} | |||
.v-debugwindow-selector :hover { | |||
background: rgba(255,32,32,0.5); | |||
} | |||
/* LOG */ | |||
.v-debugwindow-log { | |||
font-family: monospace; | |||
} | |||
.v-debugwindow-log .v-debugwindow-reset { | |||
color: #fff; | |||
background-color: #4C92ED; | |||
padding: 4px; | |||
} | |||
.v-debugwindow-log .v-debugwindow-time { | |||
text-align: right; | |||
color: #999; | |||
} | |||
.v-debugwindow-log .v-debugwindow-message { | |||
white-space: nowrap; | |||
width: 100% | |||
} | |||
.v-debugwindow-log .v-debugwindow-message:hover { | |||
white-space: normal; | |||
word-wrap: break-word; | |||
} | |||
.v-debugwindow-log .v-debugwindow-message em { | |||
background-color: #C4E6F8; | |||
} | |||
/* HIERARCHY */ | |||
.v-debugwindow-hierarchy .v-debugwindow-info { | |||
padding: 1em; | |||
} | |||
/* NETWORK */ | |||
.v-debugwindow-network .v-debugwindow-row { | |||
display: block !important; | |||
} | |||
.v-debugwindow-network .v-debugwindow-row > span { | |||
display: inline; | |||
} |