From 2b2e522ee0f7468d7387e45d9da1e869c178d6cb Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Wed, 30 Apr 2014 15:05:05 +0300 Subject: Move debug window styles from theme to widgetset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: I3ac588745f4702a1cc0473b95806877cbf7062ad --- .../vaadin/client/ApplicationConfiguration.java | 17 ++ .../debug/internal/theme/DebugWindowStyles.java | 34 +++ .../client/debug/internal/theme/debugwindow.css | 322 +++++++++++++++++++++ .../vaadin/client/debug/internal/theme/font.eot | Bin 0 -> 7528 bytes .../vaadin/client/debug/internal/theme/font.svg | 36 +++ .../vaadin/client/debug/internal/theme/font.ttf | Bin 0 -> 7364 bytes .../vaadin/client/debug/internal/theme/font.woff | Bin 0 -> 8060 bytes 7 files changed, 409 insertions(+) create mode 100644 client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java create mode 100644 client/src/com/vaadin/client/debug/internal/theme/debugwindow.css create mode 100644 client/src/com/vaadin/client/debug/internal/theme/font.eot create mode 100644 client/src/com/vaadin/client/debug/internal/theme/font.svg create mode 100644 client/src/com/vaadin/client/debug/internal/theme/font.ttf create mode 100644 client/src/com/vaadin/client/debug/internal/theme/font.woff (limited to 'client') diff --git a/client/src/com/vaadin/client/ApplicationConfiguration.java b/client/src/com/vaadin/client/ApplicationConfiguration.java index 8023c8e50a..16cdc759fa 100644 --- a/client/src/com/vaadin/client/ApplicationConfiguration.java +++ b/client/src/com/vaadin/client/ApplicationConfiguration.java @@ -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(); } diff --git a/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java new file mode 100644 index 0000000000..0afc46d0f3 --- /dev/null +++ b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java @@ -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(); + +} \ No newline at end of file diff --git a/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css new file mode 100644 index 0000000000..78e537140e --- /dev/null +++ b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css @@ -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; +} diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.eot b/client/src/com/vaadin/client/debug/internal/theme/font.eot new file mode 100644 index 0000000000..c2a63b3f08 Binary files /dev/null and b/client/src/com/vaadin/client/debug/internal/theme/font.eot differ diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.svg b/client/src/com/vaadin/client/debug/internal/theme/font.svg new file mode 100644 index 0000000000..9d00e7b2fc --- /dev/null +++ b/client/src/com/vaadin/client/debug/internal/theme/font.svg @@ -0,0 +1,36 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.ttf b/client/src/com/vaadin/client/debug/internal/theme/font.ttf new file mode 100644 index 0000000000..eee808e07e Binary files /dev/null and b/client/src/com/vaadin/client/debug/internal/theme/font.ttf differ diff --git a/client/src/com/vaadin/client/debug/internal/theme/font.woff b/client/src/com/vaadin/client/debug/internal/theme/font.woff new file mode 100644 index 0000000000..2cd069ffdf Binary files /dev/null and b/client/src/com/vaadin/client/debug/internal/theme/font.woff differ -- cgit v1.2.3