summaryrefslogtreecommitdiffstats
path: root/devtools/client/styleeditor/test
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/styleeditor/test')
-rw-r--r--devtools/client/styleeditor/test/.eslintrc.js6
-rw-r--r--devtools/client/styleeditor/test/autocomplete.html23
-rw-r--r--devtools/client/styleeditor/test/browser.ini107
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_autocomplete-disabled.js26
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_autocomplete.js231
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_bom.js34
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_bug_740541_iframes.js76
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_bug_851132_middle_click.js56
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_bug_870339.js45
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.html53
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.js215
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_enabled.js56
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js40
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_filesave.js99
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_highlight-selector.js48
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_import.js55
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_import_rule.js25
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_init.js45
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js88
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_loading.js36
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_loading_with_containers.js63
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js143
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js144
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js71
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_missing_stylesheet.js30
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_navigate.js32
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_new.js113
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_nostyle.js28
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_opentab.js121
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_pretty.js68
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_private_perwindowpb.js85
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_reload.js34
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_scroll.js91
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_selectstylesheet.js26
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sourcemap_large.js33
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js162
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sourcemaps.js149
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sourcemaps_inline.js85
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sv_keynav.js65
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sv_resize.js48
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_sync.js72
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_syncAddProperty.js45
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js31
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js50
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js39
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js48
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js51
-rw-r--r--devtools/client/styleeditor/test/browser_styleeditor_xul.js22
-rw-r--r--devtools/client/styleeditor/test/doc_long.css403
-rw-r--r--devtools/client/styleeditor/test/doc_uncached.css16
-rw-r--r--devtools/client/styleeditor/test/doc_uncached.html10
-rw-r--r--devtools/client/styleeditor/test/doc_xulpage.xul7
-rw-r--r--devtools/client/styleeditor/test/four.html25
-rw-r--r--devtools/client/styleeditor/test/head.js121
-rw-r--r--devtools/client/styleeditor/test/import.css10
-rw-r--r--devtools/client/styleeditor/test/import.html11
-rw-r--r--devtools/client/styleeditor/test/import2.css10
-rw-r--r--devtools/client/styleeditor/test/inline-1.html19
-rw-r--r--devtools/client/styleeditor/test/inline-2.html19
-rw-r--r--devtools/client/styleeditor/test/longload.html29
-rw-r--r--devtools/client/styleeditor/test/media-rules-sourcemaps.html12
-rw-r--r--devtools/client/styleeditor/test/media-rules.css29
-rw-r--r--devtools/client/styleeditor/test/media-rules.html13
-rw-r--r--devtools/client/styleeditor/test/media-small.css5
-rw-r--r--devtools/client/styleeditor/test/media.html11
-rw-r--r--devtools/client/styleeditor/test/minified.html15
-rw-r--r--devtools/client/styleeditor/test/missing.html11
-rw-r--r--devtools/client/styleeditor/test/nostyle.html5
-rw-r--r--devtools/client/styleeditor/test/pretty.css2
-rw-r--r--devtools/client/styleeditor/test/resources_inpage.jsi12
-rw-r--r--devtools/client/styleeditor/test/resources_inpage1.css11
-rw-r--r--devtools/client/styleeditor/test/resources_inpage2.css11
-rw-r--r--devtools/client/styleeditor/test/simple.css9
-rw-r--r--devtools/client/styleeditor/test/simple.css.gzbin0 -> 166 bytes
-rw-r--r--devtools/client/styleeditor/test/simple.css.gz^headers^4
-rw-r--r--devtools/client/styleeditor/test/simple.gz.html23
-rw-r--r--devtools/client/styleeditor/test/simple.html24
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/contained.css4
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/media-rules.css8
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/media-rules.css.map6
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css7
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css.map6
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css4513
-rw-r--r--devtools/client/styleeditor/test/sourcemap-css/test-stylus.css7
-rw-r--r--devtools/client/styleeditor/test/sourcemap-sass/media-rules.scss11
-rw-r--r--devtools/client/styleeditor/test/sourcemap-sass/sourcemaps.scss10
-rw-r--r--devtools/client/styleeditor/test/sourcemap-styl/test-stylus.styl7
-rw-r--r--devtools/client/styleeditor/test/sourcemaps-inline.html17
-rw-r--r--devtools/client/styleeditor/test/sourcemaps-large.html11
-rw-r--r--devtools/client/styleeditor/test/sourcemaps-watching.html11
-rw-r--r--devtools/client/styleeditor/test/sourcemaps.html13
-rw-r--r--devtools/client/styleeditor/test/sync.html20
-rw-r--r--devtools/client/styleeditor/test/test_private.css3
-rw-r--r--devtools/client/styleeditor/test/test_private.html7
-rw-r--r--devtools/client/styleeditor/test/utf-16.cssbin0 -> 156 bytes
95 files changed, 8851 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/.eslintrc.js b/devtools/client/styleeditor/test/.eslintrc.js
new file mode 100644
index 000000000..8d15a76d9
--- /dev/null
+++ b/devtools/client/styleeditor/test/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+ // Extend from the shared list of defined globals for mochitests.
+ "extends": "../../../.eslintrc.mochitests.js"
+};
diff --git a/devtools/client/styleeditor/test/autocomplete.html b/devtools/client/styleeditor/test/autocomplete.html
new file mode 100644
index 000000000..801eb4d4b
--- /dev/null
+++ b/devtools/client/styleeditor/test/autocomplete.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+ <title>testcase for autocomplete testing</title>
+ <link rel="stylesheet" type="text/css" href="resources_inpage1.css"/>
+ <style type="text/css">
+ div {
+ font-size: 4em;
+ }
+
+ div > span {
+ text-decoration: underline;
+ }
+
+ div + button {
+ border: 2px dotted red;
+ }
+ </style>
+</head>
+<body>
+ <div>parent <span>child</span></div><button>sibling</button>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/browser.ini b/devtools/client/styleeditor/test/browser.ini
new file mode 100644
index 000000000..1a85546af
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser.ini
@@ -0,0 +1,107 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+ autocomplete.html
+ browser_styleeditor_cmd_edit.html
+ four.html
+ head.js
+ import.css
+ import.html
+ import2.css
+ inline-1.html
+ inline-2.html
+ longload.html
+ media-small.css
+ media.html
+ media-rules.html
+ media-rules.css
+ media-rules-sourcemaps.html
+ minified.html
+ missing.html
+ nostyle.html
+ pretty.css
+ resources_inpage.jsi
+ resources_inpage1.css
+ resources_inpage2.css
+ simple.css
+ simple.css.gz
+ simple.css.gz^headers^
+ simple.gz.html
+ simple.html
+ sourcemap-css/contained.css
+ sourcemap-css/sourcemaps.css
+ sourcemap-css/sourcemaps.css.map
+ sourcemap-css/media-rules.css
+ sourcemap-css/media-rules.css.map
+ sourcemap-css/test-bootstrap-scss.css
+ sourcemap-css/test-stylus.css
+ sourcemap-sass/sourcemaps.scss
+ sourcemap-sass/media-rules.scss
+ sourcemap-styl/test-stylus.styl
+ sourcemaps.html
+ sourcemaps-inline.html
+ sourcemaps-large.html
+ sourcemaps-watching.html
+ test_private.css
+ test_private.html
+ doc_long.css
+ doc_uncached.css
+ doc_uncached.html
+ doc_xulpage.xul
+ sync.html
+ utf-16.css
+ !/devtools/client/commandline/test/helpers.js
+ !/devtools/client/framework/test/shared-head.js
+ !/devtools/client/inspector/shared/test/head.js
+ !/devtools/client/inspector/test/head.js
+ !/devtools/client/inspector/test/shared-head.js
+ !/devtools/client/responsive.html/test/browser/devices.json
+ !/devtools/client/shared/test/test-actor-registry.js
+ !/devtools/client/shared/test/test-actor.js
+
+[browser_styleeditor_autocomplete.js]
+[browser_styleeditor_autocomplete-disabled.js]
+[browser_styleeditor_bom.js]
+[browser_styleeditor_bug_740541_iframes.js]
+[browser_styleeditor_bug_851132_middle_click.js]
+[browser_styleeditor_bug_870339.js]
+[browser_styleeditor_cmd_edit.js]
+[browser_styleeditor_enabled.js]
+[browser_styleeditor_fetch-from-cache.js]
+[browser_styleeditor_filesave.js]
+[browser_styleeditor_highlight-selector.js]
+[browser_styleeditor_import.js]
+[browser_styleeditor_import_rule.js]
+[browser_styleeditor_init.js]
+[browser_styleeditor_inline_friendly_names.js]
+[browser_styleeditor_loading.js]
+[browser_styleeditor_loading_with_containers.js]
+[browser_styleeditor_media_sidebar.js]
+[browser_styleeditor_media_sidebar_links.js]
+skip-if = e10s && debug # Bug 1252201 - Docshell leak on debug e10s
+[browser_styleeditor_media_sidebar_sourcemaps.js]
+[browser_styleeditor_missing_stylesheet.js]
+[browser_styleeditor_navigate.js]
+[browser_styleeditor_new.js]
+[browser_styleeditor_nostyle.js]
+[browser_styleeditor_opentab.js]
+[browser_styleeditor_pretty.js]
+[browser_styleeditor_private_perwindowpb.js]
+[browser_styleeditor_reload.js]
+[browser_styleeditor_scroll.js]
+[browser_styleeditor_sv_keynav.js]
+[browser_styleeditor_sv_resize.js]
+[browser_styleeditor_selectstylesheet.js]
+[browser_styleeditor_sourcemaps.js]
+[browser_styleeditor_sourcemaps_inline.js]
+[browser_styleeditor_sourcemap_large.js]
+[browser_styleeditor_sourcemap_watching.js]
+[browser_styleeditor_sync.js]
+[browser_styleeditor_syncAddProperty.js]
+[browser_styleeditor_syncAddRule.js]
+[browser_styleeditor_syncAlreadyOpen.js]
+[browser_styleeditor_syncEditSelector.js]
+[browser_styleeditor_syncIntoRuleView.js]
+[browser_styleeditor_transition_rule.js]
+[browser_styleeditor_xul.js]
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_autocomplete-disabled.js b/devtools/client/styleeditor/test/browser_styleeditor_autocomplete-disabled.js
new file mode 100644
index 000000000..b632a7716
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_autocomplete-disabled.js
@@ -0,0 +1,26 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that autocomplete can be disabled.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "autocomplete.html";
+
+// Pref which decides if CSS autocompletion is enabled in Style Editor or not.
+const AUTOCOMPLETION_PREF = "devtools.styleeditor.autocompletion-enabled";
+
+add_task(function* () {
+ Services.prefs.setBoolPref(AUTOCOMPLETION_PREF, false);
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ let editor = yield ui.editors[0].getSourceEditor();
+
+ is(editor.sourceEditor.getOption("autocomplete"), false,
+ "Autocompletion option does not exist");
+ ok(!editor.sourceEditor.getAutocompletionPopup(),
+ "Autocompletion popup does not exist");
+});
+
+registerCleanupFunction(() => {
+ Services.prefs.clearUserPref(AUTOCOMPLETION_PREF);
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_autocomplete.js b/devtools/client/styleeditor/test/browser_styleeditor_autocomplete.js
new file mode 100644
index 000000000..626498418
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_autocomplete.js
@@ -0,0 +1,231 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that autocompletion works as expected.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "autocomplete.html";
+const MAX_SUGGESTIONS = 15;
+
+const {initCssProperties} = require("devtools/shared/fronts/css-properties");
+
+// Test cases to test that autocompletion works correctly when enabled.
+// Format:
+// [
+// key,
+// {
+// total: Number of suggestions in the popup (-1 if popup is closed),
+// current: Index of selected suggestion,
+// inserted: 1 to check whether the selected suggestion is inserted into the
+// editor or not,
+// entered: 1 if the suggestion is inserted and finalized
+// }
+// ]
+
+function getTestCases(cssProperties) {
+ let keywords = getCSSKeywords(cssProperties);
+ let getSuggestionNumberFor = suggestionNumberGetter(keywords);
+
+ return [
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["Ctrl+Space", {total: 1, current: 0}],
+ ["VK_LEFT"],
+ ["VK_RIGHT"],
+ ["VK_DOWN"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["Ctrl+Space", { total: getSuggestionNumberFor("font"), current: 0}],
+ ["VK_END"],
+ ["VK_RETURN"],
+ ["b", {total: getSuggestionNumberFor("b"), current: 0}],
+ ["a", {total: getSuggestionNumberFor("ba"), current: 0}],
+ ["VK_DOWN", {total: getSuggestionNumberFor("ba"), current: 0, inserted: 1}],
+ ["VK_TAB", {total: getSuggestionNumberFor("ba"), current: 1, inserted: 1}],
+ ["VK_RETURN", {current: 1, inserted: 1, entered: 1}],
+ ["b", {total: getSuggestionNumberFor("background", "b"), current: 0}],
+ ["l", {total: getSuggestionNumberFor("background", "bl"), current: 0}],
+ ["VK_TAB", {
+ total: getSuggestionNumberFor("background", "bl"),
+ current: 0, inserted: 1
+ }],
+ ["VK_DOWN", {
+ total: getSuggestionNumberFor("background", "bl"),
+ current: 1, inserted: 1
+ }],
+ ["VK_UP", {
+ total: getSuggestionNumberFor("background", "bl"),
+ current: 0,
+ inserted: 1
+ }],
+ ["VK_TAB", {
+ total: getSuggestionNumberFor("background", "bl"),
+ current: 1,
+ inserted: 1
+ }],
+ ["VK_TAB", {
+ total: getSuggestionNumberFor("background", "bl"),
+ current: 2,
+ inserted: 1
+ }],
+ [";"],
+ ["VK_RETURN"],
+ ["c", {total: getSuggestionNumberFor("c"), current: 0}],
+ ["o", {total: getSuggestionNumberFor("co"), current: 0}],
+ ["VK_RETURN", {current: 0, inserted: 1}],
+ ["r", {total: getSuggestionNumberFor("color", "r"), current: 0}],
+ ["VK_RETURN", {current: 0, inserted: 1}],
+ [";"],
+ ["VK_LEFT"],
+ ["VK_RIGHT"],
+ ["VK_DOWN"],
+ ["VK_RETURN"],
+ ["b", {total: 2, current: 0}],
+ ["u", {total: 1, current: 0}],
+ ["VK_RETURN", {current: 0, inserted: 1}],
+ ["{"],
+ ["VK_HOME"],
+ ["VK_DOWN"],
+ ["VK_DOWN"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["VK_RIGHT"],
+ ["Ctrl+Space", {total: 1, current: 0}],
+ ];
+}
+
+add_task(function* () {
+ let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ let { cssProperties } = yield initCssProperties(panel._toolbox);
+ let testCases = getTestCases(cssProperties);
+
+ yield ui.selectStyleSheet(ui.editors[1].styleSheet);
+ let editor = yield ui.editors[1].getSourceEditor();
+
+ let sourceEditor = editor.sourceEditor;
+ let popup = sourceEditor.getAutocompletionPopup();
+
+ yield SimpleTest.promiseFocus(panel.panelWindow);
+
+ for (let index in testCases) {
+ yield testState(testCases, index, sourceEditor, popup, panel.panelWindow);
+ yield checkState(testCases, index, sourceEditor, popup);
+ }
+});
+
+function testState(testCases, index, sourceEditor, popup, panelWindow) {
+ let [key, details] = testCases[index];
+ let entered;
+ if (details) {
+ entered = details.entered;
+ }
+ let mods = {};
+
+ info("pressing key " + key + " to get result: " +
+ JSON.stringify(testCases[index]) + " for index " + index);
+
+ let evt = "after-suggest";
+
+ if (key == "Ctrl+Space") {
+ key = " ";
+ mods.ctrlKey = true;
+ } else if (key == "VK_RETURN" && entered) {
+ evt = "popup-hidden";
+ } else if (/(left|right|return|home|end)/ig.test(key) ||
+ (key == "VK_DOWN" && !popup.isOpen)) {
+ evt = "cursorActivity";
+ } else if (key == "VK_TAB" || key == "VK_UP" || key == "VK_DOWN") {
+ evt = "suggestion-entered";
+ }
+
+ let ready = sourceEditor.once(evt);
+ EventUtils.synthesizeKey(key, mods, panelWindow);
+
+ return ready;
+}
+
+function checkState(testCases, index, sourceEditor, popup) {
+ let deferred = defer();
+ executeSoon(() => {
+ let [, details] = testCases[index];
+ details = details || {};
+ let {total, current, inserted} = details;
+
+ if (total != undefined) {
+ ok(popup.isOpen, "Popup is open for index " + index);
+ is(total, popup.itemCount,
+ "Correct total suggestions for index " + index);
+ is(current, popup.selectedIndex,
+ "Correct index is selected for index " + index);
+ if (inserted) {
+ let { text } = popup.getItemAtIndex(current);
+ let { line, ch } = sourceEditor.getCursor();
+ let lineText = sourceEditor.getText(line);
+ is(lineText.substring(ch - text.length, ch), text,
+ "Current suggestion from the popup is inserted into the editor.");
+ }
+ } else {
+ ok(!popup.isOpen, "Popup is closed for index " + index);
+ if (inserted) {
+ let { text } = popup.getItemAtIndex(current);
+ let { line, ch } = sourceEditor.getCursor();
+ let lineText = sourceEditor.getText(line);
+ is(lineText.substring(ch - text.length, ch), text,
+ "Current suggestion from the popup is inserted into the editor.");
+ }
+ }
+ deferred.resolve();
+ });
+
+ return deferred.promise;
+}
+
+/**
+ * Returns a list of all property names and a map of property name vs possible
+ * CSS values provided by the Gecko engine.
+ *
+ * @return {Object} An object with following properties:
+ * - CSSProperties {Array} Array of string containing all the possible
+ * CSS property names.
+ * - CSSValues {Object|Map} A map where key is the property name and
+ * value is an array of string containing all the possible
+ * CSS values the property can have.
+ */
+function getCSSKeywords(cssProperties) {
+ let props = {};
+ let propNames = cssProperties.getNames();
+ propNames.forEach(prop => {
+ props[prop] = cssProperties.getValues(prop).sort();
+ });
+ return {
+ CSSValues: props,
+ CSSProperties: propNames.sort()
+ };
+}
+
+/**
+ * Returns a function that returns the number of expected suggestions for the given
+ * property and value. If the value is not null, returns the number of values starting
+ * with `value`. Returns the number of properties starting with `property` otherwise.
+ */
+function suggestionNumberGetter({CSSProperties, CSSValues}) {
+ return (property, value) => {
+ if (value == null) {
+ return CSSProperties.filter(prop => prop.startsWith(property))
+ .slice(0, MAX_SUGGESTIONS).length;
+ }
+ return CSSValues[property].filter(val => val.startsWith(value))
+ .slice(0, MAX_SUGGESTIONS).length;
+ };
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_bom.js b/devtools/client/styleeditor/test/browser_styleeditor_bom.js
new file mode 100644
index 000000000..56275a3a9
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_bom.js
@@ -0,0 +1,34 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const BOM_CSS = TEST_BASE_HTTPS + "utf-16.css";
+const DOCUMENT = "data:text/html;charset=UTF-8," +
+ encodeURIComponent(
+ ["<!DOCTYPE html>",
+ "<html>",
+ " <head>",
+ " <title>Bug 1301854</title>",
+ ' <link rel="stylesheet" type="text/css" href="' + BOM_CSS + '">',
+ " </head>",
+ " <body>",
+ " </body>",
+ "</html>"
+ ].join("\n"));
+
+const CONTENTS = "// Note that this file must be utf-16 with a " +
+ "BOM for the test to make sense.\n";
+
+add_task(function* () {
+ let {ui} = yield openStyleEditorForURL(DOCUMENT);
+
+ is(ui.editors.length, 1, "correct number of editors");
+
+ let editor = ui.editors[0];
+ yield editor.getSourceEditor();
+
+ let text = editor.sourceEditor.getText();
+ is(text, CONTENTS, "editor contains expected text");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_bug_740541_iframes.js b/devtools/client/styleeditor/test/browser_styleeditor_bug_740541_iframes.js
new file mode 100644
index 000000000..1a6031013
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_bug_740541_iframes.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that sheets inside iframes are shown in the editor.
+
+add_task(function* () {
+ function makeStylesheet(selector) {
+ return ("data:text/css;charset=UTF-8," +
+ encodeURIComponent(selector + " { }"));
+ }
+
+ function makeDocument(stylesheets, framedDocuments) {
+ stylesheets = stylesheets || [];
+ framedDocuments = framedDocuments || [];
+ return "data:text/html;charset=UTF-8," + encodeURIComponent(
+ Array.prototype.concat.call(
+ ["<!DOCTYPE html>",
+ "<html>",
+ "<head>",
+ "<title>Bug 740541</title>"],
+ stylesheets.map(function (sheet) {
+ return '<link rel="stylesheet" type="text/css" href="' + sheet + '">';
+ }),
+ ["</head>",
+ "<body>"],
+ framedDocuments.map(function (doc) {
+ return '<iframe src="' + doc + '"></iframe>';
+ }),
+ ["</body>",
+ "</html>"]
+ ).join("\n"));
+ }
+
+ const DOCUMENT_WITH_INLINE_STYLE = "data:text/html;charset=UTF-8," +
+ encodeURIComponent(
+ ["<!DOCTYPE html>",
+ "<html>",
+ " <head>",
+ " <title>Bug 740541</title>",
+ ' <style type="text/css">',
+ " .something {",
+ " }",
+ " </style>",
+ " </head>",
+ " <body>",
+ " </body>",
+ " </html>"
+ ].join("\n"));
+
+ const FOUR = TEST_BASE_HTTP + "four.html";
+
+ const SIMPLE = TEST_BASE_HTTP + "simple.css";
+
+ const SIMPLE_DOCUMENT = TEST_BASE_HTTP + "simple.html";
+
+ const TESTCASE_URI = makeDocument(
+ [makeStylesheet(".a")],
+ [makeDocument([],
+ [FOUR,
+ DOCUMENT_WITH_INLINE_STYLE]),
+ makeDocument([makeStylesheet(".b"),
+ SIMPLE],
+ [makeDocument([makeStylesheet(".c")],
+ [])]),
+ makeDocument([SIMPLE], []),
+ SIMPLE_DOCUMENT
+ ]);
+
+ const EXPECTED_STYLE_SHEET_COUNT = 12;
+
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, EXPECTED_STYLE_SHEET_COUNT,
+ "Got the expected number of style sheets.");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_bug_851132_middle_click.js b/devtools/client/styleeditor/test/browser_styleeditor_bug_851132_middle_click.js
new file mode 100644
index 000000000..a666156b1
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_bug_851132_middle_click.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that middle click on style sheet doesn't open styleeditor.xul in a new
+// tab (bug 851132).
+
+const TESTCASE_URI = TEST_BASE_HTTP + "four.html";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ gBrowser.tabContainer.addEventListener("TabOpen", onTabAdded, false);
+
+ yield ui.editors[0].getSourceEditor();
+ info("first editor selected");
+
+ info("Left-clicking on the second editor link.");
+ yield clickOnStyleSheetLink(ui.editors[1], 0);
+
+ info("Waiting for the second editor to be selected.");
+ let editor = yield ui.once("editor-selected");
+
+ ok(editor.sourceEditor.hasFocus(),
+ "Left mouse click gave second editor focus.");
+
+ // middle mouse click should not open a new tab
+ info("Middle clicking on the third editor link.");
+ yield clickOnStyleSheetLink(ui.editors[2], 1);
+});
+
+/**
+ * A helper that clicks on style sheet link in the sidebar.
+ *
+ * @param {StyleSheetEditor} editor
+ * The editor of which link should be clicked.
+ * @param {MouseEvent.button} button
+ * The button to click the link with.
+ */
+function* clickOnStyleSheetLink(editor, button) {
+ let window = editor._window;
+ let link = editor.summary.querySelector(".stylesheet-name");
+
+ info("Waiting for focus.");
+ yield SimpleTest.promiseFocus(window);
+
+ info("Pressing button " + button + " on style sheet name link.");
+ EventUtils.synthesizeMouseAtCenter(link, { button }, window);
+}
+
+function onTabAdded() {
+ ok(false, "middle mouse click has opened a new tab");
+}
+
+registerCleanupFunction(function () {
+ gBrowser.tabContainer.removeEventListener("TabOpen", onTabAdded, false);
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_bug_870339.js b/devtools/client/styleeditor/test/browser_styleeditor_bug_870339.js
new file mode 100644
index 000000000..9b0b7b3f4
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_bug_870339.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const SIMPLE = TEST_BASE_HTTP + "simple.css";
+const DOCUMENT_WITH_ONE_STYLESHEET = "data:text/html;charset=UTF-8," +
+ encodeURIComponent(
+ ["<!DOCTYPE html>",
+ "<html>",
+ " <head>",
+ " <title>Bug 870339</title>",
+ ' <link rel="stylesheet" type="text/css" href="' + SIMPLE + '">',
+ " </head>",
+ " <body>",
+ " </body>",
+ "</html>"
+ ].join("\n"));
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(DOCUMENT_WITH_ONE_STYLESHEET);
+
+ // Spam the _onNewDocument callback multiple times before the
+ // StyleEditorActor has a chance to respond to the first one.
+ const SPAM_COUNT = 2;
+ for (let i = 0; i < SPAM_COUNT; ++i) {
+ ui._onNewDocument();
+ }
+
+ // Wait for the StyleEditorActor to respond to each "newDocument"
+ // message.
+ yield new Promise(resolve => {
+ let loadCount = 0;
+ ui.on("stylesheets-reset", function onReset() {
+ ++loadCount;
+ if (loadCount == SPAM_COUNT) {
+ ui.off("stylesheets-reset", onReset);
+ // No matter how large SPAM_COUNT is, the number of style
+ // sheets should never be more than the number of style sheets
+ // in the document.
+ is(ui.editors.length, 1, "correct style sheet count");
+ resolve();
+ }
+ });
+ });
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.html b/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.html
new file mode 100644
index 000000000..9907f0474
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<!-- Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+ <meta charset="utf-8">
+ <title>Resources</title>
+ <script type="text/javascript;version=1.8" id="script1">
+ "use strict";
+
+ window.addEventListener("load", function onload() {
+ let pid = document.getElementById("pid");
+ let div = document.createElement("div");
+ div.id = "divid";
+ div.classList.add("divclass");
+ div.appendChild(document.createTextNode("div"));
+ div.setAttribute("data-a1", "div");
+ pid.parentNode.appendChild(div);
+ });
+ </script>
+ <script src="resources_inpage.jsi"></script>
+ <link rel="stylesheet" type="text/css" href="resources_inpage1.css"/>
+ <link rel="stylesheet" type="text/css" href="resources_inpage2.css"/>
+ <style type="text/css">
+ p { color: #800; }
+ div { color: #008; }
+ h4 { color: #080; }
+ h3 { color: #880; }
+ </style>
+</head>
+<body>
+ <style type="text/css" id=style2>
+ .pclass { background-color: #FEE; }
+ .divclass { background-color: #EEF; }
+ .h4class { background-color: #EFE; }
+ .h3class { background-color: #FFE; }
+ </style>
+
+ <p class="pclass" id="pid" data-a1="p">paragraph</p>
+
+ <script>
+ "use strict";
+ let pid = document.getElementById("pid");
+ let h4 = document.createElement("h4");
+ h4.id = "h4id";
+ h4.classList.add("h4class");
+ h4.appendChild(document.createTextNode("h4"));
+ h4.setAttribute("data-a1", "h4");
+ pid.parentNode.appendChild(h4);
+ </script>
+
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.js b/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.js
new file mode 100644
index 000000000..96b64cc94
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_cmd_edit.js
@@ -0,0 +1,215 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the edit command works
+
+// Import the GCLI test helper
+/* import-globals-from ../../commandline/test/helpers.js */
+Services.scriptloader.loadSubScript(
+ "chrome://mochitests/content/browser/devtools/client/commandline/test/helpers.js",
+ this);
+
+const TEST_URI = "http://example.com/browser/devtools/client/styleeditor/" +
+ "test/browser_styleeditor_cmd_edit.html";
+
+add_task(function* () {
+ let options = yield helpers.openTab(TEST_URI);
+ yield helpers.openToolbar(options);
+
+ yield helpers.audit(options, [
+ {
+ setup: "edit",
+ check: {
+ input: "edit",
+ hints: " <resource> [line]",
+ markup: "VVVV",
+ status: "ERROR",
+ args: {
+ resource: { status: "INCOMPLETE" },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit i",
+ check: {
+ input: "edit i",
+ hints: "nline-css [line]",
+ markup: "VVVVVI",
+ status: "ERROR",
+ args: {
+ resource: { arg: " i", status: "INCOMPLETE" },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit c",
+ check: {
+ input: "edit c",
+ hints: "ss#style2 [line]",
+ markup: "VVVVVI",
+ status: "ERROR",
+ args: {
+ resource: { arg: " c", status: "INCOMPLETE" },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit http",
+ check: {
+ input: "edit http",
+ hints: "://example.com/browser/devtools/client/styleeditor/test/" +
+ "resources_inpage1.css [line]",
+ markup: "VVVVVIIII",
+ status: "ERROR",
+ args: {
+ resource: {
+ arg: " http",
+ status: "INCOMPLETE",
+ message: "Value required for \u2018resource\u2019."
+ },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit page1",
+ check: {
+ input: "edit page1",
+ hints: " [line] -> http://example.com/browser/devtools/client/" +
+ "styleeditor/test/resources_inpage1.css",
+ markup: "VVVVVIIIII",
+ status: "ERROR",
+ args: {
+ resource: {
+ arg: " page1",
+ status: "INCOMPLETE",
+ message: "Value required for \u2018resource\u2019."
+ },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit page2",
+ check: {
+ input: "edit page2",
+ hints: " [line] -> http://example.com/browser/devtools/client/" +
+ "styleeditor/test/resources_inpage2.css",
+ markup: "VVVVVIIIII",
+ status: "ERROR",
+ args: {
+ resource: {
+ arg: " page2",
+ status: "INCOMPLETE",
+ message: "Value required for \u2018resource\u2019."
+ },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit stylez",
+ check: {
+ input: "edit stylez",
+ hints: " [line]",
+ markup: "VVVVVEEEEEE",
+ status: "ERROR",
+ args: {
+ resource: {
+ arg: " stylez",
+ status: "ERROR", message: "Can\u2019t use \u2018stylez\u2019." },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit css#style2",
+ check: {
+ input: "edit css#style2",
+ hints: " [line]",
+ markup: "VVVVVVVVVVVVVVV",
+ status: "VALID",
+ args: {
+ resource: { arg: " css#style2", status: "VALID", message: "" },
+ line: { status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit css#style2 5",
+ check: {
+ input: "edit css#style2 5",
+ hints: "",
+ markup: "VVVVVVVVVVVVVVVVV",
+ status: "VALID",
+ args: {
+ resource: { arg: " css#style2", status: "VALID", message: "" },
+ line: { value: 5, arg: " 5", status: "VALID" },
+ }
+ },
+ },
+ {
+ setup: "edit css#style2 0",
+ check: {
+ input: "edit css#style2 0",
+ hints: "",
+ markup: "VVVVVVVVVVVVVVVVE",
+ status: "ERROR",
+ args: {
+ resource: { arg: " css#style2", status: "VALID", message: "" },
+ line: {
+ arg: " 0",
+ status: "ERROR",
+ message: "0 is smaller than minimum allowed: 1."
+ },
+ }
+ },
+ },
+ {
+ setup: "edit css#style2 -1",
+ check: {
+ input: "edit css#style2 -1",
+ hints: "",
+ markup: "VVVVVVVVVVVVVVVVEE",
+ status: "ERROR",
+ args: {
+ resource: { arg: " css#style2", status: "VALID", message: "" },
+ line: {
+ arg: " -1",
+ status: "ERROR",
+ message: "-1 is smaller than minimum allowed: 1."
+ },
+ }
+ },
+ }
+ ]);
+
+ let toolbox = gDevTools.getToolbox(options.target);
+ ok(toolbox == null, "toolbox is closed");
+
+ yield helpers.audit(options, [
+ {
+ setup: "edit css#style2",
+ check: {
+ input: "edit css#style2",
+ },
+ exec: { output: "" }
+ },
+ ]);
+
+ toolbox = gDevTools.getToolbox(options.target);
+ ok(toolbox != null, "toolbox is open");
+
+ let styleEditor = toolbox.getCurrentPanel();
+ ok(typeof styleEditor.selectStyleSheet === "function", "styleeditor is open");
+
+ yield toolbox.destroy();
+
+ yield helpers.closeToolbar(options);
+ yield helpers.closeTab(options);
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_enabled.js b/devtools/client/styleeditor/test/browser_styleeditor_enabled.js
new file mode 100644
index 000000000..993225de0
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_enabled.js
@@ -0,0 +1,56 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that style sheets can be disabled and enabled.
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+add_task(function* () {
+ let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ let editor = yield ui.editors[0].getSourceEditor();
+
+ let summary = editor.summary;
+ let enabledToggle = summary.querySelector(".stylesheet-enabled");
+ ok(enabledToggle, "enabled toggle button exists");
+
+ is(editor.styleSheet.disabled, false,
+ "first stylesheet is initially enabled");
+
+ is(summary.classList.contains("disabled"), false,
+ "first stylesheet is initially enabled, UI does not have DISABLED class");
+
+ info("Disabling the first stylesheet.");
+ yield toggleEnabled(editor, enabledToggle, panel.panelWindow);
+
+ is(editor.styleSheet.disabled, true, "first stylesheet is now disabled");
+ is(summary.classList.contains("disabled"), true,
+ "first stylesheet is now disabled, UI has DISABLED class");
+
+ info("Enabling the first stylesheet again.");
+ yield toggleEnabled(editor, enabledToggle, panel.panelWindow);
+
+ is(editor.styleSheet.disabled, false,
+ "first stylesheet is now enabled again");
+ is(summary.classList.contains("disabled"), false,
+ "first stylesheet is now enabled again, UI does not have DISABLED class");
+});
+
+function* toggleEnabled(editor, enabledToggle, panelWindow) {
+ let changed = editor.once("property-change");
+
+ info("Waiting for focus.");
+ yield SimpleTest.promiseFocus(panelWindow);
+
+ info("Clicking on the toggle.");
+ EventUtils.synthesizeMouseAtCenter(enabledToggle, {}, panelWindow);
+
+ info("Waiting for stylesheet to be disabled.");
+ let property = yield changed;
+ while (property !== "disabled") {
+ info("Ignoring property-change for '" + property + "'.");
+ property = yield editor.once("property-change");
+ }
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js b/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js
new file mode 100644
index 000000000..7aeb24d69
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_fetch-from-cache.js
@@ -0,0 +1,40 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// A test to ensure Style Editor doesn't bybass cache when loading style sheet
+// contents (bug 978688).
+
+const TEST_URL = TEST_BASE_HTTP + "doc_uncached.html";
+
+add_task(function* () {
+ info("Opening netmonitor");
+ let tab = yield addTab("about:blank");
+ let target = TargetFactory.forTab(tab);
+ let toolbox = yield gDevTools.showToolbox(target, "netmonitor");
+ let netmonitor = toolbox.getPanel("netmonitor");
+ netmonitor._view.RequestsMenu.lazyUpdate = false;
+
+ info("Navigating to test page");
+ yield navigateTo(TEST_URL);
+
+ info("Opening Style Editor");
+ let styleeditor = yield toolbox.selectTool("styleeditor");
+
+ info("Waiting for the source to be loaded.");
+ yield styleeditor.UI.editors[0].getSourceEditor();
+
+ info("Checking Netmonitor contents.");
+ let attachments = [];
+ for (let item of netmonitor._view.RequestsMenu) {
+ if (item.attachment.url.endsWith("doc_uncached.css")) {
+ attachments.push(item.attachment);
+ }
+ }
+
+ is(attachments.length, 2,
+ "Got two requests for doc_uncached.css after Style Editor was loaded.");
+ ok(attachments[1].fromCache,
+ "Second request was loaded from browser cache");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_filesave.js b/devtools/client/styleeditor/test/browser_styleeditor_filesave.js
new file mode 100644
index 000000000..b04b74c80
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_filesave.js
@@ -0,0 +1,99 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that 'Save' function works.
+
+const TESTCASE_URI_HTML = TEST_BASE_HTTP + "simple.html";
+const TESTCASE_URI_CSS = TEST_BASE_HTTP + "simple.css";
+
+var tempScope = {};
+Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
+Components.utils.import("resource://gre/modules/NetUtil.jsm", tempScope);
+var FileUtils = tempScope.FileUtils;
+var NetUtil = tempScope.NetUtil;
+
+add_task(function* () {
+ let htmlFile = yield copy(TESTCASE_URI_HTML, "simple.html");
+ yield copy(TESTCASE_URI_CSS, "simple.css");
+ let uri = Services.io.newFileURI(htmlFile);
+ let filePath = uri.resolve("");
+
+ let { ui } = yield openStyleEditorForURL(filePath);
+
+ let editor = ui.editors[0];
+ yield editor.getSourceEditor();
+
+ info("Editing the style sheet.");
+ let dirty = editor.sourceEditor.once("dirty-change");
+ let beginCursor = {line: 0, ch: 0};
+ editor.sourceEditor.replaceText("DIRTY TEXT", beginCursor, beginCursor);
+
+ yield dirty;
+
+ is(editor.sourceEditor.isClean(), false, "Editor is dirty.");
+ ok(editor.summary.classList.contains("unsaved"),
+ "Star icon is present in the corresponding summary.");
+
+ info("Saving the changes.");
+ dirty = editor.sourceEditor.once("dirty-change");
+
+ editor.saveToFile(null, function (file) {
+ ok(file, "file should get saved directly when using a file:// URI");
+ });
+
+ yield dirty;
+
+ is(editor.sourceEditor.isClean(), true, "Editor is clean.");
+ ok(!editor.summary.classList.contains("unsaved"),
+ "Star icon is not present in the corresponding summary.");
+});
+
+function copy(srcChromeURL, destFileName) {
+ let deferred = defer();
+ let destFile = FileUtils.getFile("ProfD", [destFileName]);
+ write(read(srcChromeURL), destFile, deferred.resolve);
+
+ return deferred.promise;
+}
+
+function read(srcChromeURL) {
+ let scriptableStream = Cc["@mozilla.org/scriptableinputstream;1"]
+ .getService(Ci.nsIScriptableInputStream);
+
+ let channel = NetUtil.newChannel({
+ uri: srcChromeURL,
+ loadUsingSystemPrincipal: true
+ });
+ let input = channel.open2();
+ scriptableStream.init(input);
+
+ let data = "";
+ while (input.available()) {
+ data = data.concat(scriptableStream.read(input.available()));
+ }
+ scriptableStream.close();
+ input.close();
+
+ return data;
+}
+
+function write(data, file, callback) {
+ let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
+ .createInstance(Ci.nsIScriptableUnicodeConverter);
+
+ converter.charset = "UTF-8";
+
+ let istream = converter.convertToInputStream(data);
+ let ostream = FileUtils.openSafeFileOutputStream(file);
+
+ NetUtil.asyncCopy(istream, ostream, function (status) {
+ if (!Components.isSuccessCode(status)) {
+ info("Couldn't write to " + file.path);
+ return;
+ }
+
+ callback(file);
+ });
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_highlight-selector.js b/devtools/client/styleeditor/test/browser_styleeditor_highlight-selector.js
new file mode 100644
index 000000000..8effbf208
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_highlight-selector.js
@@ -0,0 +1,48 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that hovering over a simple selector in the style-editor requests the
+// highlighting of the corresponding nodes
+
+const TEST_URL = "data:text/html;charset=utf8," +
+ "<style>div{color:red}</style><div>highlighter test</div>";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TEST_URL);
+ let editor = ui.editors[0];
+
+ // Mock the highlighter so we can locally assert that things happened
+ // correctly instead of accessing the highlighter elements
+ editor.highlighter = {
+ isShown: false,
+ options: null,
+
+ show: function (node, options) {
+ this.isShown = true;
+ this.options = options;
+ return promise.resolve();
+ },
+
+ hide: function () {
+ this.isShown = false;
+ }
+ };
+
+ info("Expecting a node-highlighted event");
+ let onHighlighted = editor.once("node-highlighted");
+
+ info("Simulate a mousemove event on the div selector");
+ editor._onMouseMove({clientX: 56, clientY: 10});
+ yield onHighlighted;
+
+ ok(editor.highlighter.isShown, "The highlighter is now shown");
+ is(editor.highlighter.options.selector, "div", "The selector is correct");
+
+ info("Simulate a mousemove event elsewhere in the editor");
+ editor._onMouseMove({clientX: 16, clientY: 0});
+
+ ok(!editor.highlighter.isShown, "The highlighter is now hidden");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_import.js b/devtools/client/styleeditor/test/browser_styleeditor_import.js
new file mode 100644
index 000000000..f31f72ce7
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_import.js
@@ -0,0 +1,55 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the import button in the UI works.
+
+// http rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+
+var tempScope = {};
+Components.utils.import("resource://gre/modules/FileUtils.jsm", tempScope);
+var FileUtils = tempScope.FileUtils;
+
+const FILENAME = "styleeditor-import-test.css";
+const SOURCE = "body{background:red;}";
+
+add_task(function* () {
+ let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ let added = ui.once("editor-added");
+ importSheet(ui, panel.panelWindow);
+
+ info("Waiting for editor to be added for the imported sheet.");
+ let editor = yield added;
+
+ is(editor.savedFile.leafName, FILENAME,
+ "imported stylesheet will be saved directly into the same file");
+ is(editor.friendlyName, FILENAME,
+ "imported stylesheet has the same name as the filename");
+});
+
+function importSheet(ui, panelWindow) {
+ // create file to import first
+ let file = FileUtils.getFile("ProfD", [FILENAME]);
+ let ostream = FileUtils.openSafeFileOutputStream(file);
+ let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
+ .createInstance(Ci.nsIScriptableUnicodeConverter);
+ converter.charset = "UTF-8";
+ let istream = converter.convertToInputStream(SOURCE);
+ NetUtil.asyncCopy(istream, ostream, function () {
+ FileUtils.closeSafeFileOutputStream(ostream);
+
+ // click the import button now that the file to import is ready
+ ui._mockImportFile = file;
+
+ waitForFocus(function () {
+ let document = panelWindow.document;
+ let importButton = document.querySelector(".style-editor-importButton");
+ ok(importButton, "import button exists");
+
+ EventUtils.synthesizeMouseAtCenter(importButton, {}, panelWindow);
+ }, panelWindow);
+ });
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_import_rule.js b/devtools/client/styleeditor/test/browser_styleeditor_import_rule.js
new file mode 100644
index 000000000..46d0a0968
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_import_rule.js
@@ -0,0 +1,25 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that style editor shows sheets loaded with @import rules.
+
+// http rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTP + "import.html";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 3,
+ "there are 3 stylesheets after loading @imports");
+
+ is(ui.editors[0].styleSheet.href, TEST_BASE_HTTP + "simple.css",
+ "stylesheet 1 is simple.css");
+
+ is(ui.editors[1].styleSheet.href, TEST_BASE_HTTP + "import.css",
+ "stylesheet 2 is import.css");
+
+ is(ui.editors[2].styleSheet.href, TEST_BASE_HTTP + "import2.css",
+ "stylesheet 3 is import2.css");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_init.js b/devtools/client/styleeditor/test/browser_styleeditor_init.js
new file mode 100644
index 000000000..47a8f1e05
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_init.js
@@ -0,0 +1,45 @@
+"use strict";
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Checks that style editor contains correct stylesheets after initialization.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+const EXPECTED_SHEETS = [
+ {
+ sheetIndex: 0,
+ name: /^simple.css$/,
+ rules: 1,
+ active: true
+ }, {
+ sheetIndex: 1,
+ name: /^<.*>$/,
+ rules: 3,
+ active: false
+ }
+];
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "The UI contains two style sheets.");
+ checkSheet(ui.editors[0], EXPECTED_SHEETS[0]);
+ checkSheet(ui.editors[1], EXPECTED_SHEETS[1]);
+});
+
+function checkSheet(editor, expected) {
+ is(editor.styleSheet.styleSheetIndex, expected.sheetIndex,
+ "Style sheet has correct index.");
+
+ let summary = editor.summary;
+ let name = summary.querySelector(".stylesheet-name > label")
+ .getAttribute("value");
+ ok(expected.name.test(name), "The name '" + name + "' is correct.");
+
+ let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+ is(parseInt(ruleCount, 10), expected.rules, "the rule count is correct");
+
+ is(summary.classList.contains("splitview-active"), expected.active,
+ "The active status for this sheet is correct.");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js b/devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js
new file mode 100644
index 000000000..fcf1192b5
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_inline_friendly_names.js
@@ -0,0 +1,88 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that inline style sheets get correct names if they are saved to disk and
+// that those names survice a reload but not navigation to another page.
+
+const FIRST_TEST_PAGE = TEST_BASE_HTTP + "inline-1.html";
+const SECOND_TEST_PAGE = TEST_BASE_HTTP + "inline-2.html";
+const SAVE_PATH = "test.css";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(FIRST_TEST_PAGE);
+
+ testIndentifierGeneration(ui);
+
+ yield saveFirstInlineStyleSheet(ui);
+ yield testFriendlyNamesAfterSave(ui);
+ yield reloadPageAndWaitForStyleSheets(ui);
+ yield testFriendlyNamesAfterSave(ui);
+ yield navigateToAndWaitForStyleSheets(SECOND_TEST_PAGE, ui);
+ yield testFriendlyNamesAfterNavigation(ui);
+});
+
+function testIndentifierGeneration(ui) {
+ let fakeStyleSheetFile = {
+ "href": "http://example.com/test.css",
+ "nodeHref": "http://example.com/",
+ "styleSheetIndex": 1
+ };
+
+ let fakeInlineStyleSheet = {
+ "href": null,
+ "nodeHref": "http://example.com/",
+ "styleSheetIndex": 2
+ };
+
+ is(ui.getStyleSheetIdentifier(fakeStyleSheetFile),
+ "http://example.com/test.css",
+ "URI is the identifier of style sheet file.");
+
+ is(ui.getStyleSheetIdentifier(fakeInlineStyleSheet),
+ "inline-2-at-http://example.com/",
+ "Inline sheets are identified by their page and position in the page.");
+}
+
+function saveFirstInlineStyleSheet(ui) {
+ let deferred = defer();
+ let editor = ui.editors[0];
+
+ let destFile = FileUtils.getFile("ProfD", [SAVE_PATH]);
+
+ editor.saveToFile(destFile, function (file) {
+ ok(file, "File was correctly saved.");
+ deferred.resolve();
+ });
+
+ return deferred.promise;
+}
+
+function testFriendlyNamesAfterSave(ui) {
+ let firstEditor = ui.editors[0];
+ let secondEditor = ui.editors[1];
+
+ // The friendly name of first sheet should've been remembered, the second
+ // should not be the same (bug 969900).
+ is(firstEditor.friendlyName, SAVE_PATH,
+ "Friendly name is correct for the saved inline style sheet.");
+ isnot(secondEditor.friendlyName, SAVE_PATH,
+ "Friendly name for the second inline sheet isn't the same as the first.");
+
+ return promise.resolve(null);
+}
+
+function testFriendlyNamesAfterNavigation(ui) {
+ let firstEditor = ui.editors[0];
+ let secondEditor = ui.editors[1];
+
+ // Inline style sheets shouldn't have the name of previously saved file as the
+ // page is different.
+ isnot(firstEditor.friendlyName, SAVE_PATH,
+ "The first editor doesn't have the save path as a friendly name.");
+ isnot(secondEditor.friendlyName, SAVE_PATH,
+ "The second editor doesn't have the save path as a friendly name.");
+
+ return promise.resolve(null);
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_loading.js b/devtools/client/styleeditor/test/browser_styleeditor_loading.js
new file mode 100644
index 000000000..4657a0dce
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_loading.js
@@ -0,0 +1,36 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that style editor loads correctly.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "longload.html";
+
+add_task(function* () {
+ // launch Style Editor right when the tab is created (before load)
+ // this checks that the Style Editor still launches correctly when it is
+ // opened *while* the page is still loading. The Style Editor should not
+ // signal that it is loaded until the accompanying content page is loaded.
+ let tabAdded = addTab(TESTCASE_URI);
+ let target = TargetFactory.forTab(gBrowser.selectedTab);
+ let styleEditorLoaded = gDevTools.showToolbox(target, "styleeditor");
+
+ yield Promise.all([tabAdded, styleEditorLoaded]);
+
+ let toolbox = gDevTools.getToolbox(target);
+ let panel = toolbox.getPanel("styleeditor");
+ let { panelWindow } = panel;
+
+ let root = panelWindow.document.querySelector(".splitview-root");
+ ok(!root.classList.contains("loading"),
+ "style editor root element does not have 'loading' class name anymore");
+
+ let button = panelWindow.document.querySelector(".style-editor-newButton");
+ ok(!button.hasAttribute("disabled"),
+ "new style sheet button is enabled");
+
+ button = panelWindow.document.querySelector(".style-editor-importButton");
+ ok(!button.hasAttribute("disabled"),
+ "import button is enabled");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_loading_with_containers.js b/devtools/client/styleeditor/test/browser_styleeditor_loading_with_containers.js
new file mode 100644
index 000000000..a00628c8b
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_loading_with_containers.js
@@ -0,0 +1,63 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheets can be loaded correctly with containers
+// (bug 1282660).
+
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+const EXPECTED_SHEETS = [
+ {
+ sheetIndex: 0,
+ name: /^simple.css$/,
+ rules: 1,
+ active: true
+ }, {
+ sheetIndex: 1,
+ name: /^<.*>$/,
+ rules: 3,
+ active: false
+ }
+];
+
+add_task(function* () {
+ // Using the personal container.
+ let userContextId = 1;
+ let { tab } = yield* openTabInUserContext(TESTCASE_URI, userContextId);
+ let { ui } = yield openStyleEditor(tab);
+
+ is(ui.editors.length, 2, "The UI contains two style sheets.");
+ checkSheet(ui.editors[0], EXPECTED_SHEETS[0]);
+ checkSheet(ui.editors[1], EXPECTED_SHEETS[1]);
+});
+
+function* openTabInUserContext(uri, userContextId) {
+ // Open the tab in the correct userContextId.
+ let tab = gBrowser.addTab(uri, {userContextId});
+
+ // Select tab and make sure its browser is focused.
+ gBrowser.selectedTab = tab;
+ tab.ownerDocument.defaultView.focus();
+
+ let browser = gBrowser.getBrowserForTab(tab);
+ yield BrowserTestUtils.browserLoaded(browser);
+ return {tab, browser};
+}
+
+function checkSheet(editor, expected) {
+ is(editor.styleSheet.styleSheetIndex, expected.sheetIndex,
+ "Style sheet has correct index.");
+
+ let summary = editor.summary;
+ let name = summary.querySelector(".stylesheet-name > label")
+ .getAttribute("value");
+ ok(expected.name.test(name), "The name '" + name + "' is correct.");
+
+ let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+ is(parseInt(ruleCount, 10), expected.rules, "the rule count is correct");
+
+ is(summary.classList.contains("splitview-active"), expected.active,
+ "The active status for this sheet is correct.");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
new file mode 100644
index 000000000..15895fac4
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
@@ -0,0 +1,143 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
+const MEDIA_PREF = "devtools.styleeditor.showMediaSidebar";
+
+const RESIZE = 300;
+const LABELS = ["not all", "all", "(max-width: 400px)",
+ "(min-height: 300px) and (max-height: 320px)",
+ "(max-width: 600px)"];
+const LINE_NOS = [1, 7, 19, 25, 31];
+const NEW_RULE = "\n@media (max-width: 600px) { div { color: blue; } }";
+
+waitForExplicitFinish();
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "correct number of editors");
+
+ // Test first plain css editor
+ let plainEditor = ui.editors[0];
+ yield openEditor(plainEditor);
+ testPlainEditor(plainEditor);
+
+ // Test editor with @media rules
+ let mediaEditor = ui.editors[1];
+ yield openEditor(mediaEditor);
+ testMediaEditor(mediaEditor);
+
+ // Test that sidebar hides when flipping pref
+ yield testShowHide(ui, mediaEditor);
+
+ // Test adding a rule updates the list
+ yield testMediaRuleAdded(ui, mediaEditor);
+
+ // Test resizing and seeing @media matching state change
+ let originalWidth = window.outerWidth;
+ let originalHeight = window.outerHeight;
+
+ let onMatchesChange = listenForMediaChange(ui);
+ window.resizeTo(RESIZE, RESIZE);
+ yield onMatchesChange;
+
+ testMediaMatchChanged(mediaEditor);
+
+ window.resizeTo(originalWidth, originalHeight);
+});
+
+function testPlainEditor(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ is(sidebar.hidden, true, "sidebar is hidden on editor without @media");
+}
+
+function testMediaEditor(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ is(sidebar.hidden, false, "sidebar is showing on editor with @media");
+
+ let entries = [...sidebar.querySelectorAll(".media-rule-label")];
+ is(entries.length, 4, "four @media rules displayed in sidebar");
+
+ testRule(entries[0], LABELS[0], false, LINE_NOS[0]);
+ testRule(entries[1], LABELS[1], true, LINE_NOS[1]);
+ testRule(entries[2], LABELS[2], false, LINE_NOS[2]);
+ testRule(entries[3], LABELS[3], false, LINE_NOS[3]);
+}
+
+function testMediaMatchChanged(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+
+ let cond = sidebar.querySelectorAll(".media-rule-condition")[2];
+ is(cond.textContent, "(max-width: 400px)",
+ "third rule condition text is correct");
+ ok(!cond.classList.contains("media-condition-unmatched"),
+ "media rule is now matched after resizing");
+}
+
+function* testShowHide(UI, editor) {
+ let sidebarChange = listenForMediaChange(UI);
+ Services.prefs.setBoolPref(MEDIA_PREF, false);
+ yield sidebarChange;
+
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ is(sidebar.hidden, true, "sidebar is hidden after flipping pref");
+
+ sidebarChange = listenForMediaChange(UI);
+ Services.prefs.clearUserPref(MEDIA_PREF);
+ yield sidebarChange;
+
+ is(sidebar.hidden, false, "sidebar is showing after flipping pref back");
+}
+
+function* testMediaRuleAdded(UI, editor) {
+ yield editor.getSourceEditor();
+ let text = editor.sourceEditor.getText();
+ text += NEW_RULE;
+
+ let listChange = listenForMediaChange(UI);
+ editor.sourceEditor.setText(text);
+ yield listChange;
+
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ let entries = [...sidebar.querySelectorAll(".media-rule-label")];
+ is(entries.length, 5, "five @media rules after changing text");
+
+ testRule(entries[4], LABELS[4], false, LINE_NOS[4]);
+}
+
+function testRule(rule, text, matches, lineno) {
+ let cond = rule.querySelector(".media-rule-condition");
+ is(cond.textContent, text, "media label is correct for " + text);
+
+ let matched = !cond.classList.contains("media-condition-unmatched");
+ ok(matches ? matched : !matched,
+ "media rule is " + (matches ? "matched" : "unmatched"));
+
+ let line = rule.querySelector(".media-rule-line");
+ is(line.textContent, ":" + lineno, "correct line number shown");
+}
+
+/* Helpers */
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function listenForMediaChange(UI) {
+ let deferred = defer();
+ UI.once("media-list-changed", () => {
+ deferred.resolve();
+ });
+ return deferred.promise;
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
new file mode 100644
index 000000000..85c41b9dc
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
@@ -0,0 +1,144 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* Tests responsive mode links for
+ * @media sidebar width and height related conditions */
+
+const asyncStorage = require("devtools/shared/async-storage");
+Services.prefs.setCharPref("devtools.devices.url",
+ "http://example.com/browser/devtools/client/responsive.html/test/browser/devices.json");
+
+registerCleanupFunction(() => {
+ Services.prefs.clearUserPref("devtools.devices.url");
+ asyncStorage.removeItem("devtools.devices.url_cache");
+});
+
+const mgr = "resource://devtools/client/responsivedesign/responsivedesign.jsm";
+const {ResponsiveUIManager} = Cu.import(mgr, {});
+const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
+const responsiveModeToggleClass = ".media-responsive-mode-toggle";
+
+add_task(function* () {
+ let {ui} = yield openStyleEditorForURL(TESTCASE_URI);
+
+ let editor = ui.editors[1];
+ yield openEditor(editor);
+
+ let tab = gBrowser.selectedTab;
+ testNumberOfLinks(editor);
+ yield testMediaLink(editor, tab, ui, 2, "width", 400);
+ yield testMediaLink(editor, tab, ui, 3, "height", 300);
+
+ yield closeRDM(tab, ui);
+ doFinalChecks(editor);
+});
+
+function testNumberOfLinks(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ let conditions = sidebar.querySelectorAll(".media-rule-condition");
+
+ info("Testing if media rules have the appropriate number of links");
+ ok(!conditions[0].querySelector(responsiveModeToggleClass),
+ "There should be no links in the first media rule.");
+ ok(!conditions[1].querySelector(responsiveModeToggleClass),
+ "There should be no links in the second media rule.");
+ ok(conditions[2].querySelector(responsiveModeToggleClass),
+ "There should be 1 responsive mode link in the media rule");
+ is(conditions[3].querySelectorAll(responsiveModeToggleClass).length, 2,
+ "There should be 2 responsive mode links in the media rule");
+}
+
+function* testMediaLink(editor, tab, ui, itemIndex, type, value) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ let conditions = sidebar.querySelectorAll(".media-rule-condition");
+
+ let onMediaChange = once(ui, "media-list-changed");
+
+ info("Launching responsive mode");
+ conditions[itemIndex].querySelector(responsiveModeToggleClass).click();
+
+ let rdmUI = ResponsiveUIManager.getResponsiveUIForTab(tab);
+ let onContentResize = waitForResizeTo(rdmUI, type, value);
+ rdmUI.transitionsEnabled = false;
+
+ info("Waiting for the @media list to update");
+ yield onMediaChange;
+ yield onContentResize;
+
+ ok(ResponsiveUIManager.isActiveForTab(tab),
+ "Responsive mode should be active.");
+ conditions = sidebar.querySelectorAll(".media-rule-condition");
+ ok(!conditions[itemIndex].classList.contains("media-condition-unmatched"),
+ "media rule should now be matched after responsive mode is active");
+
+ let dimension = (yield getSizing(rdmUI))[type];
+ is(dimension, value, `${type} should be properly set.`);
+}
+
+function* closeRDM(tab, ui) {
+ info("Closing responsive mode");
+ ResponsiveUIManager.toggle(window, tab);
+ let onMediaChange = waitForNEvents(ui, "media-list-changed", 2);
+ yield once(ResponsiveUIManager, "off");
+ yield onMediaChange;
+ ok(!ResponsiveUIManager.isActiveForTab(tab),
+ "Responsive mode should no longer be active.");
+}
+
+function doFinalChecks(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ let conditions = sidebar.querySelectorAll(".media-rule-condition");
+ conditions = sidebar.querySelectorAll(".media-rule-condition");
+ ok(conditions[2].classList.contains("media-condition-unmatched"),
+ "The width condition should now be unmatched");
+ ok(conditions[3].classList.contains("media-condition-unmatched"),
+ "The height condition should now be unmatched");
+}
+
+/* Helpers */
+function waitForResizeTo(rdmUI, type, value) {
+ return new Promise(resolve => {
+ let onResize = (_, data) => {
+ if (data[type] != value) {
+ return;
+ }
+ ResponsiveUIManager.off("content-resize", onResize);
+ if (rdmUI.off) {
+ rdmUI.off("content-resize", onResize);
+ }
+ info(`Got content-resize to a ${type} of ${value}`);
+ resolve();
+ };
+ info(`Waiting for content-resize to a ${type} of ${value}`);
+ // Old RDM emits on manager
+ ResponsiveUIManager.on("content-resize", onResize);
+ // New RDM emits on ui
+ if (rdmUI.on) {
+ rdmUI.on("content-resize", onResize);
+ }
+ });
+}
+
+function* getSizing(rdmUI) {
+ let browser = rdmUI.getViewportBrowser();
+ let sizing = yield ContentTask.spawn(browser, {}, function* () {
+ return {
+ width: content.innerWidth,
+ height: content.innerHeight
+ };
+ });
+ return sizing;
+}
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js
new file mode 100644
index 000000000..9214d93fd
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_sourcemaps.js
@@ -0,0 +1,71 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules-sourcemaps.html";
+const MAP_PREF = "devtools.styleeditor.source-maps-enabled";
+
+const LABELS = ["screen and (max-width: 320px)",
+ "screen and (min-width: 1200px)"];
+const LINE_NOS = [5, 8];
+
+waitForExplicitFinish();
+
+add_task(function* () {
+ Services.prefs.setBoolPref(MAP_PREF, true);
+
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ yield listenForMediaChange(ui);
+
+ is(ui.editors.length, 1, "correct number of editors");
+
+ // Test editor with @media rules
+ let mediaEditor = ui.editors[0];
+ yield openEditor(mediaEditor);
+ testMediaEditor(mediaEditor);
+
+ Services.prefs.clearUserPref(MAP_PREF);
+});
+
+function testMediaEditor(editor) {
+ let sidebar = editor.details.querySelector(".stylesheet-sidebar");
+ is(sidebar.hidden, false, "sidebar is showing on editor with @media");
+
+ let entries = [...sidebar.querySelectorAll(".media-rule-label")];
+ is(entries.length, 2, "two @media rules displayed in sidebar");
+
+ testRule(entries[0], LABELS[0], LINE_NOS[0]);
+ testRule(entries[1], LABELS[1], LINE_NOS[1]);
+}
+
+function testRule(rule, text, lineno) {
+ let cond = rule.querySelector(".media-rule-condition");
+ is(cond.textContent, text, "media label is correct for " + text);
+
+ let line = rule.querySelector(".media-rule-line");
+ is(line.textContent, ":" + lineno, "correct line number shown");
+}
+
+/* Helpers */
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function listenForMediaChange(UI) {
+ let deferred = defer();
+ UI.once("media-list-changed", () => {
+ deferred.resolve();
+ });
+ return deferred.promise;
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_missing_stylesheet.js b/devtools/client/styleeditor/test/browser_styleeditor_missing_stylesheet.js
new file mode 100644
index 000000000..e7511c914
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_missing_stylesheet.js
@@ -0,0 +1,30 @@
+"use strict";
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Checks that the style editor manages to finalize its stylesheet loading phase
+// even if one stylesheet is missing, and that an error message is displayed.
+
+const TESTCASE_URI = TEST_BASE + "missing.html";
+
+add_task(function* () {
+ let { ui, toolbox, panel } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ // Note that we're not testing for a specific number of stylesheet editors
+ // below because the test-page is loaded with chrome:// URL and, right now,
+ // that means UA stylesheets are shown. So we avoid hardcoding the number of
+ // stylesheets here.
+ ok(ui.editors.length, "The UI contains style sheets.");
+
+ let rootEl = panel.panelWindow.document.getElementById("style-editor-chrome");
+ ok(!rootEl.classList.contains("loading"), "The loading indicator is hidden");
+
+ let notifBox = toolbox.getNotificationBox();
+ let notif = notifBox.getCurrentNotification();
+ ok(notif, "The notification box contains a message");
+ ok(notif.label.indexOf("Style sheet could not be loaded") !== -1,
+ "The error message is the correct one");
+ ok(notif.label.indexOf("missing-stylesheet.css") !== -1,
+ "The error message contains the missing stylesheet's URL");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_navigate.js b/devtools/client/styleeditor/test/browser_styleeditor_navigate.js
new file mode 100644
index 000000000..4d44fca70
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_navigate.js
@@ -0,0 +1,32 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that selected sheet and cursor position is reset during navigation.
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+const NEW_URI = TEST_BASE_HTTPS + "media.html";
+
+const LINE_NO = 5;
+const COL_NO = 3;
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "Two sheets present after load.");
+
+ info("Selecting the second editor");
+ yield ui.selectStyleSheet(ui.editors[1].styleSheet, LINE_NO, COL_NO);
+
+ yield navigateToAndWaitForStyleSheets(NEW_URI, ui);
+
+ info("Waiting for source editor to be ready.");
+ yield ui.editors[0].getSourceEditor();
+
+ is(ui.selectedEditor, ui.editors[0], "first editor is selected");
+
+ let {line, ch} = ui.selectedEditor.sourceEditor.getCursor();
+ is(line, 0, "first line is selected");
+ is(ch, 0, "first column is selected");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_new.js b/devtools/client/styleeditor/test/browser_styleeditor_new.js
new file mode 100644
index 000000000..1fc5b4638
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_new.js
@@ -0,0 +1,113 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that new sheets can be added and edited.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+
+const TESTCASE_CSS_SOURCE = "body{background-color:red;";
+
+add_task(function* () {
+ let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ let editor = yield createNew(ui, panel.panelWindow);
+ yield testInitialState(editor);
+
+ let originalHref = editor.styleSheet.href;
+ let waitForPropertyChange = onPropertyChange(editor);
+
+ yield typeInEditor(editor, panel.panelWindow);
+
+ yield waitForPropertyChange;
+
+ testUpdated(editor, originalHref);
+});
+
+function createNew(ui, panelWindow) {
+ info("Creating a new stylesheet now");
+ let deferred = defer();
+
+ ui.once("editor-added", (ev, editor) => {
+ editor.getSourceEditor().then(deferred.resolve);
+ });
+
+ waitForFocus(function () {
+ // create a new style sheet
+ let newButton = panelWindow.document
+ .querySelector(".style-editor-newButton");
+ ok(newButton, "'new' button exists");
+
+ EventUtils.synthesizeMouseAtCenter(newButton, {}, panelWindow);
+ }, panelWindow);
+
+ return deferred.promise;
+}
+
+function onPropertyChange(editor) {
+ let deferred = defer();
+
+ editor.styleSheet.on("property-change", function onProp(property) {
+ // wait for text to be entered fully
+ let text = editor.sourceEditor.getText();
+ if (property == "ruleCount" && text == TESTCASE_CSS_SOURCE + "}") {
+ editor.styleSheet.off("property-change", onProp);
+ deferred.resolve();
+ }
+ });
+
+ return deferred.promise;
+}
+
+function* testInitialState(editor) {
+ info("Testing the initial state of the new editor");
+
+ let summary = editor.summary;
+
+ ok(editor.sourceLoaded, "new editor is loaded when attached");
+ ok(editor.isNew, "new editor has isNew flag");
+
+ ok(editor.sourceEditor.hasFocus(), "new editor has focus");
+
+ summary = editor.summary;
+ let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+ is(parseInt(ruleCount, 10), 0, "new editor initially shows 0 rules");
+
+ let color = yield getComputedStyleProperty({
+ selector: "body",
+ name: "background-color"
+ });
+ is(color, "rgb(255, 255, 255)",
+ "content's background color is initially white");
+}
+
+function typeInEditor(editor, panelWindow) {
+ let deferred = defer();
+
+ waitForFocus(function () {
+ for (let c of TESTCASE_CSS_SOURCE) {
+ EventUtils.synthesizeKey(c, {}, panelWindow);
+ }
+ ok(editor.unsaved, "new editor has unsaved flag");
+
+ deferred.resolve();
+ }, panelWindow);
+
+ return deferred.promise;
+}
+
+function testUpdated(editor, originalHref) {
+ info("Testing the state of the new editor after editing it");
+
+ is(editor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
+ "rule bracket has been auto-closed");
+
+ let ruleCount = editor.summary.querySelector(".stylesheet-rule-count")
+ .textContent;
+ is(parseInt(ruleCount, 10), 1,
+ "new editor shows 1 rule after modification");
+
+ is(editor.styleSheet.href, originalHref,
+ "style sheet href did not change");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js b/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
new file mode 100644
index 000000000..c01b7c572
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
@@ -0,0 +1,28 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that 'no styles' indicator is shown if a page doesn't contain any style
+// sheets.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "nostyle.html";
+
+add_task(function* () {
+ let { panel } = yield openStyleEditorForURL(TESTCASE_URI);
+ let { panelWindow } = panel;
+
+ let root = panelWindow.document.querySelector(".splitview-root");
+ ok(!root.classList.contains("loading"),
+ "style editor root element does not have 'loading' class name anymore");
+
+ ok(root.querySelector(".empty.placeholder"), "showing 'no style' indicator");
+
+ let button = panelWindow.document.querySelector(".style-editor-newButton");
+ ok(!button.hasAttribute("disabled"),
+ "new style sheet button is enabled");
+
+ button = panelWindow.document.querySelector(".style-editor-importButton");
+ ok(!button.hasAttribute("disabled"),
+ "import button is enabled");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_opentab.js b/devtools/client/styleeditor/test/browser_styleeditor_opentab.js
new file mode 100644
index 000000000..c16e9d51b
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_opentab.js
@@ -0,0 +1,121 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// A test to check the 'Open Link in new tab' functionality in the
+// context menu item for stylesheets (bug 992947).
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ yield rightClickStyleSheet(ui, ui.editors[0]);
+ is(ui._openLinkNewTabItem.getAttribute("disabled"), "false",
+ "The menu item is not disabled");
+ is(ui._openLinkNewTabItem.getAttribute("hidden"), "false",
+ "The menu item is not hidden");
+
+ let url = "https://example.com/browser/devtools/client/styleeditor/test/" +
+ "simple.css";
+ is(ui._contextMenuStyleSheet.href, url, "Correct URL for sheet");
+
+ let originalOpenUILinkIn = ui._window.openUILinkIn;
+ let tabOpenedDefer = defer();
+
+ ui._window.openUILinkIn = newUrl => {
+ // Reset the actual openUILinkIn function before proceeding.
+ ui._window.openUILinkIn = originalOpenUILinkIn;
+
+ is(newUrl, url, "The correct tab has been opened");
+ tabOpenedDefer.resolve();
+ };
+
+ ui._openLinkNewTabItem.click();
+
+ info(`Waiting for a tab to open - ${url}`);
+ yield tabOpenedDefer.promise;
+
+ yield rightClickInlineStyleSheet(ui, ui.editors[1]);
+ is(ui._openLinkNewTabItem.getAttribute("disabled"), "true",
+ "The menu item is disabled");
+ is(ui._openLinkNewTabItem.getAttribute("hidden"), "false",
+ "The menu item is not hidden");
+
+ yield rightClickNoStyleSheet(ui);
+ is(ui._openLinkNewTabItem.getAttribute("hidden"), "true",
+ "The menu item is not hidden");
+});
+
+function onPopupShow(contextMenu) {
+ let deferred = defer();
+ contextMenu.addEventListener("popupshown", function onpopupshown() {
+ contextMenu.removeEventListener("popupshown", onpopupshown);
+ deferred.resolve();
+ });
+ return deferred.promise;
+}
+
+function onPopupHide(contextMenu) {
+ let deferred = defer();
+ contextMenu.addEventListener("popuphidden", function popuphidden() {
+ contextMenu.removeEventListener("popuphidden", popuphidden);
+ deferred.resolve();
+ });
+ return deferred.promise;
+}
+
+function rightClickStyleSheet(ui, editor) {
+ let deferred = defer();
+
+ onPopupShow(ui._contextMenu).then(()=> {
+ onPopupHide(ui._contextMenu).then(() => {
+ deferred.resolve();
+ });
+ ui._contextMenu.hidePopup();
+ });
+
+ EventUtils.synthesizeMouseAtCenter(
+ editor.summary.querySelector(".stylesheet-name"),
+ {button: 2, type: "contextmenu"},
+ ui._window);
+
+ return deferred.promise;
+}
+
+function rightClickInlineStyleSheet(ui, editor) {
+ let deferred = defer();
+
+ onPopupShow(ui._contextMenu).then(()=> {
+ onPopupHide(ui._contextMenu).then(() => {
+ deferred.resolve();
+ });
+ ui._contextMenu.hidePopup();
+ });
+
+ EventUtils.synthesizeMouseAtCenter(
+ editor.summary.querySelector(".stylesheet-name"),
+ {button: 2, type: "contextmenu"},
+ ui._window);
+
+ return deferred.promise;
+}
+
+function rightClickNoStyleSheet(ui) {
+ let deferred = defer();
+
+ onPopupShow(ui._contextMenu).then(()=> {
+ onPopupHide(ui._contextMenu).then(() => {
+ deferred.resolve();
+ });
+ ui._contextMenu.hidePopup();
+ });
+
+ EventUtils.synthesizeMouseAtCenter(
+ ui._panelDoc.querySelector("#splitview-tpl-summary-stylesheet"),
+ {button: 2, type: "contextmenu"},
+ ui._window);
+
+ return deferred.promise;
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_pretty.js b/devtools/client/styleeditor/test/browser_styleeditor_pretty.js
new file mode 100644
index 000000000..212cab12d
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_pretty.js
@@ -0,0 +1,68 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that minified sheets are automatically prettified but other are left
+// untouched.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "minified.html";
+
+/*
+ body {
+ background:white;
+ }
+ div {
+ font-size:4em;
+ color:red
+ }
+ span {
+ color:green;
+ }
+*/
+const PRETTIFIED_SOURCE = "" +
+"body \{\r?\n" +
+ "\tbackground\:white;\r?\n" +
+"\}\r?\n" +
+"div \{\r?\n" +
+ "\tfont\-size\:4em;\r?\n" +
+ "\tcolor\:red\r?\n" +
+"\}\r?\n" +
+"span \{\r?\n" +
+ "\tcolor\:green;\r?\n" +
+"\}\r?\n";
+
+/*
+ body { background: red; }
+ div {
+ font-size: 5em;
+ color: red
+ }
+*/
+const ORIGINAL_SOURCE = "" +
+"body \{ background\: red; \}\r?\n" +
+"div \{\r?\n" +
+ "font\-size\: 5em;\r?\n" +
+ "color\: red\r?\n" +
+"\}";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ is(ui.editors.length, 2, "Two sheets present.");
+
+ info("Testing minified style sheet.");
+ let editor = yield ui.editors[0].getSourceEditor();
+
+ let prettifiedSourceRE = new RegExp(PRETTIFIED_SOURCE);
+ ok(prettifiedSourceRE.test(editor.sourceEditor.getText()),
+ "minified source has been prettified automatically");
+
+ info("Selecting second, non-minified style sheet.");
+ yield ui.selectStyleSheet(ui.editors[1].styleSheet);
+
+ editor = ui.editors[1];
+
+ let originalSourceRE = new RegExp(ORIGINAL_SOURCE);
+ ok(originalSourceRE.test(editor.sourceEditor.getText()),
+ "non-minified source has been left untouched");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_private_perwindowpb.js b/devtools/client/styleeditor/test/browser_styleeditor_private_perwindowpb.js
new file mode 100644
index 000000000..4381704e9
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_private_perwindowpb.js
@@ -0,0 +1,85 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// This test makes sure that the style editor does not store any
+// content CSS files in the permanent cache when opened from PB mode.
+
+const TEST_URL = "http://" + TEST_HOST + "/browser/devtools/client/" +
+ "styleeditor/test/test_private.html";
+const {LoadContextInfo} =
+ Cu.import("resource://gre/modules/LoadContextInfo.jsm", {});
+const cache = Cc["@mozilla.org/netwerk/cache-storage-service;1"]
+ .getService(Ci.nsICacheStorageService);
+
+add_task(function* () {
+ info("Opening a new private window");
+ let win = OpenBrowserWindow({private: true});
+ yield waitForDelayedStartupFinished(win);
+
+ info("Clearing the browser cache");
+ cache.clear();
+
+ let { toolbox, ui } = yield openStyleEditorForURL(TEST_URL, win);
+
+ is(ui.editors.length, 1, "The style editor contains one sheet.");
+ let editor = ui.editors[0];
+
+ yield editor.getSourceEditor();
+ yield checkDiskCacheFor(TEST_HOST);
+
+ yield toolbox.destroy();
+
+ let onUnload = new Promise(done => {
+ win.addEventListener("unload", function listener(event) {
+ if (event.target == win.document) {
+ win.removeEventListener("unload", listener);
+ done();
+ }
+ });
+ });
+ win.close();
+ yield onUnload;
+});
+
+function checkDiskCacheFor(host) {
+ let foundPrivateData = false;
+ let deferred = defer();
+
+ Visitor.prototype = {
+ onCacheStorageInfo: function (num) {
+ info("disk storage contains " + num + " entries");
+ },
+ onCacheEntryInfo: function (uri) {
+ let urispec = uri.asciiSpec;
+ info(urispec);
+ foundPrivateData |= urispec.includes(host);
+ },
+ onCacheEntryVisitCompleted: function () {
+ is(foundPrivateData, false, "web content present in disk cache");
+ deferred.resolve();
+ }
+ };
+ function Visitor() {}
+
+ let storage = cache.diskCacheStorage(LoadContextInfo.default, false);
+ storage.asyncVisitStorage(new Visitor(),
+ /* Do walk entries */
+ true);
+
+ return deferred.promise;
+}
+
+function waitForDelayedStartupFinished(win) {
+ let deferred = defer();
+ Services.obs.addObserver(function observer(subject, topic) {
+ if (win == subject) {
+ Services.obs.removeObserver(observer, topic);
+ deferred.resolve();
+ }
+ }, "browser-delayed-startup-finished", false);
+
+ return deferred.promise;
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_reload.js b/devtools/client/styleeditor/test/browser_styleeditor_reload.js
new file mode 100644
index 000000000..a4991fb44
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_reload.js
@@ -0,0 +1,34 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that selected sheet and cursor position persists during reload.
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+const LINE_NO = 5;
+const COL_NO = 3;
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "Two sheets present after load.");
+
+ info("Selecting the second editor");
+ yield ui.selectStyleSheet(ui.editors[1].styleSheet, LINE_NO, COL_NO);
+
+ yield reloadPageAndWaitForStyleSheets(ui);
+
+ is(ui.editors.length, 2, "Two sheets present after reload.");
+
+ info("Waiting for source editor to be ready.");
+ yield ui.editors[1].getSourceEditor();
+
+ is(ui.selectedEditor, ui.editors[1],
+ "second editor is selected after reload");
+
+ let {line, ch} = ui.selectedEditor.sourceEditor.getCursor();
+ is(line, LINE_NO, "correct line selected");
+ is(ch, COL_NO, "correct column selected");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_scroll.js b/devtools/client/styleeditor/test/browser_styleeditor_scroll.js
new file mode 100644
index 000000000..6524c1403
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_scroll.js
@@ -0,0 +1,91 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that editor scrolls to correct line if it's selected with
+// * selectStyleSheet (specified line)
+// * click on the sidebar item (line before the editor was unselected)
+// See bug 1148086.
+
+const SIMPLE = TEST_BASE_HTTP + "simple.css";
+const LONG = TEST_BASE_HTTP + "doc_long.css";
+const DOCUMENT_WITH_LONG_SHEET = "data:text/html;charset=UTF-8," +
+ encodeURIComponent(
+ ["<!DOCTYPE html>",
+ "<html>",
+ " <head>",
+ " <title>Editor scroll test page</title>",
+ ' <link rel="stylesheet" type="text/css" href="' + SIMPLE + '">',
+ ' <link rel="stylesheet" type="text/css" href="' + LONG + '">',
+ " </head>",
+ " <body>Editor scroll test page</body>",
+ "</html>"
+ ].join("\n"));
+const LINE_TO_SELECT = 201;
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(DOCUMENT_WITH_LONG_SHEET);
+
+ is(ui.editors.length, 2, "Two editors present.");
+
+ let simpleEditor = ui.editors[0];
+ let longEditor = ui.editors[1];
+
+ info(`Selecting doc_long.css and scrolling to line ${LINE_TO_SELECT}`);
+
+ // We need to wait for editor-selected if we want to check the scroll
+ // position as scrolling occurs after selectStyleSheet resolves but before the
+ // event is emitted.
+ let selectEventPromise = waitForEditorToBeSelected(longEditor, ui);
+ ui.selectStyleSheet(longEditor.styleSheet, LINE_TO_SELECT);
+ yield selectEventPromise;
+
+ info("Checking that the correct line is visible after initial load");
+
+ let { from, to } = longEditor.sourceEditor.getViewport();
+ info(`Lines ${from}-${to} are visible (expected ${LINE_TO_SELECT}).`);
+
+ ok(from <= LINE_TO_SELECT, "The editor scrolled too much.");
+ ok(to >= LINE_TO_SELECT, "The editor scrolled too little.");
+
+ let initialScrollTop = longEditor.sourceEditor.getScrollInfo().top;
+ info(`Storing scrollTop = ${initialScrollTop} for later comparison.`);
+
+ info("Selecting the first editor (simple.css)");
+ yield ui.selectStyleSheet(simpleEditor.styleSheet);
+
+ info("Selecting doc_long.css again.");
+ selectEventPromise = waitForEditorToBeSelected(longEditor, ui);
+
+ // Can't use ui.selectStyleSheet here as it will scroll the editor back to top
+ // and we want to check that the previous scroll position is restored.
+ let summary = yield ui.getEditorSummary(longEditor);
+ ui._view.activeSummary = summary;
+
+ info("Waiting for doc_long.css to be selected.");
+ yield selectEventPromise;
+
+ let scrollTop = longEditor.sourceEditor.getScrollInfo().top;
+ is(scrollTop, initialScrollTop,
+ "Scroll top was restored after the sheet was selected again.");
+});
+
+/**
+ * A helper that waits "editor-selected" event for given editor.
+ *
+ * @param {StyleSheetEditor} editor
+ * The editor to wait for.
+ * @param {StyleEditorUI} ui
+ * The StyleEditorUI the editor belongs to.
+ */
+var waitForEditorToBeSelected = Task.async(function* (editor, ui) {
+ info(`Waiting for ${editor.friendlyName} to be selected.`);
+ let selected = yield ui.once("editor-selected");
+ while (selected != editor) {
+ info(`Ignored editor-selected for editor ${editor.friendlyName}.`);
+ selected = yield ui.once("editor-selected");
+ }
+
+ info(`Got editor-selected for ${editor.friendlyName}.`);
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_selectstylesheet.js b/devtools/client/styleeditor/test/browser_styleeditor_selectstylesheet.js
new file mode 100644
index 000000000..4d9692f9f
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_selectstylesheet.js
@@ -0,0 +1,26 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that StyleEditorUI.selectStyleSheet selects the correct sheet, line and
+// column.
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+const LINE_NO = 5;
+const COL_NO = 0;
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+ let editor = ui.editors[1];
+
+ info("Selecting style sheet #1.");
+ yield ui.selectStyleSheet(editor.styleSheet.href, LINE_NO);
+
+ is(ui.selectedEditor, ui.editors[1], "Second editor is selected.");
+ let {line, ch} = ui.selectedEditor.sourceEditor.getCursor();
+
+ is(line, LINE_NO, "correct line selected");
+ is(ch, COL_NO, "correct column selected");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_large.js b/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_large.js
new file mode 100644
index 000000000..cddba6877
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_large.js
@@ -0,0 +1,33 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Covers the case from Bug 1128747, where loading a sourcemapped
+// file prevents the correct editor from being selected on load,
+// and causes a second iframe to be appended when the user clicks
+// editor in the list.
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "sourcemaps-large.html";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ yield openEditor(ui.editors[0]);
+ let iframes = ui.selectedEditor.details.querySelectorAll("iframe");
+
+ is(iframes.length, 1, "There is only one editor iframe");
+ ok(ui.selectedEditor.summary.classList.contains("splitview-active"),
+ "The editor is selected");
+});
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js b/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
new file mode 100644
index 000000000..b73738fd6
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sourcemap_watching.js
@@ -0,0 +1,162 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TESTCASE_URI_HTML = TEST_BASE_HTTP + "sourcemaps-watching.html";
+const TESTCASE_URI_CSS = TEST_BASE_HTTP + "sourcemap-css/sourcemaps.css";
+const TESTCASE_URI_REG_CSS = TEST_BASE_HTTP + "simple.css";
+const TESTCASE_URI_SCSS = TEST_BASE_HTTP + "sourcemap-sass/sourcemaps.scss";
+const TESTCASE_URI_MAP = TEST_BASE_HTTP + "sourcemap-css/sourcemaps.css.map";
+const TESTCASE_SCSS_NAME = "sourcemaps.scss";
+
+const TRANSITIONS_PREF = "devtools.styleeditor.transitions";
+
+const CSS_TEXT = "* { color: blue }";
+
+const {FileUtils} = Components.utils.import("resource://gre/modules/FileUtils.jsm", {});
+const {NetUtil} = Components.utils.import("resource://gre/modules/NetUtil.jsm", {});
+
+add_task(function* () {
+ yield new Promise(resolve => {
+ SpecialPowers.pushPrefEnv({"set": [
+ [TRANSITIONS_PREF, false]
+ ]}, resolve);
+ });
+
+ // copy all our files over so we don't screw them up for other tests
+ let HTMLFile = yield copy(TESTCASE_URI_HTML, ["sourcemaps.html"]);
+ let CSSFile = yield copy(TESTCASE_URI_CSS,
+ ["sourcemap-css", "sourcemaps.css"]);
+ yield copy(TESTCASE_URI_SCSS, ["sourcemap-sass", "sourcemaps.scss"]);
+ yield copy(TESTCASE_URI_MAP, ["sourcemap-css", "sourcemaps.css.map"]);
+ yield copy(TESTCASE_URI_REG_CSS, ["simple.css"]);
+
+ let uri = Services.io.newFileURI(HTMLFile);
+ let testcaseURI = uri.resolve("");
+
+ let { ui } = yield openStyleEditorForURL(testcaseURI);
+
+ let editor = ui.editors[1];
+ if (getStylesheetNameFor(editor) != TESTCASE_SCSS_NAME) {
+ editor = ui.editors[2];
+ }
+
+ is(getStylesheetNameFor(editor), TESTCASE_SCSS_NAME, "found scss editor");
+
+ let link = getLinkFor(editor);
+ link.click();
+
+ yield editor.getSourceEditor();
+
+ let color = yield getComputedStyleProperty({selector: "div", name: "color"});
+ is(color, "rgb(255, 0, 102)", "div is red before saving file");
+
+ // let styleApplied = defer();
+ let styleApplied = editor.once("style-applied");
+
+ yield pauseForTimeChange();
+
+ // Edit and save Sass in the editor. This will start off a file-watching
+ // process waiting for the CSS file to change.
+ yield editSCSS(editor);
+
+ // We can't run Sass or another compiler, so we fake it by just
+ // directly changing the CSS file.
+ yield editCSSFile(CSSFile);
+
+ info("wrote to CSS file, waiting for style-applied event");
+
+ yield styleApplied;
+
+ color = yield getComputedStyleProperty({selector: "div", name: "color"});
+ is(color, "rgb(0, 0, 255)", "div is blue after saving file");
+});
+
+function editSCSS(editor) {
+ let deferred = defer();
+
+ editor.sourceEditor.setText(CSS_TEXT);
+
+ editor.saveToFile(null, function (file) {
+ ok(file, "Scss file should be saved");
+ deferred.resolve();
+ });
+
+ return deferred.promise;
+}
+
+function editCSSFile(CSSFile) {
+ return write(CSS_TEXT, CSSFile);
+}
+
+function pauseForTimeChange() {
+ let deferred = defer();
+
+ // We have to wait for the system time to turn over > 1000 ms so that
+ // our file's last change time will show a change. This reflects what
+ // would happen in real life with a user manually saving the file.
+ setTimeout(deferred.resolve, 2000);
+
+ return deferred.promise;
+}
+
+/* Helpers */
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
+
+function getStylesheetNameFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name > label")
+ .getAttribute("value");
+}
+
+function copy(srcChromeURL, destFilePath) {
+ let destFile = FileUtils.getFile("ProfD", destFilePath);
+ return write(read(srcChromeURL), destFile);
+}
+
+function read(srcChromeURL) {
+ let scriptableStream = Cc["@mozilla.org/scriptableinputstream;1"]
+ .getService(Ci.nsIScriptableInputStream);
+
+ let channel = NetUtil.newChannel({
+ uri: srcChromeURL,
+ loadUsingSystemPrincipal: true
+ });
+ let input = channel.open2();
+ scriptableStream.init(input);
+
+ let data = "";
+ while (input.available()) {
+ data = data.concat(scriptableStream.read(input.available()));
+ }
+ scriptableStream.close();
+ input.close();
+
+ return data;
+}
+
+function write(data, file) {
+ let deferred = defer();
+
+ let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
+ .createInstance(Ci.nsIScriptableUnicodeConverter);
+
+ converter.charset = "UTF-8";
+
+ let istream = converter.convertToInputStream(data);
+ let ostream = FileUtils.openSafeFileOutputStream(file);
+
+ NetUtil.asyncCopy(istream, ostream, function (status) {
+ if (!Components.isSuccessCode(status)) {
+ info("Coudln't write to " + file.path);
+ return;
+ }
+ deferred.resolve(file);
+ });
+
+ return deferred.promise;
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps.js b/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps.js
new file mode 100644
index 000000000..fefca7648
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps.js
@@ -0,0 +1,149 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "sourcemaps.html";
+const PREF = "devtools.styleeditor.source-maps-enabled";
+
+const contents = {
+ "sourcemaps.scss": [
+ "",
+ "$paulrougetpink: #f06;",
+ "",
+ "div {",
+ " color: $paulrougetpink;",
+ "}",
+ "",
+ "span {",
+ " background-color: #EEE;",
+ "}"
+ ].join("\n"),
+ "contained.scss": [
+ "$pink: #f06;",
+ "",
+ "#header {",
+ " color: $pink;",
+ "}"
+ ].join("\n"),
+ "sourcemaps.css": [
+ "div {",
+ " color: #ff0066; }",
+ "",
+ "span {",
+ " background-color: #EEE; }",
+ "",
+ "/*# sourceMappingURL=sourcemaps.css.map */"
+ ].join("\n"),
+ "contained.css": [
+ "#header {",
+ " color: #f06; }",
+ "",
+ "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJma" +
+ "WxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwi" +
+ "bWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiA" +
+ "jZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/"
+ ].join("\n"),
+ "test-stylus.styl": [
+ "paulrougetpink = #f06;",
+ "",
+ "div",
+ " color: paulrougetpink",
+ "",
+ "span",
+ " background-color: #EEE",
+ ""
+ ].join("\n"),
+ "test-stylus.css": [
+ "div {",
+ " color: #f06;",
+ "}",
+ "span {",
+ " background-color: #eee;",
+ "}",
+ "/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb" +
+ "3VyY2VzIjpbInRlc3Qtc3R5bHVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFB" +
+ "RUE7RUFDRSxPQUFPLEtBQVA7O0FBRUY7RUFDRSxrQkFBa0IsS0FBbEIiLCJmaWxlIjoidGV" +
+ "zdC1zdHlsdXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicGF1bHJvdWdldHBpbmsgPSAjZj" +
+ "A2O1xuXG5kaXZcbiAgY29sb3I6IHBhdWxyb3VnZXRwaW5rXG5cbnNwYW5cbiAgYmFja2dyb" +
+ "3VuZC1jb2xvcjogI0VFRVxuIl19 */"
+ ].join("\n")
+};
+
+const cssNames = ["sourcemaps.css", "contained.css", "test-stylus.css"];
+const origNames = ["sourcemaps.scss", "contained.scss", "test-stylus.styl"];
+
+waitForExplicitFinish();
+
+add_task(function* () {
+ let {ui} = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 4,
+ "correct number of editors with source maps enabled");
+
+ // Test first plain css editor
+ testFirstEditor(ui.editors[0]);
+
+ // Test Scss editors
+ yield testEditor(ui.editors[1], origNames);
+ yield testEditor(ui.editors[2], origNames);
+ yield testEditor(ui.editors[3], origNames);
+
+ // Test disabling original sources
+ yield togglePref(ui);
+
+ is(ui.editors.length, 4, "correct number of editors after pref toggled");
+
+ // Test CSS editors
+ yield testEditor(ui.editors[1], cssNames);
+ yield testEditor(ui.editors[2], cssNames);
+ yield testEditor(ui.editors[3], cssNames);
+
+ Services.prefs.clearUserPref(PREF);
+});
+
+function testFirstEditor(editor) {
+ let name = getStylesheetNameFor(editor);
+ is(name, "simple.css", "First style sheet display name is correct");
+}
+
+function testEditor(editor, possibleNames) {
+ let name = getStylesheetNameFor(editor);
+ ok(possibleNames.indexOf(name) >= 0, name + " editor name is correct");
+
+ return openEditor(editor).then(() => {
+ let expectedText = contents[name];
+
+ let text = editor.sourceEditor.getText();
+
+ is(text, expectedText, name + " editor contains expected text");
+ });
+}
+
+/* Helpers */
+
+function togglePref(UI) {
+ let editorsPromise = UI.once("stylesheets-reset");
+ let selectedPromise = UI.once("editor-selected");
+
+ Services.prefs.setBoolPref(PREF, false);
+
+ return promise.all([editorsPromise, selectedPromise]);
+}
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
+
+function getStylesheetNameFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name > label")
+ .getAttribute("value");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps_inline.js b/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps_inline.js
new file mode 100644
index 000000000..ae7279858
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sourcemaps_inline.js
@@ -0,0 +1,85 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "sourcemaps-inline.html";
+const PREF = "devtools.styleeditor.source-maps-enabled";
+
+const sassContent = `body {
+ background-color: black;
+ & > h1 {
+ color: white;
+ }
+}
+`;
+
+const cssContent = `body {
+ background-color: black;
+}
+body > h1 {
+ color: white;
+}
+` +
+"/*# sourceMappingURL=data:application/json;base64,ewoidmVyc2lvbiI6IDMsCiJtY" +
+"XBwaW5ncyI6ICJBQUFBLElBQUs7RUFDSCxnQkFBZ0IsRUFBRSxLQUFLO0VBQ3ZCLFNBQU87SUFD" +
+"TCxLQUFLLEVBQUUsS0FBSyIsCiJzb3VyY2VzIjogWyJ0ZXN0LnNjc3MiXSwKInNvdXJjZXNDb25" +
+"0ZW50IjogWyJib2R5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogYmxhY2s7XG4gICYgPiBoMSB7XG" +
+"4gICAgY29sb3I6IHdoaXRlO1xuICB9XG59XG4iXSwKIm5hbWVzIjogW10sCiJmaWxlIjogInRlc" +
+"3QuY3NzIgp9Cg== */";
+
+add_task(function* () {
+ let {ui} = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 1,
+ "correct number of editors with source maps enabled");
+
+ yield testEditor(ui.editors[0], "test.scss", sassContent);
+
+ // Test disabling original sources
+ yield togglePref(ui);
+
+ is(ui.editors.length, 1, "correct number of editors after pref toggled");
+
+ // Test CSS editors
+ yield testEditor(ui.editors[0], "<inline style sheet #1>", cssContent);
+
+ Services.prefs.clearUserPref(PREF);
+});
+
+function* testEditor(editor, expectedName, expectedText) {
+ let name = getStylesheetNameFor(editor);
+ is(expectedName, name, name + " editor name is correct");
+
+ yield openEditor(editor);
+ let text = editor.sourceEditor.getText();
+ is(text, expectedText, name + " editor contains expected text");
+}
+
+/* Helpers */
+
+function togglePref(UI) {
+ let editorsPromise = UI.once("stylesheets-reset");
+ let selectedPromise = UI.once("editor-selected");
+
+ Services.prefs.setBoolPref(PREF, false);
+
+ return promise.all([editorsPromise, selectedPromise]);
+}
+
+function openEditor(editor) {
+ getLinkFor(editor).click();
+
+ return editor.getSourceEditor();
+}
+
+function getLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
+
+function getStylesheetNameFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name > label")
+ .getAttribute("value");
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sv_keynav.js b/devtools/client/styleeditor/test/browser_styleeditor_sv_keynav.js
new file mode 100644
index 000000000..a9c0073c3
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sv_keynav.js
@@ -0,0 +1,65 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the style sheet list can be navigated with keyboard.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "four.html";
+
+add_task(function* () {
+ let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ info("Waiting for source editor to load.");
+ yield ui.editors[0].getSourceEditor();
+
+ let selected = ui.once("editor-selected");
+
+ info("Testing keyboard navigation on the sheet list.");
+ testKeyboardNavigation(ui.editors[0], panel);
+
+ info("Waiting for editor #2 to be selected due to keyboard navigation.");
+ yield selected;
+
+ ok(ui.editors[2].sourceEditor.hasFocus(), "Editor #2 has focus.");
+});
+
+function getStylesheetNameLinkFor(editor) {
+ return editor.summary.querySelector(".stylesheet-name");
+}
+
+function testKeyboardNavigation(editor, panel) {
+ let panelWindow = panel.panelWindow;
+ let ui = panel.UI;
+ waitForFocus(function () {
+ let summary = editor.summary;
+ EventUtils.synthesizeMouseAtCenter(summary, {}, panelWindow);
+
+ let item = getStylesheetNameLinkFor(ui.editors[0]);
+ is(panelWindow.document.activeElement, item,
+ "editor 0 item is the active element");
+
+ EventUtils.synthesizeKey("VK_DOWN", {}, panelWindow);
+ item = getStylesheetNameLinkFor(ui.editors[1]);
+ is(panelWindow.document.activeElement, item,
+ "editor 1 item is the active element");
+
+ EventUtils.synthesizeKey("VK_HOME", {}, panelWindow);
+ item = getStylesheetNameLinkFor(ui.editors[0]);
+ is(panelWindow.document.activeElement, item,
+ "fist editor item is the active element");
+
+ EventUtils.synthesizeKey("VK_END", {}, panelWindow);
+ item = getStylesheetNameLinkFor(ui.editors[3]);
+ is(panelWindow.document.activeElement, item,
+ "last editor item is the active element");
+
+ EventUtils.synthesizeKey("VK_UP", {}, panelWindow);
+ item = getStylesheetNameLinkFor(ui.editors[2]);
+ is(panelWindow.document.activeElement, item,
+ "editor 2 item is the active element");
+
+ EventUtils.synthesizeKey("VK_RETURN", {}, panelWindow);
+ // this will attach and give focus editor 2
+ }, panelWindow);
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sv_resize.js b/devtools/client/styleeditor/test/browser_styleeditor_sv_resize.js
new file mode 100644
index 000000000..d684905fc
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sv_resize.js
@@ -0,0 +1,48 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that resizing the source editor container doesn't move the caret.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+
+const {Toolbox} = require("devtools/client/framework/toolbox");
+
+add_task(function* () {
+ let { toolbox, ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "There are 2 style sheets initially");
+
+ info("Changing toolbox host to a window.");
+ yield toolbox.switchHost(Toolbox.HostType.WINDOW);
+
+ let editor = yield ui.editors[0].getSourceEditor();
+ let originalSourceEditor = editor.sourceEditor;
+
+ let hostWindow = toolbox.win.parent;
+ let originalWidth = hostWindow.outerWidth;
+ let originalHeight = hostWindow.outerHeight;
+
+ // to check the caret is preserved
+ originalSourceEditor.setCursor(originalSourceEditor.getPosition(4));
+
+ info("Resizing window.");
+ hostWindow.resizeTo(120, 480);
+
+ let sourceEditor = ui.editors[0].sourceEditor;
+ is(sourceEditor, originalSourceEditor,
+ "the editor still references the same Editor instance");
+
+ is(sourceEditor.getOffset(sourceEditor.getCursor()), 4,
+ "the caret position has been preserved");
+
+ info("Restoring window to original size.");
+ hostWindow.resizeTo(originalWidth, originalHeight);
+});
+
+registerCleanupFunction(() => {
+ // Restore the host type for other tests.
+ Services.prefs.clearUserPref("devtools.toolbox.host");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sync.js b/devtools/client/styleeditor/test/browser_styleeditor_sync.js
new file mode 100644
index 000000000..4bff84101
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sync.js
@@ -0,0 +1,72 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that changes in the style inspector are synchronized into the
+// style editor.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
+
+const expectedText = `
+ body {
+ border-width: 15px;
+ /*! color: red; */
+ }
+
+ #testid {
+ /*! font-size: 4em; */
+ }
+ `;
+
+function* closeAndReopenToolbox() {
+ let target = TargetFactory.forTab(gBrowser.selectedTab);
+ yield gDevTools.closeToolbox(target);
+ let { ui: newui } = yield openStyleEditor();
+ return newui;
+}
+
+add_task(function* () {
+ yield addTab(TESTCASE_URI);
+ let { inspector, view } = yield openRuleView();
+ yield selectNode("#testid", inspector);
+ let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+ // Disable the "font-size" property.
+ let propEditor = ruleEditor.rule.textProps[0].editor;
+ let onModification = view.once("ruleview-changed");
+ propEditor.enable.click();
+ yield onModification;
+
+ // Disable the "color" property. Note that this property is in a
+ // rule that also contains a non-inherited property -- so this test
+ // is also testing that property editing works properly in this
+ // situation.
+ ruleEditor = getRuleViewRuleEditor(view, 3);
+ propEditor = ruleEditor.rule.textProps[1].editor;
+ onModification = view.once("ruleview-changed");
+ propEditor.enable.click();
+ yield onModification;
+
+ let { ui } = yield openStyleEditor();
+
+ let editor = yield ui.editors[0].getSourceEditor();
+ let text = editor.sourceEditor.getText();
+ is(text, expectedText, "style inspector changes are synced");
+
+ // Close and reopen the toolbox, to see that the edited text remains
+ // available.
+ ui = yield closeAndReopenToolbox();
+ editor = yield ui.editors[0].getSourceEditor();
+ text = editor.sourceEditor.getText();
+ is(text, expectedText, "changes remain after close and reopen");
+
+ // For the time being, the actor does not update the style's owning
+ // node's textContent. See bug 1205380.
+ let textContent = yield ContentTask.spawn(gBrowser.selectedBrowser, null,
+ function* () {
+ return content.document.querySelector("style").textContent;
+ });
+
+ isnot(textContent, expectedText, "changes not written back to style node");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_syncAddProperty.js b/devtools/client/styleeditor/test/browser_styleeditor_syncAddProperty.js
new file mode 100644
index 000000000..e197157ad
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_syncAddProperty.js
@@ -0,0 +1,45 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that adding a new rule is synced to the style editor.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
+
+const expectedText = `
+ body {
+ border-width: 15px;
+ color: red;
+ }
+
+ #testid {
+ font-size: 4em;
+ /*! background-color: yellow; */
+ }
+ `;
+
+add_task(function* () {
+ yield addTab(TESTCASE_URI);
+ let { inspector, view } = yield openRuleView();
+ yield selectNode("#testid", inspector);
+
+ info("Focusing a new property name in the rule-view");
+ let ruleEditor = getRuleViewRuleEditor(view, 1);
+ let editor = yield focusEditableField(view, ruleEditor.closeBrace);
+ is(inplaceEditor(ruleEditor.newPropSpan), editor,
+ "The new property editor has focus");
+
+ let input = editor.input;
+ input.value = "/* background-color: yellow; */";
+
+ info("Pressing return to commit and focus the new value field");
+ let onModifications = view.once("ruleview-changed");
+ EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+ yield onModifications;
+
+ let { ui } = yield openStyleEditor();
+ let sourceEditor = yield ui.editors[0].getSourceEditor();
+ let text = sourceEditor.sourceEditor.getText();
+ is(text, expectedText, "selector edits are synced");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js b/devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js
new file mode 100644
index 000000000..348b9c630
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js
@@ -0,0 +1,31 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that adding a new rule is synced to the style editor.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
+
+const expectedText = `
+#testid {
+}`;
+
+add_task(function* () {
+ yield addTab(TESTCASE_URI);
+ let { inspector, view } = yield openRuleView();
+ yield selectNode("#testid", inspector);
+
+ let onRuleViewChanged = once(view, "ruleview-changed");
+ view.addRuleButton.click();
+ yield onRuleViewChanged;
+
+ let { ui } = yield openStyleEditor();
+
+ info("Selecting the second editor");
+ yield ui.selectStyleSheet(ui.editors[1].styleSheet);
+
+ let editor = ui.editors[1];
+ let text = editor.sourceEditor.getText();
+ is(text, expectedText, "selector edits are synced");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js b/devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js
new file mode 100644
index 000000000..84c1c2a7a
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js
@@ -0,0 +1,50 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that changes in the style inspector are synchronized into the
+// style editor.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
+
+const expectedText = `
+ body {
+ border-width: 15px;
+ color: red;
+ }
+
+ #testid {
+ /*! font-size: 4em; */
+ }
+ `;
+
+add_task(function* () {
+ yield addTab(TESTCASE_URI);
+
+ let { inspector, view, toolbox } = yield openRuleView();
+
+ // In this test, make sure the style editor is open before making
+ // changes in the inspector.
+ let { ui } = yield openStyleEditor();
+ let editor = yield ui.editors[0].getSourceEditor();
+
+ let onEditorChange = defer();
+ editor.sourceEditor.on("change", onEditorChange.resolve);
+
+ yield toolbox.getPanel("inspector");
+ yield selectNode("#testid", inspector);
+ let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+ // Disable the "font-size" property.
+ let propEditor = ruleEditor.rule.textProps[0].editor;
+ let onModification = view.once("ruleview-changed");
+ propEditor.enable.click();
+ yield onModification;
+
+ yield openStyleEditor();
+ yield onEditorChange.promise;
+
+ let text = editor.sourceEditor.getText();
+ is(text, expectedText, "style inspector changes are synced");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js b/devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js
new file mode 100644
index 000000000..ea7d7515d
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js
@@ -0,0 +1,39 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that changes in the style inspector are synchronized into the
+// style editor.
+
+const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
+
+const expectedText = `
+ body {
+ border-width: 15px;
+ color: red;
+ }
+
+ #testid, span {
+ font-size: 4em;
+ }
+ `;
+
+add_task(function* () {
+ yield addTab(TESTCASE_URI);
+ let { inspector, view } = yield openRuleView();
+ yield selectNode("#testid", inspector);
+ let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+ let editor = yield focusEditableField(view, ruleEditor.selectorText);
+ editor.input.value = "#testid, span";
+ let onRuleViewChanged = once(view, "ruleview-changed");
+ EventUtils.synthesizeKey("VK_RETURN", {});
+ yield onRuleViewChanged;
+
+ let { ui } = yield openStyleEditor();
+
+ editor = yield ui.editors[0].getSourceEditor();
+ let text = editor.sourceEditor.getText();
+ is(text, expectedText, "selector edits are synced");
+});
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js b/devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js
new file mode 100644
index 000000000..8f939e203
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js
@@ -0,0 +1,48 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that changes in the style editor are synchronized into the
+// style inspector.
+
+const TEST_URI = `
+ <style type='text/css'>
+ </style>
+ <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+const TESTCASE_CSS_SOURCE = "#testid { color: chartreuse; }";
+
+add_task(function* () {
+ yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+ let {inspector, view} = yield openRuleView();
+ yield selectNode("#testid", inspector);
+
+ let { panel, ui } = yield openStyleEditor();
+
+ let editor = yield ui.editors[0].getSourceEditor();
+
+ let waitForRuleView = view.once("ruleview-refreshed");
+ yield typeInEditor(editor, panel.panelWindow);
+ yield waitForRuleView;
+
+ let value = getRuleViewPropertyValue(view, "#testid", "color");
+ is(value, "chartreuse", "check that edits were synced to rule view");
+});
+
+function typeInEditor(editor, panelWindow) {
+ let deferred = defer();
+
+ waitForFocus(function () {
+ for (let c of TESTCASE_CSS_SOURCE) {
+ EventUtils.synthesizeKey(c, {}, panelWindow);
+ }
+ ok(editor.unsaved, "new editor has unsaved flag");
+
+ deferred.resolve();
+ }, panelWindow);
+
+ return deferred.promise;
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js b/devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
new file mode 100644
index 000000000..d52ec41fc
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_transition_rule.js
@@ -0,0 +1,51 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+const NEW_RULE = "body { background-color: purple; }";
+
+add_task(function* () {
+ let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
+
+ is(ui.editors.length, 2, "correct number of editors");
+
+ let editor = ui.editors[0];
+ yield openEditor(editor);
+
+ // Set text twice in a row
+ let styleChanges = listenForStyleChange(editor.styleSheet);
+
+ editor.sourceEditor.setText(NEW_RULE);
+ editor.sourceEditor.setText(NEW_RULE + " ");
+
+ yield styleChanges;
+
+ let rules = yield ContentTask.spawn(gBrowser.selectedBrowser, 0,
+ function* (index) {
+ let sheet = content.document.styleSheets[index];
+ return [...sheet.cssRules].map(rule => rule.cssText);
+ });
+
+ // Test that we removed the transition rule, but kept the rule we added
+ is(rules.length, 1, "only one rule in stylesheet");
+ is(rules[0], NEW_RULE, "stylesheet only contains rule we added");
+});
+
+/* Helpers */
+
+function openEditor(editor) {
+ let link = editor.summary.querySelector(".stylesheet-name");
+ link.click();
+
+ return editor.getSourceEditor();
+}
+
+function listenForStyleChange(sheet) {
+ let deferred = defer();
+ sheet.on("style-applied", deferred.resolve);
+ return deferred.promise;
+}
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_xul.js b/devtools/client/styleeditor/test/browser_styleeditor_xul.js
new file mode 100644
index 000000000..931ad92e7
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_xul.js
@@ -0,0 +1,22 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the style-editor initializes correctly for XUL windows.
+
+"use strict";
+
+waitForExplicitFinish();
+
+const TEST_URL = TEST_BASE + "doc_xulpage.xul";
+
+add_task(function* () {
+ let tab = yield addTab(TEST_URL);
+ let target = TargetFactory.forTab(tab);
+
+ let toolbox = yield gDevTools.showToolbox(target, "styleeditor");
+ let panel = toolbox.getCurrentPanel();
+
+ ok(panel,
+ "The style-editor panel did initialize correctly for the XUL window");
+});
diff --git a/devtools/client/styleeditor/test/doc_long.css b/devtools/client/styleeditor/test/doc_long.css
new file mode 100644
index 000000000..671416333
--- /dev/null
+++ b/devtools/client/styleeditor/test/doc_long.css
@@ -0,0 +1,403 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+div {
+ z-index: 1;
+}
+
+div {
+ z-index: 2;
+}
+
+div {
+ z-index: 3;
+}
+
+div {
+ z-index: 4;
+}
+
+div {
+ z-index: 5;
+}
+
+div {
+ z-index: 6;
+}
+
+div {
+ z-index: 7;
+}
+
+div {
+ z-index: 8;
+}
+
+div {
+ z-index: 9;
+}
+
+div {
+ z-index: 10;
+}
+
+div {
+ z-index: 11;
+}
+
+div {
+ z-index: 12;
+}
+
+div {
+ z-index: 13;
+}
+
+div {
+ z-index: 14;
+}
+
+div {
+ z-index: 15;
+}
+
+div {
+ z-index: 16;
+}
+
+div {
+ z-index: 17;
+}
+
+div {
+ z-index: 18;
+}
+
+div {
+ z-index: 19;
+}
+
+div {
+ z-index: 20;
+}
+
+div {
+ z-index: 21;
+}
+
+div {
+ z-index: 22;
+}
+
+div {
+ z-index: 23;
+}
+
+div {
+ z-index: 24;
+}
+
+div {
+ z-index: 25;
+}
+
+div {
+ z-index: 26;
+}
+
+div {
+ z-index: 27;
+}
+
+div {
+ z-index: 28;
+}
+
+div {
+ z-index: 29;
+}
+
+div {
+ z-index: 30;
+}
+
+div {
+ z-index: 31;
+}
+
+div {
+ z-index: 32;
+}
+
+div {
+ z-index: 33;
+}
+
+div {
+ z-index: 34;
+}
+
+div {
+ z-index: 35;
+}
+
+div {
+ z-index: 36;
+}
+
+div {
+ z-index: 37;
+}
+
+div {
+ z-index: 38;
+}
+
+div {
+ z-index: 39;
+}
+
+div {
+ z-index: 40;
+}
+
+div {
+ z-index: 41;
+}
+
+div {
+ z-index: 42;
+}
+
+div {
+ z-index: 43;
+}
+
+div {
+ z-index: 44;
+}
+
+div {
+ z-index: 45;
+}
+
+div {
+ z-index: 46;
+}
+
+div {
+ z-index: 47;
+}
+
+div {
+ z-index: 48;
+}
+
+div {
+ z-index: 49;
+}
+
+div {
+ z-index: 50;
+}
+
+div {
+ z-index: 51;
+}
+
+div {
+ z-index: 52;
+}
+
+div {
+ z-index: 53;
+}
+
+div {
+ z-index: 54;
+}
+
+div {
+ z-index: 55;
+}
+
+div {
+ z-index: 56;
+}
+
+div {
+ z-index: 57;
+}
+
+div {
+ z-index: 58;
+}
+
+div {
+ z-index: 59;
+}
+
+div {
+ z-index: 60;
+}
+
+div {
+ z-index: 61;
+}
+
+div {
+ z-index: 62;
+}
+
+div {
+ z-index: 63;
+}
+
+div {
+ z-index: 64;
+}
+
+div {
+ z-index: 65;
+}
+
+div {
+ z-index: 66;
+}
+
+div {
+ z-index: 67;
+}
+
+div {
+ z-index: 68;
+}
+
+div {
+ z-index: 69;
+}
+
+div {
+ z-index: 70;
+}
+
+div {
+ z-index: 71;
+}
+
+div {
+ z-index: 72;
+}
+
+div {
+ z-index: 73;
+}
+
+div {
+ z-index: 74;
+}
+
+div {
+ z-index: 75;
+}
+
+div {
+ z-index: 76;
+}
+
+div {
+ z-index: 77;
+}
+
+div {
+ z-index: 78;
+}
+
+div {
+ z-index: 79;
+}
+
+div {
+ z-index: 80;
+}
+
+div {
+ z-index: 81;
+}
+
+div {
+ z-index: 82;
+}
+
+div {
+ z-index: 83;
+}
+
+div {
+ z-index: 84;
+}
+
+div {
+ z-index: 85;
+}
+
+div {
+ z-index: 86;
+}
+
+div {
+ z-index: 87;
+}
+
+div {
+ z-index: 88;
+}
+
+div {
+ z-index: 89;
+}
+
+div {
+ z-index: 90;
+}
+
+div {
+ z-index: 91;
+}
+
+div {
+ z-index: 92;
+}
+
+div {
+ z-index: 93;
+}
+
+div {
+ z-index: 94;
+}
+
+div {
+ z-index: 95;
+}
+
+div {
+ z-index: 96;
+}
+
+div {
+ z-index: 97;
+}
+
+div {
+ z-index: 98;
+}
+
+div {
+ z-index: 99;
+}
+
+div {
+ z-index: 100;
+}
diff --git a/devtools/client/styleeditor/test/doc_uncached.css b/devtools/client/styleeditor/test/doc_uncached.css
new file mode 100644
index 000000000..492256c93
--- /dev/null
+++ b/devtools/client/styleeditor/test/doc_uncached.css
@@ -0,0 +1,16 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* ☺ */
+
+body {
+ background: white;
+}
+
+div {
+ font-size: 4em;
+}
+
+div > span {
+ text-decoration: underline;
+}
diff --git a/devtools/client/styleeditor/test/doc_uncached.html b/devtools/client/styleeditor/test/doc_uncached.html
new file mode 100644
index 000000000..bd83d1db6
--- /dev/null
+++ b/devtools/client/styleeditor/test/doc_uncached.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+ <title>uncached testcase</title>
+ <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="doc_uncached.css"/>
+</head>
+<body>
+ <div>uncached <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/doc_xulpage.xul b/devtools/client/styleeditor/test/doc_xulpage.xul
new file mode 100644
index 000000000..155be25ec
--- /dev/null
+++ b/devtools/client/styleeditor/test/doc_xulpage.xul
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="simple.css" type="text/css"?>
+<!DOCTYPE window>
+<window xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <label value="Simple XUL document" />
+</window> \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/four.html b/devtools/client/styleeditor/test/four.html
new file mode 100644
index 000000000..c0d51d691
--- /dev/null
+++ b/devtools/client/styleeditor/test/four.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+ <title>four stylesheets</title>
+ <link rel="stylesheet" type="text/css" media="scren" href="simple.css"/>
+ <style type="text/css">
+ div {
+ font-size: 2em;
+ }
+ </style>
+ <style type="text/css">
+ span {
+ font-size: 3em;
+ }
+ </style>
+ <style type="text/css">
+ p {
+ font-size: 4em;
+ }
+ </style>
+</head>
+<body>
+ <div>four <span>stylesheets</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/head.js b/devtools/client/styleeditor/test/head.js
new file mode 100644
index 000000000..c7abaa435
--- /dev/null
+++ b/devtools/client/styleeditor/test/head.js
@@ -0,0 +1,121 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* All top-level definitions here are exports. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+/* import-globals-from ../../inspector/shared/test/head.js */
+Services.scriptloader.loadSubScript(
+ "chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
+
+const TEST_BASE = "chrome://mochitests/content/browser/devtools/client/styleeditor/test/";
+const TEST_BASE_HTTP = "http://example.com/browser/devtools/client/styleeditor/test/";
+const TEST_BASE_HTTPS = "https://example.com/browser/devtools/client/styleeditor/test/";
+const TEST_HOST = "mochi.test:8888";
+
+/**
+ * Add a new test tab in the browser and load the given url.
+ * @param {String} url The url to be loaded in the new tab
+ * @param {Window} win The window to add the tab to (default: current window).
+ * @return a promise that resolves to the tab object when the url is loaded
+ */
+var addTab = function (url, win) {
+ info("Adding a new tab with URL: '" + url + "'");
+ let def = defer();
+
+ let targetWindow = win || window;
+ let targetBrowser = targetWindow.gBrowser;
+
+ let tab = targetBrowser.selectedTab = targetBrowser.addTab(url);
+ BrowserTestUtils.browserLoaded(targetBrowser.selectedBrowser)
+ .then(function () {
+ info("URL '" + url + "' loading complete");
+ def.resolve(tab);
+ });
+
+ return def.promise;
+};
+
+/**
+ * Navigate the currently selected tab to a new URL and wait for it to load.
+ * @param {String} url The url to be loaded in the current tab.
+ * @return a promise that resolves when the page has fully loaded.
+ */
+var navigateTo = Task.async(function* (url) {
+ info(`Navigating to ${url}`);
+ let browser = gBrowser.selectedBrowser;
+
+ let navigating = defer();
+ browser.addEventListener("load", function onload() {
+ browser.removeEventListener("load", onload, true);
+ navigating.resolve();
+ }, true);
+
+ browser.loadURI(url);
+
+ yield navigating.promise;
+});
+
+var navigateToAndWaitForStyleSheets = Task.async(function* (url, ui) {
+ let onReset = ui.once("stylesheets-reset");
+ yield navigateTo(url);
+ yield onReset;
+});
+
+var reloadPageAndWaitForStyleSheets = Task.async(function* (ui) {
+ info("Reloading the page.");
+
+ let onReset = ui.once("stylesheets-reset");
+ let browser = gBrowser.selectedBrowser;
+ yield ContentTask.spawn(browser, null, "() => content.location.reload()");
+ yield onReset;
+});
+
+/**
+ * Open the style editor for the current tab.
+ */
+var openStyleEditor = Task.async(function* (tab) {
+ if (!tab) {
+ tab = gBrowser.selectedTab;
+ }
+ let target = TargetFactory.forTab(tab);
+ let toolbox = yield gDevTools.showToolbox(target, "styleeditor");
+ let panel = toolbox.getPanel("styleeditor");
+ let ui = panel.UI;
+
+ return { toolbox, panel, ui };
+});
+
+/**
+ * Creates a new tab in specified window navigates it to the given URL and
+ * opens style editor in it.
+ */
+var openStyleEditorForURL = Task.async(function* (url, win) {
+ let tab = yield addTab(url, win);
+ let result = yield openStyleEditor(tab);
+ result.tab = tab;
+ return result;
+});
+
+/**
+ * Send an async message to the frame script and get back the requested
+ * computed style property.
+ *
+ * @param {String} selector
+ * The selector used to obtain the element.
+ * @param {String} pseudo
+ * pseudo id to query, or null.
+ * @param {String} name
+ * name of the property.
+ */
+var getComputedStyleProperty = function* (args) {
+ return yield ContentTask.spawn(gBrowser.selectedBrowser, args,
+ function ({selector, pseudo, name}) {
+ let element = content.document.querySelector(selector);
+ let style = content.getComputedStyle(element, pseudo);
+ return style.getPropertyValue(name);
+ }
+ );
+};
diff --git a/devtools/client/styleeditor/test/import.css b/devtools/client/styleeditor/test/import.css
new file mode 100644
index 000000000..df532fb96
--- /dev/null
+++ b/devtools/client/styleeditor/test/import.css
@@ -0,0 +1,10 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+@import url(import2.css);
+
+body {
+ margin: 0;
+}
+
diff --git a/devtools/client/styleeditor/test/import.html b/devtools/client/styleeditor/test/import.html
new file mode 100644
index 000000000..bc92baeba
--- /dev/null
+++ b/devtools/client/styleeditor/test/import.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+ <title>import testcase</title>
+ <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="simple.css"/>
+ <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="import.css"/>
+</head>
+<body>
+ <div>import <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/import2.css b/devtools/client/styleeditor/test/import2.css
new file mode 100644
index 000000000..fbbe14d9a
--- /dev/null
+++ b/devtools/client/styleeditor/test/import2.css
@@ -0,0 +1,10 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+@import url(import.css);
+
+p {
+ padding: 5px;
+}
+
diff --git a/devtools/client/styleeditor/test/inline-1.html b/devtools/client/styleeditor/test/inline-1.html
new file mode 100644
index 000000000..76478893b
--- /dev/null
+++ b/devtools/client/styleeditor/test/inline-1.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Inline test page #1</title>
+ <style type="text/css">
+ .second {
+ font-size:2em;
+ }
+ </style>
+ <style type="text/css">
+ .first {
+ font-size:3em;
+ }
+ </style>
+ </head>
+ <body class="first">
+ Inline test page #1
+ </body>
+</html>
diff --git a/devtools/client/styleeditor/test/inline-2.html b/devtools/client/styleeditor/test/inline-2.html
new file mode 100644
index 000000000..e25285c31
--- /dev/null
+++ b/devtools/client/styleeditor/test/inline-2.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Inline test page #2</title>
+ <style type="text/css">
+ .second {
+ font-size:2em;
+ }
+ </style>
+ <style type="text/css">
+ .first {
+ font-size:3em;
+ }
+ </style>
+ </head>
+ <body class="second">
+ Inline test page #2
+ </body>
+</html>
diff --git a/devtools/client/styleeditor/test/longload.html b/devtools/client/styleeditor/test/longload.html
new file mode 100644
index 000000000..d23a9cd77
--- /dev/null
+++ b/devtools/client/styleeditor/test/longload.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+ <title>Long load</title>
+ <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="simple.css"/>
+ <style type="text/css">
+ body {
+ background: white;
+ }
+
+ div {
+ font-size: 4em;
+ }
+
+ div > span {
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ Time passes:
+ <script type="application/javascript;version=1.8">
+ "use strict";
+ for (let i = 0; i < 5000; i++) {
+ document.write("<br>...");
+ }
+ </script>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/media-rules-sourcemaps.html b/devtools/client/styleeditor/test/media-rules-sourcemaps.html
new file mode 100644
index 000000000..4876ef795
--- /dev/null
+++ b/devtools/client/styleeditor/test/media-rules-sourcemaps.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/media-rules.css"
+</head>
+<body>
+ <div>
+ Testing style editor media sidebar with source maps
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/media-rules.css b/devtools/client/styleeditor/test/media-rules.css
new file mode 100644
index 000000000..5eea7c380
--- /dev/null
+++ b/devtools/client/styleeditor/test/media-rules.css
@@ -0,0 +1,29 @@
+@media not all {
+ div {
+ color: blue;
+ }
+}
+
+@media all {
+ div {
+ color: red;
+ }
+}
+
+div {
+ width: 20px;
+ height: 20px;
+ background-color: ghostwhite;
+}
+
+@media (max-width: 400px) {
+ div {
+ color: green;
+ }
+}
+
+@media (min-height: 300px) and (max-height: 320px) {
+ div {
+ color: orange;
+ }
+}
diff --git a/devtools/client/styleeditor/test/media-rules.html b/devtools/client/styleeditor/test/media-rules.html
new file mode 100644
index 000000000..edc45ccae
--- /dev/null
+++ b/devtools/client/styleeditor/test/media-rules.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="simple.css"/>
+ <link rel="stylesheet" href="media-rules.css"/>
+</head>
+<body>
+ <div>
+ Testing style editor media sidebar
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/media-small.css b/devtools/client/styleeditor/test/media-small.css
new file mode 100644
index 000000000..d64756ddc
--- /dev/null
+++ b/devtools/client/styleeditor/test/media-small.css
@@ -0,0 +1,5 @@
+/* this stylesheet applies when min-width<400px */
+body {
+ background: red;
+}
+
diff --git a/devtools/client/styleeditor/test/media.html b/devtools/client/styleeditor/test/media.html
new file mode 100644
index 000000000..ef05818c5
--- /dev/null
+++ b/devtools/client/styleeditor/test/media.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="simple.css" media="screen,print"/>
+ <link rel="stylesheet" type="text/css" href="media-small.css" media="screen and (min-width: 200px)"/>
+</head>
+<body>
+ <div>test for media labels</div>
+</body>
+</html>
+
diff --git a/devtools/client/styleeditor/test/minified.html b/devtools/client/styleeditor/test/minified.html
new file mode 100644
index 000000000..ab8c67d25
--- /dev/null
+++ b/devtools/client/styleeditor/test/minified.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+ <title>minified testcase</title>
+ <link rel="stylesheet" href="pretty.css"/>
+ <style type="text/css">body { background: red; }
+div {
+font-size: 5em;
+color: red
+}</style>
+</head>
+<body>
+ <div>minified <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/missing.html b/devtools/client/styleeditor/test/missing.html
new file mode 100644
index 000000000..ce4ec08be
--- /dev/null
+++ b/devtools/client/styleeditor/test/missing.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>missing stylesheet testcase</title>
+ <link rel="stylesheet" charset="utf-8" type="text/css" media="screen" href="missing-stylesheet.css"/>
+ <link rel="stylesheet" charset="utf-8" type="text/css" media="screen" href="simple.css"/>
+</head>
+<body>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/nostyle.html b/devtools/client/styleeditor/test/nostyle.html
new file mode 100644
index 000000000..f6a6769e6
--- /dev/null
+++ b/devtools/client/styleeditor/test/nostyle.html
@@ -0,0 +1,5 @@
+<html>
+ <div>
+ Page with no stylesheets
+ </div>
+</html> \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/pretty.css b/devtools/client/styleeditor/test/pretty.css
new file mode 100644
index 000000000..e597afa4b
--- /dev/null
+++ b/devtools/client/styleeditor/test/pretty.css
@@ -0,0 +1,2 @@
+
+body{background:white;}div{font-size:4em;color:red}span{color:green;}
diff --git a/devtools/client/styleeditor/test/resources_inpage.jsi b/devtools/client/styleeditor/test/resources_inpage.jsi
new file mode 100644
index 000000000..8b7895af5
--- /dev/null
+++ b/devtools/client/styleeditor/test/resources_inpage.jsi
@@ -0,0 +1,12 @@
+
+// This script is used from within browser_styleeditor_cmd_edit.html
+
+window.addEventListener('load', function() {
+ var pid = document.getElementById('pid');
+ var h3 = document.createElement('h3');
+ h3.id = 'h3id';
+ h3.classList.add('h3class');
+ h3.appendChild(document.createTextNode('h3'));
+ h3.setAttribute('data-a1', 'h3');
+ pid.parentNode.appendChild(h3);
+});
diff --git a/devtools/client/styleeditor/test/resources_inpage1.css b/devtools/client/styleeditor/test/resources_inpage1.css
new file mode 100644
index 000000000..644deaaea
--- /dev/null
+++ b/devtools/client/styleeditor/test/resources_inpage1.css
@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+#pid { border-top: 2px dotted #F00; }
+#divid { border-top: 2px dotted #00F; }
+#h4id { border-top: 2px dotted #0F0; }
+#h3id { border-top: 2px dotted #FF0; }
diff --git a/devtools/client/styleeditor/test/resources_inpage2.css b/devtools/client/styleeditor/test/resources_inpage2.css
new file mode 100644
index 000000000..e4fa48e53
--- /dev/null
+++ b/devtools/client/styleeditor/test/resources_inpage2.css
@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+*[data-a1=p] { border-left: 4px solid #F00; }
+*[data-a1=div] { border-left: 4px solid #00F; }
+*[data-a1=h4] { border-left: 4px solid #0F0; }
+*[data-a1=h3] { border-left: 4px solid #FF0; }
diff --git a/devtools/client/styleeditor/test/simple.css b/devtools/client/styleeditor/test/simple.css
new file mode 100644
index 000000000..829fe9e6c
--- /dev/null
+++ b/devtools/client/styleeditor/test/simple.css
@@ -0,0 +1,9 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* ☺ */
+
+body {
+ margin: 0;
+}
+
diff --git a/devtools/client/styleeditor/test/simple.css.gz b/devtools/client/styleeditor/test/simple.css.gz
new file mode 100644
index 000000000..ee3b9efbc
--- /dev/null
+++ b/devtools/client/styleeditor/test/simple.css.gz
Binary files differ
diff --git a/devtools/client/styleeditor/test/simple.css.gz^headers^ b/devtools/client/styleeditor/test/simple.css.gz^headers^
new file mode 100644
index 000000000..092020ab0
--- /dev/null
+++ b/devtools/client/styleeditor/test/simple.css.gz^headers^
@@ -0,0 +1,4 @@
+Vary: Accept-Encoding
+Content-Encoding: gzip
+Content-Type: text/css
+
diff --git a/devtools/client/styleeditor/test/simple.gz.html b/devtools/client/styleeditor/test/simple.gz.html
new file mode 100644
index 000000000..d63362b8e
--- /dev/null
+++ b/devtools/client/styleeditor/test/simple.gz.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+ <title>simple testcase</title>
+ <link rel="stylesheet" type="text/css" media="scren" href="simple.css.gz"/>
+ <style type="text/css">
+ body {
+ background: white;
+ }
+
+ div {
+ font-size: 4em;
+ }
+
+ div > span {
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ <div>simple <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/simple.html b/devtools/client/styleeditor/test/simple.html
new file mode 100644
index 000000000..8f25cdf61
--- /dev/null
+++ b/devtools/client/styleeditor/test/simple.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>simple testcase</title>
+ <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="simple.css"/>
+ <style type="text/css">
+ body {
+ background: white;
+ }
+
+ div {
+ font-size: 4em;
+ }
+
+ div > span {
+ text-decoration: underline;
+ }
+ </style>
+</head>
+<body>
+ <div>simple <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/sourcemap-css/contained.css b/devtools/client/styleeditor/test/sourcemap-css/contained.css
new file mode 100644
index 000000000..79572f606
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/contained.css
@@ -0,0 +1,4 @@
+#header {
+ color: #f06; }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlcyI6WyJzYXNzL2NvbnRhaW5lZC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsT0FISyIsInNvdXJjZXNDb250ZW50IjpbIiRwaW5rOiAjZjA2O1xuXG4jaGVhZGVyIHtcbiAgY29sb3I6ICRwaW5rO1xufSJdfQ==*/ \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemap-css/media-rules.css b/devtools/client/styleeditor/test/sourcemap-css/media-rules.css
new file mode 100644
index 000000000..fad540a96
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/media-rules.css
@@ -0,0 +1,8 @@
+@media screen and (max-width: 320px) {
+ div {
+ width: 100px; } }
+@media screen and (min-width: 1200px) {
+ div {
+ width: 400px; } }
+
+/*# sourceMappingURL=media-rules.css.map */ \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemap-css/media-rules.css.map b/devtools/client/styleeditor/test/sourcemap-css/media-rules.css.map
new file mode 100644
index 000000000..76cd48fe2
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/media-rules.css.map
@@ -0,0 +1,6 @@
+{
+"version": 3,
+"mappings": "AAIE,oCAA4C;EAD9C,GAAI;IAEA,KAAK,EAAE,KAAK;AAEd,qCAA4C;EAJ9C,GAAI;IAKA,KAAK,EAAE,KAAK",
+"sources": ["../sourcemap-sass/media-rules.scss"],
+"file": "media-rules.css"
+}
diff --git a/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css b/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css
new file mode 100644
index 000000000..7246a9082
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css
@@ -0,0 +1,7 @@
+div {
+ color: #ff0066; }
+
+span {
+ background-color: #EEE; }
+
+/*# sourceMappingURL=sourcemaps.css.map */ \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css.map b/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css.map
new file mode 100644
index 000000000..2e8f2911c
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/sourcemaps.css.map
@@ -0,0 +1,6 @@
+{
+"version": 3,
+"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI",
+"sources": ["../sourcemap-sass/sourcemaps.scss"],
+"file": "sourcemaps.css"
+}
diff --git a/devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css b/devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css
new file mode 100644
index 000000000..e943c6ef4
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css
@@ -0,0 +1,4513 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%; }
+
+body {
+ margin: 0; }
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+ display: block; }
+
+audio, canvas, progress, video {
+ display: inline-block;
+ vertical-align: baseline; }
+
+audio:not([controls]) {
+ display: none;
+ height: 0; }
+
+[hidden], template {
+ display: none; }
+
+a {
+ background: transparent; }
+
+a:active, a:hover {
+ outline: 0; }
+
+abbr[title] {
+ border-bottom: 1px dotted; }
+
+b, strong {
+ font-weight: bold; }
+
+dfn {
+ font-style: italic; }
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0; }
+
+mark {
+ background: #ff0;
+ color: #000; }
+
+small {
+ font-size: 80%; }
+
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline; }
+
+sup {
+ top: -0.5em; }
+
+sub {
+ bottom: -0.25em; }
+
+img {
+ border: 0; }
+
+svg:not(:root) {
+ overflow: hidden; }
+
+figure {
+ margin: 1em 40px; }
+
+hr {
+ box-sizing: content-box;
+ height: 0; }
+
+pre {
+ overflow: auto; }
+
+code, kbd, pre, samp {
+ font-family: monospace, monospace;
+ font-size: 1em; }
+
+button, input, optgroup, select, textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0; }
+
+button {
+ overflow: visible; }
+
+button, select {
+ text-transform: none; }
+
+button, html input[type="button"], input[type="reset"], input[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer; }
+
+button[disabled], html input[disabled] {
+ cursor: default; }
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0; }
+
+input {
+ line-height: normal; }
+
+input[type="checkbox"], input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0; }
+
+input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+ height: auto; }
+
+input[type="search"] {
+ -webkit-appearance: textfield;
+ box-sizing: content-box; }
+
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none; }
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em; }
+
+legend {
+ border: 0;
+ padding: 0; }
+
+textarea {
+ overflow: auto; }
+
+optgroup {
+ font-weight: bold; }
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0; }
+
+td, th {
+ padding: 0; }
+
+@media print {
+ * {
+ text-shadow: none !important;
+ color: #000 !important;
+ background: transparent !important;
+ box-shadow: none !important; }
+ a, a:visited {
+ text-decoration: underline; }
+ a[href]:after {
+ content: " (" attr(href) ")"; }
+ abbr[title]:after {
+ content: " (" attr(title) ")"; }
+ a[href^="javascript:"]:after, a[href^="#"]:after {
+ content: ""; }
+ pre, blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid; }
+ thead {
+ display: table-header-group; }
+ tr, img {
+ page-break-inside: avoid; }
+ img {
+ max-width: 100% !important; }
+ p, h2, h3 {
+ orphans: 3;
+ widows: 3; }
+ h2, h3 {
+ page-break-after: avoid; }
+ select {
+ background: #fff !important; }
+ .navbar {
+ display: none; }
+ .table td, .table th {
+ background-color: #fff !important; }
+ .btn > .caret, .dropup > .btn > .caret {
+ border-top-color: #000 !important; }
+ .label {
+ border: 1px solid #000; }
+ .table {
+ border-collapse: collapse !important; }
+ .table-bordered th, .table-bordered td {
+ border: 1px solid #ddd !important; } }
+
+@font-face {
+ font-family: 'Glyphicons Halflings';
+ src: url('../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot');
+ src: url('../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.woff') format('woff'), url('../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf') format('truetype'), url('../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
+
+.glyphicon {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ font-family: 'Glyphicons Halflings';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale; }
+
+.glyphicon-asterisk:before {
+ content: "\2a"; }
+
+.glyphicon-plus:before {
+ content: "\2b"; }
+
+.glyphicon-euro:before {
+ content: "\20ac"; }
+
+.glyphicon-minus:before {
+ content: "\2212"; }
+
+.glyphicon-cloud:before {
+ content: "\2601"; }
+
+.glyphicon-envelope:before {
+ content: "\2709"; }
+
+.glyphicon-pencil:before {
+ content: "\270f"; }
+
+.glyphicon-glass:before {
+ content: "\e001"; }
+
+.glyphicon-music:before {
+ content: "\e002"; }
+
+.glyphicon-search:before {
+ content: "\e003"; }
+
+.glyphicon-heart:before {
+ content: "\e005"; }
+
+.glyphicon-star:before {
+ content: "\e006"; }
+
+.glyphicon-star-empty:before {
+ content: "\e007"; }
+
+.glyphicon-user:before {
+ content: "\e008"; }
+
+.glyphicon-film:before {
+ content: "\e009"; }
+
+.glyphicon-th-large:before {
+ content: "\e010"; }
+
+.glyphicon-th:before {
+ content: "\e011"; }
+
+.glyphicon-th-list:before {
+ content: "\e012"; }
+
+.glyphicon-ok:before {
+ content: "\e013"; }
+
+.glyphicon-remove:before {
+ content: "\e014"; }
+
+.glyphicon-zoom-in:before {
+ content: "\e015"; }
+
+.glyphicon-zoom-out:before {
+ content: "\e016"; }
+
+.glyphicon-off:before {
+ content: "\e017"; }
+
+.glyphicon-signal:before {
+ content: "\e018"; }
+
+.glyphicon-cog:before {
+ content: "\e019"; }
+
+.glyphicon-trash:before {
+ content: "\e020"; }
+
+.glyphicon-home:before {
+ content: "\e021"; }
+
+.glyphicon-file:before {
+ content: "\e022"; }
+
+.glyphicon-time:before {
+ content: "\e023"; }
+
+.glyphicon-road:before {
+ content: "\e024"; }
+
+.glyphicon-download-alt:before {
+ content: "\e025"; }
+
+.glyphicon-download:before {
+ content: "\e026"; }
+
+.glyphicon-upload:before {
+ content: "\e027"; }
+
+.glyphicon-inbox:before {
+ content: "\e028"; }
+
+.glyphicon-play-circle:before {
+ content: "\e029"; }
+
+.glyphicon-repeat:before {
+ content: "\e030"; }
+
+.glyphicon-refresh:before {
+ content: "\e031"; }
+
+.glyphicon-list-alt:before {
+ content: "\e032"; }
+
+.glyphicon-lock:before {
+ content: "\e033"; }
+
+.glyphicon-flag:before {
+ content: "\e034"; }
+
+.glyphicon-headphones:before {
+ content: "\e035"; }
+
+.glyphicon-volume-off:before {
+ content: "\e036"; }
+
+.glyphicon-volume-down:before {
+ content: "\e037"; }
+
+.glyphicon-volume-up:before {
+ content: "\e038"; }
+
+.glyphicon-qrcode:before {
+ content: "\e039"; }
+
+.glyphicon-barcode:before {
+ content: "\e040"; }
+
+.glyphicon-tag:before {
+ content: "\e041"; }
+
+.glyphicon-tags:before {
+ content: "\e042"; }
+
+.glyphicon-book:before {
+ content: "\e043"; }
+
+.glyphicon-bookmark:before {
+ content: "\e044"; }
+
+.glyphicon-print:before {
+ content: "\e045"; }
+
+.glyphicon-camera:before {
+ content: "\e046"; }
+
+.glyphicon-font:before {
+ content: "\e047"; }
+
+.glyphicon-bold:before {
+ content: "\e048"; }
+
+.glyphicon-italic:before {
+ content: "\e049"; }
+
+.glyphicon-text-height:before {
+ content: "\e050"; }
+
+.glyphicon-text-width:before {
+ content: "\e051"; }
+
+.glyphicon-align-left:before {
+ content: "\e052"; }
+
+.glyphicon-align-center:before {
+ content: "\e053"; }
+
+.glyphicon-align-right:before {
+ content: "\e054"; }
+
+.glyphicon-align-justify:before {
+ content: "\e055"; }
+
+.glyphicon-list:before {
+ content: "\e056"; }
+
+.glyphicon-indent-left:before {
+ content: "\e057"; }
+
+.glyphicon-indent-right:before {
+ content: "\e058"; }
+
+.glyphicon-facetime-video:before {
+ content: "\e059"; }
+
+.glyphicon-picture:before {
+ content: "\e060"; }
+
+.glyphicon-map-marker:before {
+ content: "\e062"; }
+
+.glyphicon-adjust:before {
+ content: "\e063"; }
+
+.glyphicon-tint:before {
+ content: "\e064"; }
+
+.glyphicon-edit:before {
+ content: "\e065"; }
+
+.glyphicon-share:before {
+ content: "\e066"; }
+
+.glyphicon-check:before {
+ content: "\e067"; }
+
+.glyphicon-move:before {
+ content: "\e068"; }
+
+.glyphicon-step-backward:before {
+ content: "\e069"; }
+
+.glyphicon-fast-backward:before {
+ content: "\e070"; }
+
+.glyphicon-backward:before {
+ content: "\e071"; }
+
+.glyphicon-play:before {
+ content: "\e072"; }
+
+.glyphicon-pause:before {
+ content: "\e073"; }
+
+.glyphicon-stop:before {
+ content: "\e074"; }
+
+.glyphicon-forward:before {
+ content: "\e075"; }
+
+.glyphicon-fast-forward:before {
+ content: "\e076"; }
+
+.glyphicon-step-forward:before {
+ content: "\e077"; }
+
+.glyphicon-eject:before {
+ content: "\e078"; }
+
+.glyphicon-chevron-left:before {
+ content: "\e079"; }
+
+.glyphicon-chevron-right:before {
+ content: "\e080"; }
+
+.glyphicon-plus-sign:before {
+ content: "\e081"; }
+
+.glyphicon-minus-sign:before {
+ content: "\e082"; }
+
+.glyphicon-remove-sign:before {
+ content: "\e083"; }
+
+.glyphicon-ok-sign:before {
+ content: "\e084"; }
+
+.glyphicon-question-sign:before {
+ content: "\e085"; }
+
+.glyphicon-info-sign:before {
+ content: "\e086"; }
+
+.glyphicon-screenshot:before {
+ content: "\e087"; }
+
+.glyphicon-remove-circle:before {
+ content: "\e088"; }
+
+.glyphicon-ok-circle:before {
+ content: "\e089"; }
+
+.glyphicon-ban-circle:before {
+ content: "\e090"; }
+
+.glyphicon-arrow-left:before {
+ content: "\e091"; }
+
+.glyphicon-arrow-right:before {
+ content: "\e092"; }
+
+.glyphicon-arrow-up:before {
+ content: "\e093"; }
+
+.glyphicon-arrow-down:before {
+ content: "\e094"; }
+
+.glyphicon-share-alt:before {
+ content: "\e095"; }
+
+.glyphicon-resize-full:before {
+ content: "\e096"; }
+
+.glyphicon-resize-small:before {
+ content: "\e097"; }
+
+.glyphicon-exclamation-sign:before {
+ content: "\e101"; }
+
+.glyphicon-gift:before {
+ content: "\e102"; }
+
+.glyphicon-leaf:before {
+ content: "\e103"; }
+
+.glyphicon-fire:before {
+ content: "\e104"; }
+
+.glyphicon-eye-open:before {
+ content: "\e105"; }
+
+.glyphicon-eye-close:before {
+ content: "\e106"; }
+
+.glyphicon-warning-sign:before {
+ content: "\e107"; }
+
+.glyphicon-plane:before {
+ content: "\e108"; }
+
+.glyphicon-calendar:before {
+ content: "\e109"; }
+
+.glyphicon-random:before {
+ content: "\e110"; }
+
+.glyphicon-comment:before {
+ content: "\e111"; }
+
+.glyphicon-magnet:before {
+ content: "\e112"; }
+
+.glyphicon-chevron-up:before {
+ content: "\e113"; }
+
+.glyphicon-chevron-down:before {
+ content: "\e114"; }
+
+.glyphicon-retweet:before {
+ content: "\e115"; }
+
+.glyphicon-shopping-cart:before {
+ content: "\e116"; }
+
+.glyphicon-folder-close:before {
+ content: "\e117"; }
+
+.glyphicon-folder-open:before {
+ content: "\e118"; }
+
+.glyphicon-resize-vertical:before {
+ content: "\e119"; }
+
+.glyphicon-resize-horizontal:before {
+ content: "\e120"; }
+
+.glyphicon-hdd:before {
+ content: "\e121"; }
+
+.glyphicon-bullhorn:before {
+ content: "\e122"; }
+
+.glyphicon-bell:before {
+ content: "\e123"; }
+
+.glyphicon-certificate:before {
+ content: "\e124"; }
+
+.glyphicon-thumbs-up:before {
+ content: "\e125"; }
+
+.glyphicon-thumbs-down:before {
+ content: "\e126"; }
+
+.glyphicon-hand-right:before {
+ content: "\e127"; }
+
+.glyphicon-hand-left:before {
+ content: "\e128"; }
+
+.glyphicon-hand-up:before {
+ content: "\e129"; }
+
+.glyphicon-hand-down:before {
+ content: "\e130"; }
+
+.glyphicon-circle-arrow-right:before {
+ content: "\e131"; }
+
+.glyphicon-circle-arrow-left:before {
+ content: "\e132"; }
+
+.glyphicon-circle-arrow-up:before {
+ content: "\e133"; }
+
+.glyphicon-circle-arrow-down:before {
+ content: "\e134"; }
+
+.glyphicon-globe:before {
+ content: "\e135"; }
+
+.glyphicon-wrench:before {
+ content: "\e136"; }
+
+.glyphicon-tasks:before {
+ content: "\e137"; }
+
+.glyphicon-filter:before {
+ content: "\e138"; }
+
+.glyphicon-briefcase:before {
+ content: "\e139"; }
+
+.glyphicon-fullscreen:before {
+ content: "\e140"; }
+
+.glyphicon-dashboard:before {
+ content: "\e141"; }
+
+.glyphicon-paperclip:before {
+ content: "\e142"; }
+
+.glyphicon-heart-empty:before {
+ content: "\e143"; }
+
+.glyphicon-link:before {
+ content: "\e144"; }
+
+.glyphicon-phone:before {
+ content: "\e145"; }
+
+.glyphicon-pushpin:before {
+ content: "\e146"; }
+
+.glyphicon-usd:before {
+ content: "\e148"; }
+
+.glyphicon-gbp:before {
+ content: "\e149"; }
+
+.glyphicon-sort:before {
+ content: "\e150"; }
+
+.glyphicon-sort-by-alphabet:before {
+ content: "\e151"; }
+
+.glyphicon-sort-by-alphabet-alt:before {
+ content: "\e152"; }
+
+.glyphicon-sort-by-order:before {
+ content: "\e153"; }
+
+.glyphicon-sort-by-order-alt:before {
+ content: "\e154"; }
+
+.glyphicon-sort-by-attributes:before {
+ content: "\e155"; }
+
+.glyphicon-sort-by-attributes-alt:before {
+ content: "\e156"; }
+
+.glyphicon-unchecked:before {
+ content: "\e157"; }
+
+.glyphicon-expand:before {
+ content: "\e158"; }
+
+.glyphicon-collapse-down:before {
+ content: "\e159"; }
+
+.glyphicon-collapse-up:before {
+ content: "\e160"; }
+
+.glyphicon-log-in:before {
+ content: "\e161"; }
+
+.glyphicon-flash:before {
+ content: "\e162"; }
+
+.glyphicon-log-out:before {
+ content: "\e163"; }
+
+.glyphicon-new-window:before {
+ content: "\e164"; }
+
+.glyphicon-record:before {
+ content: "\e165"; }
+
+.glyphicon-save:before {
+ content: "\e166"; }
+
+.glyphicon-open:before {
+ content: "\e167"; }
+
+.glyphicon-saved:before {
+ content: "\e168"; }
+
+.glyphicon-import:before {
+ content: "\e169"; }
+
+.glyphicon-export:before {
+ content: "\e170"; }
+
+.glyphicon-send:before {
+ content: "\e171"; }
+
+.glyphicon-floppy-disk:before {
+ content: "\e172"; }
+
+.glyphicon-floppy-saved:before {
+ content: "\e173"; }
+
+.glyphicon-floppy-remove:before {
+ content: "\e174"; }
+
+.glyphicon-floppy-save:before {
+ content: "\e175"; }
+
+.glyphicon-floppy-open:before {
+ content: "\e176"; }
+
+.glyphicon-credit-card:before {
+ content: "\e177"; }
+
+.glyphicon-transfer:before {
+ content: "\e178"; }
+
+.glyphicon-cutlery:before {
+ content: "\e179"; }
+
+.glyphicon-header:before {
+ content: "\e180"; }
+
+.glyphicon-compressed:before {
+ content: "\e181"; }
+
+.glyphicon-earphone:before {
+ content: "\e182"; }
+
+.glyphicon-phone-alt:before {
+ content: "\e183"; }
+
+.glyphicon-tower:before {
+ content: "\e184"; }
+
+.glyphicon-stats:before {
+ content: "\e185"; }
+
+.glyphicon-sd-video:before {
+ content: "\e186"; }
+
+.glyphicon-hd-video:before {
+ content: "\e187"; }
+
+.glyphicon-subtitles:before {
+ content: "\e188"; }
+
+.glyphicon-sound-stereo:before {
+ content: "\e189"; }
+
+.glyphicon-sound-dolby:before {
+ content: "\e190"; }
+
+.glyphicon-sound-5-1:before {
+ content: "\e191"; }
+
+.glyphicon-sound-6-1:before {
+ content: "\e192"; }
+
+.glyphicon-sound-7-1:before {
+ content: "\e193"; }
+
+.glyphicon-copyright-mark:before {
+ content: "\e194"; }
+
+.glyphicon-registration-mark:before {
+ content: "\e195"; }
+
+.glyphicon-cloud-download:before {
+ content: "\e197"; }
+
+.glyphicon-cloud-upload:before {
+ content: "\e198"; }
+
+.glyphicon-tree-conifer:before {
+ content: "\e199"; }
+
+.glyphicon-tree-deciduous:before {
+ content: "\e200"; }
+
+* {
+ box-sizing: border-box; }
+
+*:before, *:after {
+ box-sizing: border-box; }
+
+html {
+ font-size: 62.5%;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.42857;
+ color: #333333;
+ background-color: #fff; }
+
+input, button, select, textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit; }
+
+a {
+ color: #428bca;
+ text-decoration: none; }
+ a:hover, a:focus {
+ color: #2a6596;
+ text-decoration: underline; }
+ a:focus {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px; }
+
+figure {
+ margin: 0; }
+
+img {
+ vertical-align: middle; }
+
+.img-responsive {
+ display: block;
+ max-width: 100%;
+ height: auto; }
+
+.img-rounded {
+ border-radius: 6px; }
+
+.img-thumbnail {
+ padding: 4px;
+ line-height: 1.42857;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ transition: all 0.2s ease-in-out;
+ display: inline-block;
+ max-width: 100%;
+ height: auto; }
+
+.img-circle {
+ border-radius: 50%; }
+
+hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eeeeee; }
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0; }
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ clip: auto; }
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: inherit;
+ font-weight: 500;
+ line-height: 1.1;
+ color: inherit; }
+ h1 small, h1 .small, h2 small, h2 .small, h3 small, h3 .small, h4 small, h4 .small, h5 small, h5 .small, h6 small, h6 .small, .h1 small, .h1 .small, .h2 small, .h2 .small, .h3 small, .h3 .small, .h4 small, .h4 .small, .h5 small, .h5 .small, .h6 small, .h6 .small {
+ font-weight: normal;
+ line-height: 1;
+ color: #999999; }
+
+h1, .h1, h2, .h2, h3, .h3 {
+ margin-top: 20px;
+ margin-bottom: 10px; }
+ h1 small, h1 .small, .h1 small, .h1 .small, h2 small, h2 .small, .h2 small, .h2 .small, h3 small, h3 .small, .h3 small, .h3 .small {
+ font-size: 65%; }
+
+h4, .h4, h5, .h5, h6, .h6 {
+ margin-top: 10px;
+ margin-bottom: 10px; }
+ h4 small, h4 .small, .h4 small, .h4 .small, h5 small, h5 .small, .h5 small, .h5 .small, h6 small, h6 .small, .h6 small, .h6 .small {
+ font-size: 75%; }
+
+h1, .h1 {
+ font-size: 36px; }
+
+h2, .h2 {
+ font-size: 30px; }
+
+h3, .h3 {
+ font-size: 24px; }
+
+h4, .h4 {
+ font-size: 18px; }
+
+h5, .h5 {
+ font-size: 14px; }
+
+h6, .h6 {
+ font-size: 12px; }
+
+p {
+ margin: 0 0 10px; }
+
+.lead {
+ margin-bottom: 20px;
+ font-size: 16px;
+ font-weight: 200;
+ line-height: 1.4; }
+ @media (min-width: 768px) {
+ .lead {
+ font-size: 21px; } }
+
+small, .small {
+ font-size: 85%; }
+
+cite {
+ font-style: normal; }
+
+mark, .mark {
+ background-color: #fcf8e3;
+ padding: 0.2em; }
+
+.text-left {
+ text-align: left; }
+
+.text-right {
+ text-align: right; }
+
+.text-center {
+ text-align: center; }
+
+.text-justify {
+ text-align: justify; }
+
+.text-muted {
+ color: #999999; }
+
+.text-primary {
+ color: #428bca; }
+
+a.text-primary:hover {
+ color: #3073a9; }
+
+.text-success {
+ color: #3c763d; }
+
+a.text-success:hover {
+ color: #2b542b; }
+
+.text-info {
+ color: #31708f; }
+
+a.text-info:hover {
+ color: #245369; }
+
+.text-warning {
+ color: #8a6d3b; }
+
+a.text-warning:hover {
+ color: #66502c; }
+
+.text-danger {
+ color: #a94442; }
+
+a.text-danger:hover {
+ color: #843534; }
+
+.bg-primary {
+ color: #fff; }
+
+.bg-primary {
+ background-color: #428bca; }
+
+a.bg-primary:hover {
+ background-color: #3073a9; }
+
+.bg-success {
+ background-color: #dff0d8; }
+
+a.bg-success:hover {
+ background-color: #c1e2b3; }
+
+.bg-info {
+ background-color: #d9edf7; }
+
+a.bg-info:hover {
+ background-color: #afdaee; }
+
+.bg-warning {
+ background-color: #fcf8e3; }
+
+a.bg-warning:hover {
+ background-color: #f7ecb5; }
+
+.bg-danger {
+ background-color: #f2dede; }
+
+a.bg-danger:hover {
+ background-color: #e4b9b9; }
+
+.page-header {
+ padding-bottom: 9px;
+ margin: 40px 0 20px;
+ border-bottom: 1px solid #eeeeee; }
+
+ul, ol {
+ margin-top: 0;
+ margin-bottom: 10px; }
+ ul ul, ul ol, ol ul, ol ol {
+ margin-bottom: 0; }
+
+.list-unstyled, .list-inline {
+ padding-left: 0;
+ list-style: none; }
+
+.list-inline {
+ margin-left: -5px; }
+ .list-inline > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px; }
+
+dl {
+ margin-top: 0;
+ margin-bottom: 20px; }
+
+dt, dd {
+ line-height: 1.42857; }
+
+dt {
+ font-weight: bold; }
+
+dd {
+ margin-left: 0; }
+
+.dl-horizontal dd:before, .dl-horizontal dd:after {
+ content: " ";
+ display: table; }
+.dl-horizontal dd:after {
+ clear: both; }
+@media (min-width: 768px) {
+ .dl-horizontal dt {
+ float: left;
+ width: 160px;
+ clear: left;
+ text-align: right;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap; }
+ .dl-horizontal dd {
+ margin-left: 180px; } }
+
+abbr[title], abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted #999999; }
+
+.initialism {
+ font-size: 90%;
+ text-transform: uppercase; }
+
+blockquote {
+ padding: 10px 20px;
+ margin: 0 0 20px;
+ font-size: 17.5px;
+ border-left: 5px solid #eeeeee; }
+ blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
+ margin-bottom: 0; }
+ blockquote footer, blockquote small, blockquote .small {
+ display: block;
+ font-size: 80%;
+ line-height: 1.42857;
+ color: #999999; }
+ blockquote footer:before, blockquote small:before, blockquote .small:before {
+ content: '\2014 \00A0'; }
+
+.blockquote-reverse, blockquote.pull-right {
+ padding-right: 15px;
+ padding-left: 0;
+ border-right: 5px solid #eeeeee;
+ border-left: 0;
+ text-align: right; }
+ .blockquote-reverse footer:before, .blockquote-reverse small:before, .blockquote-reverse .small:before, blockquote.pull-right footer:before, blockquote.pull-right small:before, blockquote.pull-right .small:before {
+ content: ''; }
+ .blockquote-reverse footer:after, .blockquote-reverse small:after, .blockquote-reverse .small:after, blockquote.pull-right footer:after, blockquote.pull-right small:after, blockquote.pull-right .small:after {
+ content: '\00A0 \2014'; }
+
+blockquote:before, blockquote:after {
+ content: ""; }
+
+address {
+ margin-bottom: 20px;
+ font-style: normal;
+ line-height: 1.42857; }
+
+code, kbd, pre, samp {
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
+
+code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #c7254e;
+ background-color: #f9f2f4;
+ border-radius: 4px; }
+
+kbd {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: #fff;
+ background-color: #333;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
+
+pre {
+ display: block;
+ padding: 9.5px;
+ margin: 0 0 10px;
+ font-size: 13px;
+ line-height: 1.42857;
+ word-break: break-all;
+ word-wrap: break-word;
+ color: #333333;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
+ border-radius: 4px; }
+ pre code {
+ padding: 0;
+ font-size: inherit;
+ color: inherit;
+ white-space: pre-wrap;
+ background-color: transparent;
+ border-radius: 0; }
+
+.pre-scrollable {
+ max-height: 340px;
+ overflow-y: scroll; }
+
+.container {
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: 15px;
+ padding-right: 15px; }
+ .container:before, .container:after {
+ content: " ";
+ display: table; }
+ .container:after {
+ clear: both; }
+ @media (min-width: 768px) {
+ .container {
+ width: 750px; } }
+ @media (min-width: 992px) {
+ .container {
+ width: 970px; } }
+ @media (min-width: 1200px) {
+ .container {
+ width: 1170px; } }
+
+.container-fluid {
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: 15px;
+ padding-right: 15px; }
+ .container-fluid:before, .container-fluid:after {
+ content: " ";
+ display: table; }
+ .container-fluid:after {
+ clear: both; }
+
+.row {
+ margin-left: -15px;
+ margin-right: -15px; }
+ .row:before, .row:after {
+ content: " ";
+ display: table; }
+ .row:after {
+ clear: both; }
+
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+ position: relative;
+ min-height: 1px;
+ padding-left: 15px;
+ padding-right: 15px; }
+
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+ float: left; }
+
+.col-xs-1 {
+ width: 8.33333%; }
+
+.col-xs-2 {
+ width: 16.66667%; }
+
+.col-xs-3 {
+ width: 25%; }
+
+.col-xs-4 {
+ width: 33.33333%; }
+
+.col-xs-5 {
+ width: 41.66667%; }
+
+.col-xs-6 {
+ width: 50%; }
+
+.col-xs-7 {
+ width: 58.33333%; }
+
+.col-xs-8 {
+ width: 66.66667%; }
+
+.col-xs-9 {
+ width: 75%; }
+
+.col-xs-10 {
+ width: 83.33333%; }
+
+.col-xs-11 {
+ width: 91.66667%; }
+
+.col-xs-12 {
+ width: 100%; }
+
+.col-xs-pull-0 {
+ right: auto; }
+
+.col-xs-pull-1 {
+ right: 8.33333%; }
+
+.col-xs-pull-2 {
+ right: 16.66667%; }
+
+.col-xs-pull-3 {
+ right: 25%; }
+
+.col-xs-pull-4 {
+ right: 33.33333%; }
+
+.col-xs-pull-5 {
+ right: 41.66667%; }
+
+.col-xs-pull-6 {
+ right: 50%; }
+
+.col-xs-pull-7 {
+ right: 58.33333%; }
+
+.col-xs-pull-8 {
+ right: 66.66667%; }
+
+.col-xs-pull-9 {
+ right: 75%; }
+
+.col-xs-pull-10 {
+ right: 83.33333%; }
+
+.col-xs-pull-11 {
+ right: 91.66667%; }
+
+.col-xs-pull-12 {
+ right: 100%; }
+
+.col-xs-push-0 {
+ left: auto; }
+
+.col-xs-push-1 {
+ left: 8.33333%; }
+
+.col-xs-push-2 {
+ left: 16.66667%; }
+
+.col-xs-push-3 {
+ left: 25%; }
+
+.col-xs-push-4 {
+ left: 33.33333%; }
+
+.col-xs-push-5 {
+ left: 41.66667%; }
+
+.col-xs-push-6 {
+ left: 50%; }
+
+.col-xs-push-7 {
+ left: 58.33333%; }
+
+.col-xs-push-8 {
+ left: 66.66667%; }
+
+.col-xs-push-9 {
+ left: 75%; }
+
+.col-xs-push-10 {
+ left: 83.33333%; }
+
+.col-xs-push-11 {
+ left: 91.66667%; }
+
+.col-xs-push-12 {
+ left: 100%; }
+
+.col-xs-offset-0 {
+ margin-left: 0%; }
+
+.col-xs-offset-1 {
+ margin-left: 8.33333%; }
+
+.col-xs-offset-2 {
+ margin-left: 16.66667%; }
+
+.col-xs-offset-3 {
+ margin-left: 25%; }
+
+.col-xs-offset-4 {
+ margin-left: 33.33333%; }
+
+.col-xs-offset-5 {
+ margin-left: 41.66667%; }
+
+.col-xs-offset-6 {
+ margin-left: 50%; }
+
+.col-xs-offset-7 {
+ margin-left: 58.33333%; }
+
+.col-xs-offset-8 {
+ margin-left: 66.66667%; }
+
+.col-xs-offset-9 {
+ margin-left: 75%; }
+
+.col-xs-offset-10 {
+ margin-left: 83.33333%; }
+
+.col-xs-offset-11 {
+ margin-left: 91.66667%; }
+
+.col-xs-offset-12 {
+ margin-left: 100%; }
+
+@media (min-width: 768px) {
+ .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+ float: left; }
+ .col-sm-1 {
+ width: 8.33333%; }
+ .col-sm-2 {
+ width: 16.66667%; }
+ .col-sm-3 {
+ width: 25%; }
+ .col-sm-4 {
+ width: 33.33333%; }
+ .col-sm-5 {
+ width: 41.66667%; }
+ .col-sm-6 {
+ width: 50%; }
+ .col-sm-7 {
+ width: 58.33333%; }
+ .col-sm-8 {
+ width: 66.66667%; }
+ .col-sm-9 {
+ width: 75%; }
+ .col-sm-10 {
+ width: 83.33333%; }
+ .col-sm-11 {
+ width: 91.66667%; }
+ .col-sm-12 {
+ width: 100%; }
+ .col-sm-pull-0 {
+ right: auto; }
+ .col-sm-pull-1 {
+ right: 8.33333%; }
+ .col-sm-pull-2 {
+ right: 16.66667%; }
+ .col-sm-pull-3 {
+ right: 25%; }
+ .col-sm-pull-4 {
+ right: 33.33333%; }
+ .col-sm-pull-5 {
+ right: 41.66667%; }
+ .col-sm-pull-6 {
+ right: 50%; }
+ .col-sm-pull-7 {
+ right: 58.33333%; }
+ .col-sm-pull-8 {
+ right: 66.66667%; }
+ .col-sm-pull-9 {
+ right: 75%; }
+ .col-sm-pull-10 {
+ right: 83.33333%; }
+ .col-sm-pull-11 {
+ right: 91.66667%; }
+ .col-sm-pull-12 {
+ right: 100%; }
+ .col-sm-push-0 {
+ left: auto; }
+ .col-sm-push-1 {
+ left: 8.33333%; }
+ .col-sm-push-2 {
+ left: 16.66667%; }
+ .col-sm-push-3 {
+ left: 25%; }
+ .col-sm-push-4 {
+ left: 33.33333%; }
+ .col-sm-push-5 {
+ left: 41.66667%; }
+ .col-sm-push-6 {
+ left: 50%; }
+ .col-sm-push-7 {
+ left: 58.33333%; }
+ .col-sm-push-8 {
+ left: 66.66667%; }
+ .col-sm-push-9 {
+ left: 75%; }
+ .col-sm-push-10 {
+ left: 83.33333%; }
+ .col-sm-push-11 {
+ left: 91.66667%; }
+ .col-sm-push-12 {
+ left: 100%; }
+ .col-sm-offset-0 {
+ margin-left: 0%; }
+ .col-sm-offset-1 {
+ margin-left: 8.33333%; }
+ .col-sm-offset-2 {
+ margin-left: 16.66667%; }
+ .col-sm-offset-3 {
+ margin-left: 25%; }
+ .col-sm-offset-4 {
+ margin-left: 33.33333%; }
+ .col-sm-offset-5 {
+ margin-left: 41.66667%; }
+ .col-sm-offset-6 {
+ margin-left: 50%; }
+ .col-sm-offset-7 {
+ margin-left: 58.33333%; }
+ .col-sm-offset-8 {
+ margin-left: 66.66667%; }
+ .col-sm-offset-9 {
+ margin-left: 75%; }
+ .col-sm-offset-10 {
+ margin-left: 83.33333%; }
+ .col-sm-offset-11 {
+ margin-left: 91.66667%; }
+ .col-sm-offset-12 {
+ margin-left: 100%; } }
+
+@media (min-width: 992px) {
+ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+ float: left; }
+ .col-md-1 {
+ width: 8.33333%; }
+ .col-md-2 {
+ width: 16.66667%; }
+ .col-md-3 {
+ width: 25%; }
+ .col-md-4 {
+ width: 33.33333%; }
+ .col-md-5 {
+ width: 41.66667%; }
+ .col-md-6 {
+ width: 50%; }
+ .col-md-7 {
+ width: 58.33333%; }
+ .col-md-8 {
+ width: 66.66667%; }
+ .col-md-9 {
+ width: 75%; }
+ .col-md-10 {
+ width: 83.33333%; }
+ .col-md-11 {
+ width: 91.66667%; }
+ .col-md-12 {
+ width: 100%; }
+ .col-md-pull-0 {
+ right: auto; }
+ .col-md-pull-1 {
+ right: 8.33333%; }
+ .col-md-pull-2 {
+ right: 16.66667%; }
+ .col-md-pull-3 {
+ right: 25%; }
+ .col-md-pull-4 {
+ right: 33.33333%; }
+ .col-md-pull-5 {
+ right: 41.66667%; }
+ .col-md-pull-6 {
+ right: 50%; }
+ .col-md-pull-7 {
+ right: 58.33333%; }
+ .col-md-pull-8 {
+ right: 66.66667%; }
+ .col-md-pull-9 {
+ right: 75%; }
+ .col-md-pull-10 {
+ right: 83.33333%; }
+ .col-md-pull-11 {
+ right: 91.66667%; }
+ .col-md-pull-12 {
+ right: 100%; }
+ .col-md-push-0 {
+ left: auto; }
+ .col-md-push-1 {
+ left: 8.33333%; }
+ .col-md-push-2 {
+ left: 16.66667%; }
+ .col-md-push-3 {
+ left: 25%; }
+ .col-md-push-4 {
+ left: 33.33333%; }
+ .col-md-push-5 {
+ left: 41.66667%; }
+ .col-md-push-6 {
+ left: 50%; }
+ .col-md-push-7 {
+ left: 58.33333%; }
+ .col-md-push-8 {
+ left: 66.66667%; }
+ .col-md-push-9 {
+ left: 75%; }
+ .col-md-push-10 {
+ left: 83.33333%; }
+ .col-md-push-11 {
+ left: 91.66667%; }
+ .col-md-push-12 {
+ left: 100%; }
+ .col-md-offset-0 {
+ margin-left: 0%; }
+ .col-md-offset-1 {
+ margin-left: 8.33333%; }
+ .col-md-offset-2 {
+ margin-left: 16.66667%; }
+ .col-md-offset-3 {
+ margin-left: 25%; }
+ .col-md-offset-4 {
+ margin-left: 33.33333%; }
+ .col-md-offset-5 {
+ margin-left: 41.66667%; }
+ .col-md-offset-6 {
+ margin-left: 50%; }
+ .col-md-offset-7 {
+ margin-left: 58.33333%; }
+ .col-md-offset-8 {
+ margin-left: 66.66667%; }
+ .col-md-offset-9 {
+ margin-left: 75%; }
+ .col-md-offset-10 {
+ margin-left: 83.33333%; }
+ .col-md-offset-11 {
+ margin-left: 91.66667%; }
+ .col-md-offset-12 {
+ margin-left: 100%; } }
+
+@media (min-width: 1200px) {
+ .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+ float: left; }
+ .col-lg-1 {
+ width: 8.33333%; }
+ .col-lg-2 {
+ width: 16.66667%; }
+ .col-lg-3 {
+ width: 25%; }
+ .col-lg-4 {
+ width: 33.33333%; }
+ .col-lg-5 {
+ width: 41.66667%; }
+ .col-lg-6 {
+ width: 50%; }
+ .col-lg-7 {
+ width: 58.33333%; }
+ .col-lg-8 {
+ width: 66.66667%; }
+ .col-lg-9 {
+ width: 75%; }
+ .col-lg-10 {
+ width: 83.33333%; }
+ .col-lg-11 {
+ width: 91.66667%; }
+ .col-lg-12 {
+ width: 100%; }
+ .col-lg-pull-0 {
+ right: auto; }
+ .col-lg-pull-1 {
+ right: 8.33333%; }
+ .col-lg-pull-2 {
+ right: 16.66667%; }
+ .col-lg-pull-3 {
+ right: 25%; }
+ .col-lg-pull-4 {
+ right: 33.33333%; }
+ .col-lg-pull-5 {
+ right: 41.66667%; }
+ .col-lg-pull-6 {
+ right: 50%; }
+ .col-lg-pull-7 {
+ right: 58.33333%; }
+ .col-lg-pull-8 {
+ right: 66.66667%; }
+ .col-lg-pull-9 {
+ right: 75%; }
+ .col-lg-pull-10 {
+ right: 83.33333%; }
+ .col-lg-pull-11 {
+ right: 91.66667%; }
+ .col-lg-pull-12 {
+ right: 100%; }
+ .col-lg-push-0 {
+ left: auto; }
+ .col-lg-push-1 {
+ left: 8.33333%; }
+ .col-lg-push-2 {
+ left: 16.66667%; }
+ .col-lg-push-3 {
+ left: 25%; }
+ .col-lg-push-4 {
+ left: 33.33333%; }
+ .col-lg-push-5 {
+ left: 41.66667%; }
+ .col-lg-push-6 {
+ left: 50%; }
+ .col-lg-push-7 {
+ left: 58.33333%; }
+ .col-lg-push-8 {
+ left: 66.66667%; }
+ .col-lg-push-9 {
+ left: 75%; }
+ .col-lg-push-10 {
+ left: 83.33333%; }
+ .col-lg-push-11 {
+ left: 91.66667%; }
+ .col-lg-push-12 {
+ left: 100%; }
+ .col-lg-offset-0 {
+ margin-left: 0%; }
+ .col-lg-offset-1 {
+ margin-left: 8.33333%; }
+ .col-lg-offset-2 {
+ margin-left: 16.66667%; }
+ .col-lg-offset-3 {
+ margin-left: 25%; }
+ .col-lg-offset-4 {
+ margin-left: 33.33333%; }
+ .col-lg-offset-5 {
+ margin-left: 41.66667%; }
+ .col-lg-offset-6 {
+ margin-left: 50%; }
+ .col-lg-offset-7 {
+ margin-left: 58.33333%; }
+ .col-lg-offset-8 {
+ margin-left: 66.66667%; }
+ .col-lg-offset-9 {
+ margin-left: 75%; }
+ .col-lg-offset-10 {
+ margin-left: 83.33333%; }
+ .col-lg-offset-11 {
+ margin-left: 91.66667%; }
+ .col-lg-offset-12 {
+ margin-left: 100%; } }
+
+table {
+ max-width: 100%;
+ background-color: transparent; }
+
+th {
+ text-align: left; }
+
+.table {
+ width: 100%;
+ margin-bottom: 20px; }
+ .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
+ padding: 8px;
+ line-height: 1.42857;
+ vertical-align: top;
+ border-top: 1px solid #ddd; }
+ .table > thead > tr > th {
+ vertical-align: bottom;
+ border-bottom: 2px solid #ddd; }
+ .table > caption + thead > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {
+ border-top: 0; }
+ .table > tbody + tbody {
+ border-top: 2px solid #ddd; }
+ .table .table {
+ background-color: #fff; }
+
+.table-condensed > thead > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > tfoot > tr > td {
+ padding: 5px; }
+
+.table-bordered {
+ border: 1px solid #ddd; }
+ .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
+ border: 1px solid #ddd; }
+ .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
+ border-bottom-width: 2px; }
+
+.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
+ background-color: #f9f9f9; }
+
+.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
+ background-color: #f5f5f5; }
+
+table col[class*="col-"] {
+ position: static;
+ float: none;
+ display: table-column; }
+
+table td[class*="col-"], table th[class*="col-"] {
+ position: static;
+ float: none;
+ display: table-cell; }
+
+.table > thead > tr > td.active, .table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th {
+ background-color: #f5f5f5; }
+
+.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {
+ background-color: #e8e8e8; }
+
+.table > thead > tr > td.success, .table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th {
+ background-color: #dff0d8; }
+
+.table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th {
+ background-color: #d0e9c6; }
+
+.table > thead > tr > td.info, .table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th {
+ background-color: #d9edf7; }
+
+.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr.info:hover > th {
+ background-color: #c4e4f3; }
+
+.table > thead > tr > td.warning, .table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th {
+ background-color: #fcf8e3; }
+
+.table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr.warning:hover > th {
+ background-color: #faf2cc; }
+
+.table > thead > tr > td.danger, .table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th {
+ background-color: #f2dede; }
+
+.table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th {
+ background-color: #ebcccc; }
+
+@media screen and (max-width: 767px) {
+ .table-responsive {
+ width: 100%;
+ margin-bottom: 15px;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ border: 1px solid #ddd;
+ -webkit-overflow-scrolling: touch; }
+ .table-responsive > .table {
+ margin-bottom: 0; }
+ .table-responsive > .table > thead > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > tfoot > tr > td {
+ white-space: nowrap; }
+ .table-responsive > .table-bordered {
+ border: 0; }
+ .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+ border-left: 0; }
+ .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+ border-right: 0; }
+ .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+ border-bottom: 0; } }
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ min-width: 0; }
+
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: 20px;
+ font-size: 21px;
+ line-height: inherit;
+ color: #333333;
+ border: 0;
+ border-bottom: 1px solid #e5e5e5; }
+
+label {
+ display: inline-block;
+ max-width: 100%;
+ margin-bottom: 5px;
+ font-weight: bold; }
+
+input[type="search"] {
+ box-sizing: border-box; }
+
+input[type="radio"], input[type="checkbox"] {
+ margin: 4px 0 0;
+ margin-top: 1px \9;
+ line-height: normal; }
+
+input[type="file"] {
+ display: block; }
+
+input[type="range"] {
+ display: block;
+ width: 100%; }
+
+select[multiple], select[size] {
+ height: auto; }
+
+input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px; }
+
+output {
+ display: block;
+ padding-top: 7px;
+ font-size: 14px;
+ line-height: 1.42857;
+ color: #555555; }
+
+.form-control {
+ display: block;
+ width: 100%;
+ height: 34px;
+ padding: 6px 12px;
+ font-size: 14px;
+ line-height: 1.42857;
+ color: #555555;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
+ .form-control:focus {
+ border-color: #66afe9;
+ outline: 0;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
+ .form-control::placeholder {
+ color: #999999;
+ opacity: 1; }
+ .form-control:-ms-input-placeholder {
+ color: #999999; }
+ .form-control::-webkit-input-placeholder {
+ color: #999999; }
+ .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+ cursor: not-allowed;
+ background-color: #eeeeee;
+ opacity: 1; }
+
+textarea.form-control {
+ height: auto; }
+
+input[type="search"] {
+ -webkit-appearance: none; }
+
+input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
+ line-height: 34px;
+ line-height: 1.42857 \0; }
+ input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, input[type="time"].input-sm, .input-group-sm > input[type="time"].form-control, .input-group-sm > input[type="time"].input-group-addon, .input-group-sm > .input-group-btn > input[type="time"].btn, input[type="datetime-local"].input-sm, .input-group-sm > input[type="datetime-local"].form-control, .input-group-sm > input[type="datetime-local"].input-group-addon, .input-group-sm > .input-group-btn > input[type="datetime-local"].btn, input[type="month"].input-sm, .input-group-sm > input[type="month"].form-control, .input-group-sm > input[type="month"].input-group-addon, .input-group-sm > .input-group-btn > input[type="month"].btn {
+ line-height: 30px; }
+ input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control, .input-group-lg > input[type="date"].input-group-addon, .input-group-lg > .input-group-btn > input[type="date"].btn, input[type="time"].input-lg, .input-group-lg > input[type="time"].form-control, .input-group-lg > input[type="time"].input-group-addon, .input-group-lg > .input-group-btn > input[type="time"].btn, input[type="datetime-local"].input-lg, .input-group-lg > input[type="datetime-local"].form-control, .input-group-lg > input[type="datetime-local"].input-group-addon, .input-group-lg > .input-group-btn > input[type="datetime-local"].btn, input[type="month"].input-lg, .input-group-lg > input[type="month"].form-control, .input-group-lg > input[type="month"].input-group-addon, .input-group-lg > .input-group-btn > input[type="month"].btn {
+ line-height: 46px; }
+
+.form-group {
+ margin-bottom: 15px; }
+
+.radio, .checkbox {
+ display: block;
+ min-height: 20px;
+ margin-top: 10px;
+ margin-bottom: 10px; }
+ .radio label, .checkbox label {
+ padding-left: 20px;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer; }
+
+.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
+ float: left;
+ margin-left: -20px; }
+
+.radio + .radio, .checkbox + .checkbox {
+ margin-top: -5px; }
+
+.radio-inline, .checkbox-inline {
+ display: inline-block;
+ padding-left: 20px;
+ margin-bottom: 0;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer; }
+
+.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: 10px; }
+
+input[type="radio"][disabled], fieldset[disabled] input[type="radio"], input[type="checkbox"][disabled], fieldset[disabled] input[type="checkbox"], .radio[disabled], fieldset[disabled] .radio, .radio-inline[disabled], fieldset[disabled] .radio-inline, .checkbox[disabled], fieldset[disabled] .checkbox, .checkbox-inline[disabled], fieldset[disabled] .checkbox-inline {
+ cursor: not-allowed; }
+
+.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
+ height: 30px;
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px; }
+
+select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn {
+ height: 30px;
+ line-height: 30px; }
+
+textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, .input-group-sm > .input-group-btn > textarea.btn, select[multiple].input-sm, .input-group-sm > select[multiple].form-control, .input-group-sm > select[multiple].input-group-addon, .input-group-sm > .input-group-btn > select[multiple].btn {
+ height: auto; }
+
+.input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
+ height: 46px;
+ padding: 10px 16px;
+ font-size: 18px;
+ line-height: 1.33;
+ border-radius: 6px; }
+
+select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn {
+ height: 46px;
+ line-height: 46px; }
+
+textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, .input-group-lg > .input-group-btn > textarea.btn, select[multiple].input-lg, .input-group-lg > select[multiple].form-control, .input-group-lg > select[multiple].input-group-addon, .input-group-lg > .input-group-btn > select[multiple].btn {
+ height: auto; }
+
+.has-feedback {
+ position: relative; }
+ .has-feedback .form-control {
+ padding-right: 42.5px; }
+
+.form-control-feedback {
+ position: absolute;
+ top: 25px;
+ right: 0;
+ z-index: 2;
+ display: block;
+ width: 34px;
+ height: 34px;
+ line-height: 34px;
+ text-align: center; }
+
+.input-lg + .form-control-feedback, .input-lg + .input-group-lg > .form-control, .input-group-lg > .input-lg + .form-control, .input-lg + .input-group-lg > .input-group-addon, .input-group-lg > .input-lg + .input-group-addon, .input-lg + .input-group-lg > .input-group-btn > .btn, .input-group-lg > .input-group-btn > .input-lg + .btn {
+ width: 46px;
+ height: 46px;
+ line-height: 46px; }
+
+.input-sm + .form-control-feedback, .input-sm + .input-group-sm > .form-control, .input-group-sm > .input-sm + .form-control, .input-sm + .input-group-sm > .input-group-addon, .input-group-sm > .input-sm + .input-group-addon, .input-sm + .input-group-sm > .input-group-btn > .btn, .input-group-sm > .input-group-btn > .input-sm + .btn {
+ width: 30px;
+ height: 30px;
+ line-height: 30px; }
+
+.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline {
+ color: #3c763d; }
+.has-success .form-control {
+ border-color: #3c763d;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
+ .has-success .form-control:focus {
+ border-color: #2b542b;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; }
+.has-success .input-group-addon {
+ color: #3c763d;
+ border-color: #3c763d;
+ background-color: #dff0d8; }
+.has-success .form-control-feedback {
+ color: #3c763d; }
+
+.has-warning .help-block, .has-warning .control-label, .has-warning .radio, .has-warning .checkbox, .has-warning .radio-inline, .has-warning .checkbox-inline {
+ color: #8a6d3b; }
+.has-warning .form-control {
+ border-color: #8a6d3b;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
+ .has-warning .form-control:focus {
+ border-color: #66502c;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c09f6b; }
+.has-warning .input-group-addon {
+ color: #8a6d3b;
+ border-color: #8a6d3b;
+ background-color: #fcf8e3; }
+.has-warning .form-control-feedback {
+ color: #8a6d3b; }
+
+.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline {
+ color: #a94442; }
+.has-error .form-control {
+ border-color: #a94442;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
+ .has-error .form-control:focus {
+ border-color: #843534;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }
+.has-error .input-group-addon {
+ color: #a94442;
+ border-color: #a94442;
+ background-color: #f2dede; }
+.has-error .form-control-feedback {
+ color: #a94442; }
+
+.form-control-static {
+ margin-bottom: 0; }
+
+.help-block {
+ display: block;
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: #737373; }
+
+@media (min-width: 768px) {
+ .form-inline .form-group, .form-inline .navbar-form {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle; }
+ .form-inline .form-control, .form-inline .navbar-form {
+ display: inline-block;
+ width: auto;
+ vertical-align: middle; }
+ .form-inline .input-group, .form-inline .navbar-form {
+ display: inline-table;
+ vertical-align: middle; }
+ .form-inline .input-group .input-group-addon, .form-inline .input-group .navbar-form, .form-inline .input-group .input-group-btn, .form-inline .input-group .navbar-form, .form-inline .input-group .form-control, .form-inline .input-group .navbar-form {
+ width: auto; }
+ .form-inline .input-group > .form-control, .form-inline .input-group > .navbar-form {
+ width: 100%; }
+ .form-inline .control-label, .form-inline .navbar-form {
+ margin-bottom: 0;
+ vertical-align: middle; }
+ .form-inline .radio, .form-inline .navbar-form, .form-inline .checkbox, .form-inline .navbar-form {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 0;
+ vertical-align: middle; }
+ .form-inline .radio input[type="radio"], .form-inline .radio .navbar-form, .form-inline .checkbox input[type="checkbox"], .form-inline .checkbox .navbar-form {
+ float: none;
+ margin-left: 0; }
+ .form-inline .has-feedback .form-control-feedback, .form-inline .has-feedback .navbar-form {
+ top: 0; } }
+
+.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 7px; }
+.form-horizontal .radio, .form-horizontal .checkbox {
+ min-height: 27px; }
+.form-horizontal .form-group {
+ margin-left: -15px;
+ margin-right: -15px; }
+ .form-horizontal .form-group:before, .form-horizontal .form-group:after {
+ content: " ";
+ display: table; }
+ .form-horizontal .form-group:after {
+ clear: both; }
+.form-horizontal .form-control-static {
+ padding-top: 7px;
+ padding-bottom: 7px; }
+@media (min-width: 768px) {
+ .form-horizontal .control-label {
+ text-align: right;
+ margin-bottom: 0;
+ padding-top: 7px; } }
+.form-horizontal .has-feedback .form-control-feedback {
+ top: 0;
+ right: 15px; }
+
+.btn {
+ display: inline-block;
+ margin-bottom: 0;
+ font-weight: normal;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 6px 12px;
+ font-size: 14px;
+ line-height: 1.42857;
+ border-radius: 4px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none; }
+ .btn:focus, .btn:active:focus, .btn.active:focus {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px; }
+ .btn:hover, .btn:focus {
+ color: #333;
+ text-decoration: none; }
+ .btn:active, .btn.active {
+ outline: 0;
+ background-image: none;
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
+ .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
+ cursor: not-allowed;
+ pointer-events: none;
+ opacity: 0.65;
+ filter: alpha(opacity=65);
+ box-shadow: none; }
+
+.btn-default {
+ color: #333;
+ background-color: #fff;
+ border-color: #ccc; }
+ .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
+ color: #333;
+ background-color: #e6e6e6;
+ border-color: #adadad; }
+ .btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
+ background-image: none; }
+ .btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+ background-color: #fff;
+ border-color: #ccc; }
+ .btn-default .badge {
+ color: #fff;
+ background-color: #333; }
+
+.btn-primary {
+ color: #fff;
+ background-color: #428bca;
+ border-color: #3580bd; }
+ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
+ color: #fff;
+ background-color: #3073a9;
+ border-color: #28608e; }
+ .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
+ background-image: none; }
+ .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
+ background-color: #428bca;
+ border-color: #3580bd; }
+ .btn-primary .badge {
+ color: #428bca;
+ background-color: #fff; }
+
+.btn-success {
+ color: #fff;
+ background-color: #5cb85c;
+ border-color: #4eae4c; }
+ .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
+ color: #fff;
+ background-color: #469d44;
+ border-color: #3b8439; }
+ .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
+ background-image: none; }
+ .btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active {
+ background-color: #5cb85c;
+ border-color: #4eae4c; }
+ .btn-success .badge {
+ color: #5cb85c;
+ background-color: #fff; }
+
+.btn-info {
+ color: #fff;
+ background-color: #5bc0de;
+ border-color: #46bada; }
+ .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
+ color: #fff;
+ background-color: #31b2d5;
+ border-color: #269cbc; }
+ .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
+ background-image: none; }
+ .btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active {
+ background-color: #5bc0de;
+ border-color: #46bada; }
+ .btn-info .badge {
+ color: #5bc0de;
+ background-color: #fff; }
+
+.btn-warning {
+ color: #fff;
+ background-color: #f0ad4e;
+ border-color: #eea236; }
+ .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
+ color: #fff;
+ background-color: #ec971f;
+ border-color: #d58112; }
+ .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
+ background-image: none; }
+ .btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active {
+ background-color: #f0ad4e;
+ border-color: #eea236; }
+ .btn-warning .badge {
+ color: #f0ad4e;
+ background-color: #fff; }
+
+.btn-danger {
+ color: #fff;
+ background-color: #d9534f;
+ border-color: #d43d3a; }
+ .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
+ color: #fff;
+ background-color: #c92e2c;
+ border-color: #ac2525; }
+ .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
+ background-image: none; }
+ .btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active {
+ background-color: #d9534f;
+ border-color: #d43d3a; }
+ .btn-danger .badge {
+ color: #d9534f;
+ background-color: #fff; }
+
+.btn-link {
+ color: #428bca;
+ font-weight: normal;
+ cursor: pointer;
+ border-radius: 0; }
+ .btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
+ background-color: transparent;
+ box-shadow: none; }
+ .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
+ border-color: transparent; }
+ .btn-link:hover, .btn-link:focus {
+ color: #2a6596;
+ text-decoration: underline;
+ background-color: transparent; }
+ .btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus {
+ color: #999999;
+ text-decoration: none; }
+
+.btn-lg, .btn-group-lg > .btn {
+ padding: 10px 16px;
+ font-size: 18px;
+ line-height: 1.33;
+ border-radius: 6px; }
+
+.btn-sm, .btn-group-sm > .btn {
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px; }
+
+.btn-xs, .btn-group-xs > .btn {
+ padding: 1px 5px;
+ font-size: 12px;
+ line-height: 1.5;
+ border-radius: 3px; }
+
+.btn-block {
+ display: block;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0; }
+
+.btn-block + .btn-block {
+ margin-top: 5px; }
+
+input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block {
+ width: 100%; }
+
+.fade {
+ opacity: 0;
+ transition: opacity 0.15s linear; }
+ .fade.in {
+ opacity: 1; }
+
+.collapse {
+ display: none; }
+ .collapse.in {
+ display: block; }
+
+tr.collapse.in {
+ display: table-row; }
+
+tbody.collapse.in {
+ display: table-row-group; }
+
+.collapsing {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ transition: height 0.35s ease; }
+
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: 2px;
+ vertical-align: middle;
+ border-top: 4px solid;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent; }
+
+.dropdown {
+ position: relative; }
+
+.dropdown-toggle:focus {
+ outline: 0; }
+
+.dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1000;
+ display: none;
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0;
+ list-style: none;
+ font-size: 14px;
+ text-align: left;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ background-clip: padding-box; }
+ .dropdown-menu.pull-right {
+ right: 0;
+ left: auto; }
+ .dropdown-menu .divider {
+ height: 1px;
+ margin: 9px 0;
+ overflow: hidden;
+ background-color: #e5e5e5; }
+ .dropdown-menu > li > a {
+ display: block;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: 1.42857;
+ color: #333333;
+ white-space: nowrap; }
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+ text-decoration: none;
+ color: #262626;
+ background-color: #f5f5f5; }
+
+.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
+ color: #fff;
+ text-decoration: none;
+ outline: 0;
+ background-color: #428bca; }
+
+.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+ color: #999999; }
+
+.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
+ text-decoration: none;
+ background-color: transparent;
+ background-image: none;
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+ cursor: not-allowed; }
+
+.open > .dropdown-menu {
+ display: block; }
+.open > a {
+ outline: 0; }
+
+.dropdown-menu-right {
+ left: auto;
+ right: 0; }
+
+.dropdown-menu-left {
+ left: 0;
+ right: auto; }
+
+.dropdown-header {
+ display: block;
+ padding: 3px 20px;
+ font-size: 12px;
+ line-height: 1.42857;
+ color: #999999; }
+
+.dropdown-backdrop {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ z-index: 990; }
+
+.pull-right > .dropdown-menu {
+ right: 0;
+ left: auto; }
+
+.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
+ border-top: 0;
+ border-bottom: 4px solid;
+ content: ""; }
+.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
+ top: auto;
+ bottom: 100%;
+ margin-bottom: 1px; }
+
+@media (min-width: 768px) {
+ .navbar-right .dropdown-menu {
+ right: 0;
+ left: auto; }
+ .navbar-right .dropdown-menu-left {
+ left: 0;
+ right: auto; } }
+
+.btn-group, .btn-group-vertical {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle; }
+ .btn-group > .btn, .btn-group-vertical > .btn {
+ position: relative;
+ float: left; }
+ .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
+ z-index: 2; }
+ .btn-group > .btn:focus, .btn-group-vertical > .btn:focus {
+ outline: 0; }
+
+.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
+ margin-left: -1px; }
+
+.btn-toolbar {
+ margin-left: -5px; }
+ .btn-toolbar:before, .btn-toolbar:after {
+ content: " ";
+ display: table; }
+ .btn-toolbar:after {
+ clear: both; }
+ .btn-toolbar .btn-group, .btn-toolbar .input-group {
+ float: left; }
+ .btn-toolbar > .btn, .btn-toolbar > .btn-group, .btn-toolbar > .input-group {
+ margin-left: 5px; }
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+ border-radius: 0; }
+
+.btn-group > .btn:first-child {
+ margin-left: 0; }
+ .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+
+.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0; }
+
+.btn-group > .btn-group {
+ float: left; }
+
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+ border-radius: 0; }
+
+.btn-group > .btn-group:first-child > .btn:last-child, .btn-group > .btn-group:first-child > .dropdown-toggle {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+
+.btn-group > .btn-group:last-child > .btn:first-child {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0; }
+
+.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
+ outline: 0; }
+
+.btn-group > .btn + .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px; }
+
+.btn-group > .btn-lg + .dropdown-toggle, .btn-group > .btn-lg + .btn-group-lg > .btn, .btn-group-lg > .btn-group > .btn-lg + .btn {
+ padding-left: 12px;
+ padding-right: 12px; }
+
+.btn-group.open .dropdown-toggle {
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
+ .btn-group.open .dropdown-toggle.btn-link {
+ box-shadow: none; }
+
+.btn .caret {
+ margin-left: 0; }
+
+.btn-lg .caret, .btn-lg .btn-group-lg > .btn, .btn-group-lg > .btn-lg .btn {
+ border-width: 5px 5px 0;
+ border-bottom-width: 0; }
+
+.dropup .btn-lg .caret, .dropup .btn-lg .btn-group-lg > .btn, .btn-group-lg > .dropup .btn-lg .btn {
+ border-width: 0 5px 5px; }
+
+.btn-group-vertical > .btn, .btn-group-vertical > .btn-group, .btn-group-vertical > .btn-group > .btn {
+ display: block;
+ float: none;
+ width: 100%;
+ max-width: 100%; }
+.btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after {
+ content: " ";
+ display: table; }
+.btn-group-vertical > .btn-group:after {
+ clear: both; }
+.btn-group-vertical > .btn-group > .btn {
+ float: none; }
+.btn-group-vertical > .btn + .btn, .btn-group-vertical > .btn + .btn-group, .btn-group-vertical > .btn-group + .btn, .btn-group-vertical > .btn-group + .btn-group {
+ margin-top: -1px;
+ margin-left: 0; }
+
+.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+ border-radius: 0; }
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0; }
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+ border-bottom-left-radius: 4px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0; }
+
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+ border-radius: 0; }
+
+.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0; }
+
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0; }
+
+.btn-group-justified {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: separate; }
+ .btn-group-justified > .btn, .btn-group-justified > .btn-group {
+ float: none;
+ display: table-cell;
+ width: 1%; }
+ .btn-group-justified > .btn-group .btn {
+ width: 100%; }
+
+[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="checkbox"] {
+ position: absolute;
+ z-index: -1;
+ opacity: 0; }
+
+.input-group {
+ position: relative;
+ display: table;
+ border-collapse: separate; }
+ .input-group[class*="col-"] {
+ float: none;
+ padding-left: 0;
+ padding-right: 0; }
+ .input-group .form-control {
+ position: relative;
+ z-index: 2;
+ float: left;
+ width: 100%;
+ margin-bottom: 0; }
+
+.input-group-addon, .input-group-btn, .input-group .form-control {
+ display: table-cell; }
+ .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) {
+ border-radius: 0; }
+
+.input-group-addon, .input-group-btn {
+ width: 1%;
+ white-space: nowrap;
+ vertical-align: middle; }
+
+.input-group-addon {
+ padding: 6px 12px;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 1;
+ color: #555555;
+ text-align: center;
+ background-color: #eeeeee;
+ border: 1px solid #ccc;
+ border-radius: 4px; }
+ .input-group-addon.input-sm, .input-group-sm > .input-group-addon.form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .input-group-addon.btn {
+ padding: 5px 10px;
+ font-size: 12px;
+ border-radius: 3px; }
+ .input-group-addon.input-lg, .input-group-lg > .input-group-addon.form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .input-group-addon.btn {
+ padding: 10px 16px;
+ font-size: 18px;
+ border-radius: 6px; }
+ .input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] {
+ margin-top: 0; }
+
+.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+
+.input-group-addon:first-child {
+ border-right: 0; }
+
+.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0; }
+
+.input-group-addon:last-child {
+ border-left: 0; }
+
+.input-group-btn {
+ position: relative;
+ font-size: 0;
+ white-space: nowrap; }
+ .input-group-btn > .btn {
+ position: relative; }
+ .input-group-btn > .btn + .btn {
+ margin-left: -1px; }
+ .input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
+ z-index: 2; }
+ .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group {
+ margin-right: -1px; }
+ .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
+ margin-left: -1px; }
+
+.nav {
+ margin-bottom: 0;
+ padding-left: 0;
+ list-style: none; }
+ .nav:before, .nav:after {
+ content: " ";
+ display: table; }
+ .nav:after {
+ clear: both; }
+ .nav > li {
+ position: relative;
+ display: block; }
+ .nav > li > a {
+ position: relative;
+ display: block;
+ padding: 10px 15px; }
+ .nav > li > a:hover, .nav > li > a:focus {
+ text-decoration: none;
+ background-color: #eeeeee; }
+ .nav > li.disabled > a {
+ color: #999999; }
+ .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
+ color: #999999;
+ text-decoration: none;
+ background-color: transparent;
+ cursor: not-allowed; }
+ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+ background-color: #eeeeee;
+ border-color: #428bca; }
+ .nav .nav-divider {
+ height: 1px;
+ margin: 9px 0;
+ overflow: hidden;
+ background-color: #e5e5e5; }
+ .nav > li > a > img {
+ max-width: none; }
+
+.nav-tabs {
+ border-bottom: 1px solid #ddd; }
+ .nav-tabs > li {
+ float: left;
+ margin-bottom: -1px; }
+ .nav-tabs > li > a {
+ margin-right: 2px;
+ line-height: 1.42857;
+ border: 1px solid transparent;
+ border-radius: 4px 4px 0 0; }
+ .nav-tabs > li > a:hover {
+ border-color: #eeeeee #eeeeee #ddd; }
+ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+ color: #555555;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ cursor: default; }
+
+.nav-pills > li {
+ float: left; }
+ .nav-pills > li > a {
+ border-radius: 4px; }
+ .nav-pills > li + li {
+ margin-left: 2px; }
+ .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
+ color: #fff;
+ background-color: #428bca; }
+
+.nav-stacked > li {
+ float: none; }
+ .nav-stacked > li + li {
+ margin-top: 2px;
+ margin-left: 0; }
+
+.nav-justified, .nav-tabs.nav-justified {
+ width: 100%; }
+ .nav-justified > li, .nav-justified > .nav-tabs.nav-justified {
+ float: none; }
+ .nav-justified > li > a, .nav-justified > li > .nav-tabs.nav-justified {
+ text-align: center;
+ margin-bottom: 5px; }
+ .nav-justified > .dropdown .dropdown-menu, .nav-justified > .dropdown .nav-tabs.nav-justified {
+ top: auto;
+ left: auto; }
+ @media (min-width: 768px) {
+ .nav-justified > li, .nav-justified > .nav-tabs.nav-justified {
+ display: table-cell;
+ width: 1%; }
+ .nav-justified > li > a, .nav-justified > li > .nav-tabs.nav-justified {
+ margin-bottom: 0; } }
+
+.nav-tabs-justified, .nav-tabs.nav-justified, .nav-tabs.nav-justified {
+ border-bottom: 0; }
+ .nav-tabs-justified > li > a, .nav-tabs-justified > li > .nav-tabs.nav-justified, .nav-tabs-justified > li > .nav-tabs.nav-justified {
+ margin-right: 0;
+ border-radius: 4px; }
+ .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > a:focus, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified {
+ border: 1px solid #ddd; }
+ @media (min-width: 768px) {
+ .nav-tabs-justified > li > a, .nav-tabs-justified > li > .nav-tabs.nav-justified, .nav-tabs-justified > li > .nav-tabs.nav-justified {
+ border-bottom: 1px solid #ddd;
+ border-radius: 4px 4px 0 0; }
+ .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > a:focus, .nav-tabs-justified > .active > .nav-tabs.nav-justified, .nav-tabs-justified > .active > .nav-tabs.nav-justified {
+ border-bottom-color: #fff; } }
+
+.tab-content > .tab-pane {
+ display: none; }
+.tab-content > .active {
+ display: block; }
+
+.nav-tabs .dropdown-menu {
+ margin-top: -1px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0; }
+
+.navbar {
+ position: relative;
+ min-height: 50px;
+ margin-bottom: 20px;
+ border: 1px solid transparent; }
+ .navbar:before, .navbar:after {
+ content: " ";
+ display: table; }
+ .navbar:after {
+ clear: both; }
+ @media (min-width: 768px) {
+ .navbar {
+ border-radius: 4px; } }
+
+.navbar-header:before, .navbar-header:after {
+ content: " ";
+ display: table; }
+.navbar-header:after {
+ clear: both; }
+@media (min-width: 768px) {
+ .navbar-header {
+ float: left; } }
+
+.navbar-collapse {
+ overflow-x: visible;
+ padding-right: 15px;
+ padding-left: 15px;
+ border-top: 1px solid transparent;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ -webkit-overflow-scrolling: touch; }
+ .navbar-collapse:before, .navbar-collapse:after {
+ content: " ";
+ display: table; }
+ .navbar-collapse:after {
+ clear: both; }
+ .navbar-collapse.in {
+ overflow-y: auto; }
+ @media (min-width: 768px) {
+ .navbar-collapse {
+ width: auto;
+ border-top: 0;
+ box-shadow: none; }
+ .navbar-collapse.collapse {
+ display: block !important;
+ height: auto !important;
+ padding-bottom: 0;
+ overflow: visible !important; }
+ .navbar-collapse.in {
+ overflow-y: visible; }
+ .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
+ padding-left: 0;
+ padding-right: 0; } }
+
+.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
+ max-height: 340px; }
+ @media (max-width: 480px) and (orientation: landscape) {
+ .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
+ max-height: 200px; } }
+
+.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
+ margin-right: -15px;
+ margin-left: -15px; }
+ @media (min-width: 768px) {
+ .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
+ margin-right: 0;
+ margin-left: 0; } }
+
+.navbar-static-top {
+ z-index: 1000;
+ border-width: 0 0 1px; }
+ @media (min-width: 768px) {
+ .navbar-static-top {
+ border-radius: 0; } }
+
+.navbar-fixed-top, .navbar-fixed-bottom {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: 1030; }
+ @media (min-width: 768px) {
+ .navbar-fixed-top, .navbar-fixed-bottom {
+ border-radius: 0; } }
+
+.navbar-fixed-top {
+ top: 0;
+ border-width: 0 0 1px; }
+
+.navbar-fixed-bottom {
+ bottom: 0;
+ margin-bottom: 0;
+ border-width: 1px 0 0; }
+
+.navbar-brand {
+ float: left;
+ padding: 15px 15px;
+ font-size: 18px;
+ line-height: 20px;
+ height: 50px; }
+ .navbar-brand:hover, .navbar-brand:focus {
+ text-decoration: none; }
+ @media (min-width: 768px) {
+ .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
+ margin-left: -15px; } }
+
+.navbar-toggle {
+ position: relative;
+ float: right;
+ margin-right: 15px;
+ padding: 9px 10px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ background-color: transparent;
+ background-image: none;
+ border: 1px solid transparent;
+ border-radius: 4px; }
+ .navbar-toggle:focus {
+ outline: 0; }
+ .navbar-toggle .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ border-radius: 1px; }
+ .navbar-toggle .icon-bar + .icon-bar {
+ margin-top: 4px; }
+ @media (min-width: 768px) {
+ .navbar-toggle {
+ display: none; } }
+
+.navbar-nav {
+ margin: 7.5px -15px; }
+ .navbar-nav > li > a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ line-height: 20px; }
+ @media (max-width: 767px) {
+ .navbar-nav .open .dropdown-menu {
+ position: static;
+ float: none;
+ width: auto;
+ margin-top: 0;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none; }
+ .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
+ padding: 5px 15px 5px 25px; }
+ .navbar-nav .open .dropdown-menu > li > a {
+ line-height: 20px; }
+ .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
+ background-image: none; } }
+ @media (min-width: 768px) {
+ .navbar-nav {
+ float: left;
+ margin: 0; }
+ .navbar-nav > li {
+ float: left; }
+ .navbar-nav > li > a {
+ padding-top: 15px;
+ padding-bottom: 15px; }
+ .navbar-nav.navbar-right:last-child {
+ margin-right: -15px; } }
+
+@media (min-width: 768px) {
+ .navbar-left {
+ float: left !important; }
+ .navbar-right {
+ float: right !important; } }
+
+.navbar-form {
+ margin-left: -15px;
+ margin-right: -15px;
+ padding: 10px 15px;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+ margin-top: 8px;
+ margin-bottom: 8px; }
+ @media (max-width: 767px) {
+ .navbar-form .form-group {
+ margin-bottom: 5px; } }
+ @media (min-width: 768px) {
+ .navbar-form {
+ width: auto;
+ border: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ box-shadow: none; }
+ .navbar-form.navbar-right:last-child {
+ margin-right: -15px; } }
+
+.navbar-nav > li > .dropdown-menu {
+ margin-top: 0;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0; }
+
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0; }
+
+.navbar-btn {
+ margin-top: 8px;
+ margin-bottom: 8px; }
+ .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
+ margin-top: 10px;
+ margin-bottom: 10px; }
+ .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
+ margin-top: 14px;
+ margin-bottom: 14px; }
+
+.navbar-text {
+ margin-top: 15px;
+ margin-bottom: 15px; }
+ @media (min-width: 768px) {
+ .navbar-text {
+ float: left;
+ margin-left: 15px;
+ margin-right: 15px; }
+ .navbar-text.navbar-right:last-child {
+ margin-right: 0; } }
+
+.navbar-default {
+ background-color: #f8f8f8;
+ border-color: #e7e7e7; }
+ .navbar-default .navbar-brand {
+ color: #777; }
+ .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+ color: #5e5e5e;
+ background-color: transparent; }
+ .navbar-default .navbar-text {
+ color: #777; }
+ .navbar-default .navbar-nav > li > a {
+ color: #777; }
+ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+ color: #333;
+ background-color: transparent; }
+ .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+ color: #555;
+ background-color: #e7e7e7; }
+ .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
+ color: #ccc;
+ background-color: transparent; }
+ .navbar-default .navbar-toggle {
+ border-color: #ddd; }
+ .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+ background-color: #ddd; }
+ .navbar-default .navbar-toggle .icon-bar {
+ background-color: #888; }
+ .navbar-default .navbar-collapse, .navbar-default .navbar-form {
+ border-color: #e7e7e7; }
+ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
+ background-color: #e7e7e7;
+ color: #555; }
+ @media (max-width: 767px) {
+ .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+ color: #777; }
+ .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+ color: #333;
+ background-color: transparent; }
+ .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+ color: #555;
+ background-color: #e7e7e7; }
+ .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+ color: #ccc;
+ background-color: transparent; } }
+ .navbar-default .navbar-link {
+ color: #777; }
+ .navbar-default .navbar-link:hover {
+ color: #333; }
+ .navbar-default .btn-link {
+ color: #777; }
+ .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
+ color: #333; }
+ .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus {
+ color: #ccc; }
+
+.navbar-inverse {
+ background-color: #222;
+ border-color: #090909; }
+ .navbar-inverse .navbar-brand {
+ color: #999999; }
+ .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
+ color: #fff;
+ background-color: transparent; }
+ .navbar-inverse .navbar-text {
+ color: #999999; }
+ .navbar-inverse .navbar-nav > li > a {
+ color: #999999; }
+ .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
+ color: #fff;
+ background-color: transparent; }
+ .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+ color: #fff;
+ background-color: #090909; }
+ .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {
+ color: #444;
+ background-color: transparent; }
+ .navbar-inverse .navbar-toggle {
+ border-color: #333; }
+ .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
+ background-color: #333; }
+ .navbar-inverse .navbar-toggle .icon-bar {
+ background-color: #fff; }
+ .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+ border-color: #101010; }
+ .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
+ background-color: #090909;
+ color: #fff; }
+ @media (max-width: 767px) {
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+ border-color: #090909; }
+ .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
+ background-color: #090909; }
+ .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+ color: #999999; }
+ .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
+ color: #fff;
+ background-color: transparent; }
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
+ color: #fff;
+ background-color: #090909; }
+ .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+ color: #444;
+ background-color: transparent; } }
+ .navbar-inverse .navbar-link {
+ color: #999999; }
+ .navbar-inverse .navbar-link:hover {
+ color: #fff; }
+ .navbar-inverse .btn-link {
+ color: #999999; }
+ .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
+ color: #fff; }
+ .navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus {
+ color: #444; }
+
+.breadcrumb {
+ padding: 8px 15px;
+ margin-bottom: 20px;
+ list-style: none;
+ background-color: #f5f5f5;
+ border-radius: 4px; }
+ .breadcrumb > li {
+ display: inline-block; }
+ .breadcrumb > li + li:before {
+ content: "/\00a0";
+ padding: 0 5px;
+ color: #ccc; }
+ .breadcrumb > .active {
+ color: #999999; }
+
+.pagination {
+ display: inline-block;
+ padding-left: 0;
+ margin: 20px 0;
+ border-radius: 4px; }
+ .pagination > li {
+ display: inline; }
+ .pagination > li > a, .pagination > li > span {
+ position: relative;
+ float: left;
+ padding: 6px 12px;
+ line-height: 1.42857;
+ text-decoration: none;
+ color: #428bca;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ margin-left: -1px; }
+ .pagination > li:first-child > a, .pagination > li:first-child > span {
+ margin-left: 0;
+ border-bottom-left-radius: 4px;
+ border-top-left-radius: 4px; }
+ .pagination > li:last-child > a, .pagination > li:last-child > span {
+ border-bottom-right-radius: 4px;
+ border-top-right-radius: 4px; }
+ .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
+ color: #2a6596;
+ background-color: #eeeeee;
+ border-color: #ddd; }
+ .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
+ z-index: 2;
+ color: #fff;
+ background-color: #428bca;
+ border-color: #428bca;
+ cursor: default; }
+ .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
+ color: #999999;
+ background-color: #fff;
+ border-color: #ddd;
+ cursor: not-allowed; }
+
+.pagination-lg > li > a, .pagination-lg > li > span {
+ padding: 10px 16px;
+ font-size: 18px; }
+.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
+ border-bottom-left-radius: 6px;
+ border-top-left-radius: 6px; }
+.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
+ border-bottom-right-radius: 6px;
+ border-top-right-radius: 6px; }
+
+.pagination-sm > li > a, .pagination-sm > li > span {
+ padding: 5px 10px;
+ font-size: 12px; }
+.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+
+.pager {
+ padding-left: 0;
+ margin: 20px 0;
+ list-style: none;
+ text-align: center; }
+ .pager:before, .pager:after {
+ content: " ";
+ display: table; }
+ .pager:after {
+ clear: both; }
+ .pager li {
+ display: inline; }
+ .pager li > a, .pager li > span {
+ display: inline-block;
+ padding: 5px 14px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 15px; }
+ .pager li > a:hover, .pager li > a:focus {
+ text-decoration: none;
+ background-color: #eeeeee; }
+ .pager .next > a, .pager .next > span {
+ float: right; }
+ .pager .previous > a, .pager .previous > span {
+ float: left; }
+ .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span {
+ color: #999999;
+ background-color: #fff;
+ cursor: not-allowed; }
+
+.label {
+ display: inline;
+ padding: 0.2em 0.6em 0.3em;
+ font-size: 75%;
+ font-weight: bold;
+ line-height: 1;
+ color: #fff;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ border-radius: 0.25em; }
+ .label:empty {
+ display: none; }
+ .btn .label {
+ position: relative;
+ top: -1px; }
+
+a.label:hover, a.label:focus {
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer; }
+
+.label-default {
+ background-color: #999999; }
+ .label-default[href]:hover, .label-default[href]:focus {
+ background-color: #808080; }
+
+.label-primary {
+ background-color: #428bca; }
+ .label-primary[href]:hover, .label-primary[href]:focus {
+ background-color: #3073a9; }
+
+.label-success {
+ background-color: #5cb85c; }
+ .label-success[href]:hover, .label-success[href]:focus {
+ background-color: #469d44; }
+
+.label-info {
+ background-color: #5bc0de; }
+ .label-info[href]:hover, .label-info[href]:focus {
+ background-color: #31b2d5; }
+
+.label-warning {
+ background-color: #f0ad4e; }
+ .label-warning[href]:hover, .label-warning[href]:focus {
+ background-color: #ec971f; }
+
+.label-danger {
+ background-color: #d9534f; }
+ .label-danger[href]:hover, .label-danger[href]:focus {
+ background-color: #c92e2c; }
+
+.badge {
+ display: inline-block;
+ min-width: 10px;
+ padding: 3px 7px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #fff;
+ line-height: 1;
+ vertical-align: baseline;
+ white-space: nowrap;
+ text-align: center;
+ background-color: #999999;
+ border-radius: 10px; }
+ .badge:empty {
+ display: none; }
+ .btn .badge {
+ position: relative;
+ top: -1px; }
+ .btn-xs .badge, .btn-xs .btn-group-xs > .btn, .btn-group-xs > .btn-xs .btn {
+ top: 0;
+ padding: 1px 5px; }
+ a.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
+ color: #428bca;
+ background-color: #fff; }
+ .nav-pills > li > a > .badge {
+ margin-left: 3px; }
+
+a.badge:hover, a.badge:focus {
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer; }
+
+.jumbotron {
+ padding: 30px;
+ margin-bottom: 30px;
+ color: inherit;
+ background-color: #eeeeee; }
+ .jumbotron h1, .jumbotron .h1 {
+ color: inherit; }
+ .jumbotron p {
+ margin-bottom: 15px;
+ font-size: 21px;
+ font-weight: 200; }
+ .jumbotron > hr {
+ border-top-color: #d5d5d5; }
+ .container .jumbotron {
+ border-radius: 6px; }
+ .jumbotron .container {
+ max-width: 100%; }
+ @media screen and (min-width: 768px) {
+ .jumbotron {
+ padding-top: 48px;
+ padding-bottom: 48px; }
+ .container .jumbotron {
+ padding-left: 60px;
+ padding-right: 60px; }
+ .jumbotron h1, .jumbotron .h1 {
+ font-size: 63px; } }
+
+.thumbnail {
+ display: block;
+ padding: 4px;
+ margin-bottom: 20px;
+ line-height: 1.42857;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ transition: all 0.2s ease-in-out; }
+ .thumbnail > img, .thumbnail a > img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ margin-left: auto;
+ margin-right: auto; }
+ .thumbnail .caption {
+ padding: 9px;
+ color: #333333; }
+
+a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
+ border-color: #428bca; }
+
+.alert {
+ padding: 15px;
+ margin-bottom: 20px;
+ border: 1px solid transparent;
+ border-radius: 4px; }
+ .alert h4 {
+ margin-top: 0;
+ color: inherit; }
+ .alert .alert-link {
+ font-weight: bold; }
+ .alert > p, .alert > ul {
+ margin-bottom: 0; }
+ .alert > p + p {
+ margin-top: 5px; }
+
+.alert-dismissable {
+ padding-right: 35px; }
+ .alert-dismissable .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ color: inherit; }
+
+.alert-success {
+ background-color: #dff0d8;
+ border-color: #d7e9c6;
+ color: #3c763d; }
+ .alert-success hr {
+ border-top-color: #cae2b3; }
+ .alert-success .alert-link {
+ color: #2b542b; }
+
+.alert-info {
+ background-color: #d9edf7;
+ border-color: #bce9f1;
+ color: #31708f; }
+ .alert-info hr {
+ border-top-color: #a6e2ec; }
+ .alert-info .alert-link {
+ color: #245369; }
+
+.alert-warning {
+ background-color: #fcf8e3;
+ border-color: #faeacc;
+ color: #8a6d3b; }
+ .alert-warning hr {
+ border-top-color: #f7e0b5; }
+ .alert-warning .alert-link {
+ color: #66502c; }
+
+.alert-danger {
+ background-color: #f2dede;
+ border-color: #ebccd1;
+ color: #a94442; }
+ .alert-danger hr {
+ border-top-color: #e4b9c0; }
+ .alert-danger .alert-link {
+ color: #843534; }
+
+@-webkit-keyframes progress-bar-stripes {
+ from {
+ background-position: 40px 0; }
+
+ to {
+ background-position: 0 0; } }
+
+@keyframes progress-bar-stripes {
+ from {
+ background-position: 40px 0; }
+
+ to {
+ background-position: 0 0; } }
+
+.progress {
+ overflow: hidden;
+ height: 20px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
+
+.progress-bar {
+ float: left;
+ width: 0%;
+ height: 100%;
+ font-size: 12px;
+ line-height: 20px;
+ color: #fff;
+ text-align: center;
+ background-color: #428bca;
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+ transition: width 0.6s ease; }
+
+.progress-striped .progress-bar {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+ background-size: 40px 40px; }
+
+.progress.active .progress-bar {
+ -webkit-animation: progress-bar-stripes 2s linear infinite;
+ animation: progress-bar-stripes 2s linear infinite; }
+
+.progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] {
+ min-width: 30px; }
+.progress-bar[aria-valuenow="0"] {
+ color: #999999;
+ min-width: 30px;
+ background-color: transparent;
+ background-image: none;
+ box-shadow: none; }
+
+.progress-bar-success {
+ background-color: #5cb85c; }
+ .progress-striped .progress-bar-success {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
+
+.progress-bar-info {
+ background-color: #5bc0de; }
+ .progress-striped .progress-bar-info {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
+
+.progress-bar-warning {
+ background-color: #f0ad4e; }
+ .progress-striped .progress-bar-warning {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
+
+.progress-bar-danger {
+ background-color: #d9534f; }
+ .progress-striped .progress-bar-danger {
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }
+
+.media, .media-body {
+ overflow: hidden;
+ zoom: 1; }
+
+.media, .media .media {
+ margin-top: 15px; }
+
+.media:first-child {
+ margin-top: 0; }
+
+.media-object {
+ display: block; }
+
+.media-heading {
+ margin: 0 0 5px; }
+
+.media > .pull-left {
+ margin-right: 10px; }
+.media > .pull-right {
+ margin-left: 10px; }
+
+.media-list {
+ padding-left: 0;
+ list-style: none; }
+
+.list-group {
+ margin-bottom: 20px;
+ padding-left: 0; }
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ margin-bottom: -1px;
+ background-color: #fff;
+ border: 1px solid #ddd; }
+ .list-group-item:first-child {
+ border-top-right-radius: 4px;
+ border-top-left-radius: 4px; }
+ .list-group-item:last-child {
+ margin-bottom: 0;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px; }
+ .list-group-item > .badge {
+ float: right; }
+ .list-group-item > .badge + .badge {
+ margin-right: 5px; }
+
+a.list-group-item {
+ color: #555; }
+ a.list-group-item .list-group-item-heading {
+ color: #333; }
+ a.list-group-item:hover, a.list-group-item:focus {
+ text-decoration: none;
+ color: #555;
+ background-color: #f5f5f5; }
+
+.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
+ background-color: #eeeeee;
+ color: #999999; }
+ .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
+ color: inherit; }
+ .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
+ color: #999999; }
+.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
+ z-index: 2;
+ color: #fff;
+ background-color: #428bca;
+ border-color: #428bca; }
+ .list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading {
+ color: inherit; }
+ .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
+ color: #e1edf7; }
+
+.list-group-item-success {
+ color: #3c763d;
+ background-color: #dff0d8; }
+
+a.list-group-item-success {
+ color: #3c763d; }
+ a.list-group-item-success .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-success:hover, a.list-group-item-success:focus {
+ color: #3c763d;
+ background-color: #d0e9c6; }
+ a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
+ color: #fff;
+ background-color: #3c763d;
+ border-color: #3c763d; }
+
+.list-group-item-info {
+ color: #31708f;
+ background-color: #d9edf7; }
+
+a.list-group-item-info {
+ color: #31708f; }
+ a.list-group-item-info .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-info:hover, a.list-group-item-info:focus {
+ color: #31708f;
+ background-color: #c4e4f3; }
+ a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
+ color: #fff;
+ background-color: #31708f;
+ border-color: #31708f; }
+
+.list-group-item-warning {
+ color: #8a6d3b;
+ background-color: #fcf8e3; }
+
+a.list-group-item-warning {
+ color: #8a6d3b; }
+ a.list-group-item-warning .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-warning:hover, a.list-group-item-warning:focus {
+ color: #8a6d3b;
+ background-color: #faf2cc; }
+ a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
+ color: #fff;
+ background-color: #8a6d3b;
+ border-color: #8a6d3b; }
+
+.list-group-item-danger {
+ color: #a94442;
+ background-color: #f2dede; }
+
+a.list-group-item-danger {
+ color: #a94442; }
+ a.list-group-item-danger .list-group-item-heading {
+ color: inherit; }
+ a.list-group-item-danger:hover, a.list-group-item-danger:focus {
+ color: #a94442;
+ background-color: #ebcccc; }
+ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
+ color: #fff;
+ background-color: #a94442;
+ border-color: #a94442; }
+
+.list-group-item-heading {
+ margin-top: 0;
+ margin-bottom: 5px; }
+
+.list-group-item-text {
+ margin-bottom: 0;
+ line-height: 1.3; }
+
+.panel {
+ margin-bottom: 20px;
+ background-color: #fff;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
+
+.panel-body {
+ padding: 15px; }
+ .panel-body:before, .panel-body:after {
+ content: " ";
+ display: table; }
+ .panel-body:after {
+ clear: both; }
+
+.panel-heading {
+ padding: 10px 15px;
+ border-bottom: 1px solid transparent;
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px; }
+ .panel-heading > .dropdown .dropdown-toggle {
+ color: inherit; }
+
+.panel-title {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 16px;
+ color: inherit; }
+ .panel-title > a {
+ color: inherit; }
+
+.panel-footer {
+ padding: 10px 15px;
+ background-color: #f5f5f5;
+ border-top: 1px solid #ddd;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px; }
+
+.panel > .list-group {
+ margin-bottom: 0; }
+ .panel > .list-group .list-group-item {
+ border-width: 1px 0;
+ border-radius: 0; }
+ .panel > .list-group:first-child .list-group-item:first-child {
+ border-top: 0;
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px; }
+ .panel > .list-group:last-child .list-group-item:last-child {
+ border-bottom: 0;
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px; }
+
+.panel-heading + .list-group .list-group-item:first-child {
+ border-top-width: 0; }
+
+.panel > .table, .panel > .table-responsive > .table {
+ margin-bottom: 0; }
+.panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child {
+ border-top-right-radius: 3px;
+ border-top-left-radius: 3px; }
+ .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
+ border-top-left-radius: 3px; }
+ .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
+ border-top-right-radius: 3px; }
+.panel > .table:last-child, .panel > .table-responsive:last-child > .table:last-child {
+ border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px; }
+ .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
+ border-bottom-left-radius: 3px; }
+ .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
+ border-bottom-right-radius: 3px; }
+.panel > .panel-body + .table, .panel > .panel-body + .table-responsive {
+ border-top: 1px solid #ddd; }
+.panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td {
+ border-top: 0; }
+.panel > .table-bordered, .panel > .table-responsive > .table-bordered {
+ border: 0; }
+ .panel > .table-bordered > thead > tr > th:first-child, .panel > .table-bordered > thead > tr > td:first-child, .panel > .table-bordered > tbody > tr > th:first-child, .panel > .table-bordered > tbody > tr > td:first-child, .panel > .table-bordered > tfoot > tr > th:first-child, .panel > .table-bordered > tfoot > tr > td:first-child, .panel > .table-responsive > .table-bordered > thead > tr > th:first-child, .panel > .table-responsive > .table-bordered > thead > tr > td:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+ border-left: 0; }
+ .panel > .table-bordered > thead > tr > th:last-child, .panel > .table-bordered > thead > tr > td:last-child, .panel > .table-bordered > tbody > tr > th:last-child, .panel > .table-bordered > tbody > tr > td:last-child, .panel > .table-bordered > tfoot > tr > th:last-child, .panel > .table-bordered > tfoot > tr > td:last-child, .panel > .table-responsive > .table-bordered > thead > tr > th:last-child, .panel > .table-responsive > .table-bordered > thead > tr > td:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+ border-right: 0; }
+ .panel > .table-bordered > thead > tr:first-child > td, .panel > .table-bordered > thead > tr:first-child > th, .panel > .table-bordered > tbody > tr:first-child > td, .panel > .table-bordered > tbody > tr:first-child > th, .panel > .table-responsive > .table-bordered > thead > tr:first-child > td, .panel > .table-responsive > .table-bordered > thead > tr:first-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
+ border-bottom: 0; }
+ .panel > .table-bordered > tbody > tr:last-child > td, .panel > .table-bordered > tbody > tr:last-child > th, .panel > .table-bordered > tfoot > tr:last-child > td, .panel > .table-bordered > tfoot > tr:last-child > th, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
+ border-bottom: 0; }
+.panel > .table-responsive {
+ border: 0;
+ margin-bottom: 0; }
+
+.panel-group {
+ margin-bottom: 20px; }
+ .panel-group .panel {
+ margin-bottom: 0;
+ border-radius: 4px; }
+ .panel-group .panel + .panel {
+ margin-top: 5px; }
+ .panel-group .panel-heading {
+ border-bottom: 0; }
+ .panel-group .panel-heading + .panel-collapse .panel-body {
+ border-top: 1px solid #ddd; }
+ .panel-group .panel-footer {
+ border-top: 0; }
+ .panel-group .panel-footer + .panel-collapse .panel-body {
+ border-bottom: 1px solid #ddd; }
+
+.panel-default {
+ border-color: #ddd; }
+ .panel-default > .panel-heading {
+ color: #333333;
+ background-color: #f5f5f5;
+ border-color: #ddd; }
+ .panel-default > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #ddd; }
+ .panel-default > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #ddd; }
+
+.panel-primary {
+ border-color: #428bca; }
+ .panel-primary > .panel-heading {
+ color: #fff;
+ background-color: #428bca;
+ border-color: #428bca; }
+ .panel-primary > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #428bca; }
+ .panel-primary > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #428bca; }
+
+.panel-success {
+ border-color: #d7e9c6; }
+ .panel-success > .panel-heading {
+ color: #3c763d;
+ background-color: #dff0d8;
+ border-color: #d7e9c6; }
+ .panel-success > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #d7e9c6; }
+ .panel-success > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #d7e9c6; }
+
+.panel-info {
+ border-color: #bce9f1; }
+ .panel-info > .panel-heading {
+ color: #31708f;
+ background-color: #d9edf7;
+ border-color: #bce9f1; }
+ .panel-info > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #bce9f1; }
+ .panel-info > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #bce9f1; }
+
+.panel-warning {
+ border-color: #faeacc; }
+ .panel-warning > .panel-heading {
+ color: #8a6d3b;
+ background-color: #fcf8e3;
+ border-color: #faeacc; }
+ .panel-warning > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #faeacc; }
+ .panel-warning > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #faeacc; }
+
+.panel-danger {
+ border-color: #ebccd1; }
+ .panel-danger > .panel-heading {
+ color: #a94442;
+ background-color: #f2dede;
+ border-color: #ebccd1; }
+ .panel-danger > .panel-heading + .panel-collapse > .panel-body {
+ border-top-color: #ebccd1; }
+ .panel-danger > .panel-footer + .panel-collapse > .panel-body {
+ border-bottom-color: #ebccd1; }
+
+.embed-responsive {
+ position: relative;
+ display: block;
+ height: 0;
+ padding: 0;
+ overflow: hidden; }
+ .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ border: 0; }
+ .embed-responsive.embed-responsive-16by9 {
+ padding-bottom: 56.25%; }
+ .embed-responsive.embed-responsive-4by3 {
+ padding-bottom: 75%; }
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }
+ .well blockquote {
+ border-color: #ddd;
+ border-color: rgba(0, 0, 0, 0.15); }
+
+.well-lg {
+ padding: 24px;
+ border-radius: 6px; }
+
+.well-sm {
+ padding: 9px;
+ border-radius: 3px; }
+
+.close {
+ float: right;
+ font-size: 21px;
+ font-weight: bold;
+ line-height: 1;
+ color: #000;
+ text-shadow: 0 1px 0 #fff;
+ opacity: 0.2;
+ filter: alpha(opacity=20); }
+ .close:hover, .close:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+ opacity: 0.5;
+ filter: alpha(opacity=50); }
+
+button.close {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none; }
+
+.modal-open {
+ overflow: hidden; }
+
+.modal {
+ display: none;
+ overflow: auto;
+ overflow-y: scroll;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1050;
+ -webkit-overflow-scrolling: touch;
+ outline: 0; }
+ .modal.fade .modal-dialog {
+ -webkit-transform: translate(0, -25%);
+ transform: translate(0, -25%);
+ transition: -webkit-transform 0.3s ease-out;
+ transition: transform 0.3s ease-out; }
+ .modal.in .modal-dialog {
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0); }
+
+.modal-dialog {
+ position: relative;
+ width: auto;
+ margin: 10px; }
+
+.modal-content {
+ position: relative;
+ background-color: #fff;
+ border: 1px solid #999;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 6px;
+ box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+ background-clip: padding-box;
+ outline: 0; }
+
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1040;
+ background-color: #000; }
+ .modal-backdrop.fade {
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .modal-backdrop.in {
+ opacity: 0.5;
+ filter: alpha(opacity=50); }
+
+.modal-header {
+ padding: 15px;
+ border-bottom: 1px solid #e5e5e5;
+ min-height: 16.42857px; }
+
+.modal-header .close {
+ margin-top: -2px; }
+
+.modal-title {
+ margin: 0;
+ line-height: 1.42857; }
+
+.modal-body {
+ position: relative;
+ padding: 15px; }
+
+.modal-footer {
+ padding: 15px;
+ text-align: right;
+ border-top: 1px solid #e5e5e5; }
+ .modal-footer:before, .modal-footer:after {
+ content: " ";
+ display: table; }
+ .modal-footer:after {
+ clear: both; }
+ .modal-footer .btn + .btn {
+ margin-left: 5px;
+ margin-bottom: 0; }
+ .modal-footer .btn-group .btn + .btn {
+ margin-left: -1px; }
+ .modal-footer .btn-block + .btn-block {
+ margin-left: 0; }
+
+.modal-scrollbar-measure {
+ position: absolute;
+ top: -9999px;
+ width: 50px;
+ height: 50px;
+ overflow: scroll; }
+
+@media (min-width: 768px) {
+ .modal-dialog {
+ width: 600px;
+ margin: 30px auto; }
+ .modal-content {
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
+ .modal-sm {
+ width: 300px; } }
+
+@media (min-width: 992px) {
+ .modal-lg {
+ width: 900px; } }
+
+.tooltip {
+ position: absolute;
+ z-index: 1070;
+ display: block;
+ visibility: visible;
+ font-size: 12px;
+ line-height: 1.4;
+ opacity: 0;
+ filter: alpha(opacity=0); }
+ .tooltip.in {
+ opacity: 0.9;
+ filter: alpha(opacity=90); }
+ .tooltip.top {
+ margin-top: -3px;
+ padding: 5px 0; }
+ .tooltip.right {
+ margin-left: 3px;
+ padding: 0 5px; }
+ .tooltip.bottom {
+ margin-top: 3px;
+ padding: 5px 0; }
+ .tooltip.left {
+ margin-left: -3px;
+ padding: 0 5px; }
+
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: #fff;
+ text-align: center;
+ text-decoration: none;
+ background-color: #000;
+ border-radius: 4px; }
+
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid; }
+
+.tooltip.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px 5px 0;
+ border-top-color: #000; }
+.tooltip.top-left .tooltip-arrow {
+ bottom: 0;
+ left: 5px;
+ border-width: 5px 5px 0;
+ border-top-color: #000; }
+.tooltip.top-right .tooltip-arrow {
+ bottom: 0;
+ right: 5px;
+ border-width: 5px 5px 0;
+ border-top-color: #000; }
+.tooltip.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -5px;
+ border-width: 5px 5px 5px 0;
+ border-right-color: #000; }
+.tooltip.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -5px;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #000; }
+.tooltip.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #000; }
+.tooltip.bottom-left .tooltip-arrow {
+ top: 0;
+ left: 5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #000; }
+.tooltip.bottom-right .tooltip-arrow {
+ top: 0;
+ right: 5px;
+ border-width: 0 5px 5px;
+ border-bottom-color: #000; }
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1060;
+ display: none;
+ max-width: 276px;
+ padding: 1px;
+ text-align: left;
+ background-color: #fff;
+ background-clip: padding-box;
+ border: 1px solid #ccc;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 6px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ white-space: normal; }
+ .popover.top {
+ margin-top: -10px; }
+ .popover.right {
+ margin-left: 10px; }
+ .popover.bottom {
+ margin-top: 10px; }
+ .popover.left {
+ margin-left: -10px; }
+
+.popover-title {
+ margin: 0;
+ padding: 8px 14px;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 18px;
+ background-color: #f7f7f7;
+ border-bottom: 1px solid #ebebeb;
+ border-radius: 5px 5px 0 0; }
+
+.popover-content {
+ padding: 9px 14px; }
+
+.popover > .arrow, .popover > .arrow:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid; }
+
+.popover > .arrow {
+ border-width: 11px; }
+
+.popover > .arrow:after {
+ border-width: 10px;
+ content: ""; }
+
+.popover.top > .arrow {
+ left: 50%;
+ margin-left: -11px;
+ border-bottom-width: 0;
+ border-top-color: #999999;
+ border-top-color: rgba(0, 0, 0, 0.05);
+ bottom: -11px; }
+ .popover.top > .arrow:after {
+ content: " ";
+ bottom: 1px;
+ margin-left: -10px;
+ border-bottom-width: 0;
+ border-top-color: #fff; }
+.popover.right > .arrow {
+ top: 50%;
+ left: -11px;
+ margin-top: -11px;
+ border-left-width: 0;
+ border-right-color: #999999;
+ border-right-color: rgba(0, 0, 0, 0.05); }
+ .popover.right > .arrow:after {
+ content: " ";
+ left: 1px;
+ bottom: -10px;
+ border-left-width: 0;
+ border-right-color: #fff; }
+.popover.bottom > .arrow {
+ left: 50%;
+ margin-left: -11px;
+ border-top-width: 0;
+ border-bottom-color: #999999;
+ border-bottom-color: rgba(0, 0, 0, 0.05);
+ top: -11px; }
+ .popover.bottom > .arrow:after {
+ content: " ";
+ top: 1px;
+ margin-left: -10px;
+ border-top-width: 0;
+ border-bottom-color: #fff; }
+.popover.left > .arrow {
+ top: 50%;
+ right: -11px;
+ margin-top: -11px;
+ border-right-width: 0;
+ border-left-color: #999999;
+ border-left-color: rgba(0, 0, 0, 0.05); }
+ .popover.left > .arrow:after {
+ content: " ";
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: #fff;
+ bottom: -10px; }
+
+.carousel {
+ position: relative; }
+
+.carousel-inner {
+ position: relative;
+ overflow: hidden;
+ width: 100%; }
+ .carousel-inner > .item {
+ display: none;
+ position: relative;
+ transition: 0.6s ease-in-out left; }
+ .carousel-inner > .item > img, .carousel-inner > .item > a > img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ line-height: 1; }
+ .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
+ display: block; }
+ .carousel-inner > .active {
+ left: 0; }
+ .carousel-inner > .next, .carousel-inner > .prev {
+ position: absolute;
+ top: 0;
+ width: 100%; }
+ .carousel-inner > .next {
+ left: 100%; }
+ .carousel-inner > .prev {
+ left: -100%; }
+ .carousel-inner > .next.left, .carousel-inner > .prev.right {
+ left: 0; }
+ .carousel-inner > .active.left {
+ left: -100%; }
+ .carousel-inner > .active.right {
+ left: 100%; }
+
+.carousel-control {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 15%;
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+ font-size: 20px;
+ color: #fff;
+ text-align: center;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
+ .carousel-control.left {
+ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); }
+ .carousel-control.right {
+ left: auto;
+ right: 0;
+ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); }
+ .carousel-control:hover, .carousel-control:focus {
+ outline: 0;
+ color: #fff;
+ text-decoration: none;
+ opacity: 0.9;
+ filter: alpha(opacity=90); }
+ .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
+ position: absolute;
+ top: 50%;
+ z-index: 5;
+ display: inline-block; }
+ .carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
+ left: 50%;
+ margin-left: -10px; }
+ .carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
+ right: 50%;
+ margin-right: -10px; }
+ .carousel-control .icon-prev, .carousel-control .icon-next {
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ font-family: serif; }
+ .carousel-control .icon-prev:before {
+ content: '\2039'; }
+ .carousel-control .icon-next:before {
+ content: '\203a'; }
+
+.carousel-indicators {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ z-index: 15;
+ width: 60%;
+ margin-left: -30%;
+ padding-left: 0;
+ list-style: none;
+ text-align: center; }
+ .carousel-indicators li {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 1px;
+ text-indent: -999px;
+ border: 1px solid #fff;
+ border-radius: 10px;
+ cursor: pointer;
+ background-color: #000 \9;
+ background-color: rgba(0, 0, 0, 0); }
+ .carousel-indicators .active {
+ margin: 0;
+ width: 12px;
+ height: 12px;
+ background-color: #fff; }
+
+.carousel-caption {
+ position: absolute;
+ left: 15%;
+ right: 15%;
+ bottom: 20px;
+ z-index: 10;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: #fff;
+ text-align: center;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
+ .carousel-caption .btn {
+ text-shadow: none; }
+
+@media screen and (min-width: 768px) {
+ .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
+ width: 30px;
+ height: 30px;
+ margin-top: -15px;
+ font-size: 30px; }
+ .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
+ margin-left: -15px; }
+ .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
+ margin-right: -15px; }
+ .carousel-caption {
+ left: 20%;
+ right: 20%;
+ padding-bottom: 30px; }
+ .carousel-indicators {
+ bottom: 20px; } }
+
+.clearfix:before, .clearfix:after {
+ content: " ";
+ display: table; }
+.clearfix:after {
+ clear: both; }
+
+.center-block {
+ display: block;
+ margin-left: auto;
+ margin-right: auto; }
+
+.pull-right {
+ float: right !important; }
+
+.pull-left {
+ float: left !important; }
+
+.hide {
+ display: none !important; }
+
+.show {
+ display: block !important; }
+
+.invisible {
+ visibility: hidden; }
+
+.text-hide {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0; }
+
+.hidden {
+ display: none !important;
+ visibility: hidden !important; }
+
+.affix {
+ position: fixed; }
+
+@-ms-viewport {
+ width: device-width; }
+
+.visible-xs, .visible-sm, .visible-md, .visible-lg {
+ display: none !important; }
+
+.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
+ display: none !important; }
+
+@media (max-width: 767px) {
+ .visible-xs {
+ display: block !important; }
+ table.visible-xs {
+ display: table; }
+ tr.visible-xs {
+ display: table-row !important; }
+ th.visible-xs, td.visible-xs {
+ display: table-cell !important; } }
+
+@media (max-width: 767px) {
+ .visible-xs-block {
+ display: block !important; } }
+
+@media (max-width: 767px) {
+ .visible-xs-inline {
+ display: inline !important; } }
+
+@media (max-width: 767px) {
+ .visible-xs-inline-block {
+ display: inline-block !important; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-sm {
+ display: block !important; }
+ table.visible-sm {
+ display: table; }
+ tr.visible-sm {
+ display: table-row !important; }
+ th.visible-sm, td.visible-sm {
+ display: table-cell !important; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-sm-block {
+ display: block !important; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-sm-inline {
+ display: inline !important; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-sm-inline-block {
+ display: inline-block !important; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .visible-md {
+ display: block !important; }
+ table.visible-md {
+ display: table; }
+ tr.visible-md {
+ display: table-row !important; }
+ th.visible-md, td.visible-md {
+ display: table-cell !important; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .visible-md-block {
+ display: block !important; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .visible-md-inline {
+ display: inline !important; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .visible-md-inline-block {
+ display: inline-block !important; } }
+
+@media (min-width: 1200px) {
+ .visible-lg {
+ display: block !important; }
+ table.visible-lg {
+ display: table; }
+ tr.visible-lg {
+ display: table-row !important; }
+ th.visible-lg, td.visible-lg {
+ display: table-cell !important; } }
+
+@media (min-width: 1200px) {
+ .visible-lg-block {
+ display: block !important; } }
+
+@media (min-width: 1200px) {
+ .visible-lg-inline {
+ display: inline !important; } }
+
+@media (min-width: 1200px) {
+ .visible-lg-inline-block {
+ display: inline-block !important; } }
+
+@media (max-width: 767px) {
+ .hidden-xs {
+ display: none !important; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .hidden-sm {
+ display: none !important; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .hidden-md {
+ display: none !important; } }
+
+@media (min-width: 1200px) {
+ .hidden-lg {
+ display: none !important; } }
+
+.visible-print {
+ display: none !important; }
+
+@media print {
+ .visible-print {
+ display: block !important; }
+ table.visible-print {
+ display: table; }
+ tr.visible-print {
+ display: table-row !important; }
+ th.visible-print, td.visible-print {
+ display: table-cell !important; } }
+
+.visible-print-block {
+ display: none !important; }
+ @media print {
+ .visible-print-block {
+ display: block !important; } }
+
+.visible-print-inline {
+ display: none !important; }
+ @media print {
+ .visible-print-inline {
+ display: inline !important; } }
+
+.visible-print-inline-block {
+ display: none !important; }
+ @media print {
+ .visible-print-inline-block {
+ display: inline-block !important; } }
+
+@media print {
+ .hidden-print {
+ display: none !important; } }
+
+.browsehappy {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0; }
+
+/* Space out content a bit */
+body {
+ padding-top: 20px;
+ padding-bottom: 20px; }
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header, .marketing, .footer {
+ padding-left: 15px;
+ padding-right: 15px; }
+
+/* Custom page header */
+.header {
+ border-bottom: 1px solid #e5e5e5;
+ /* Make the masthead heading the same height as the navigation */ }
+ .header h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+ line-height: 40px;
+ padding-bottom: 19px; }
+
+/* Custom page footer */
+.footer {
+ padding-top: 19px;
+ color: #777;
+ border-top: 1px solid #e5e5e5; }
+
+.container-narrow > hr {
+ margin: 30px 0; }
+
+/* Main marketing message and sign up button */
+.jumbotron {
+ text-align: center;
+ border-bottom: 1px solid #e5e5e5; }
+ .jumbotron .btn {
+ font-size: 21px;
+ padding: 14px 24px; }
+
+/* Supporting marketing content */
+.marketing {
+ margin: 40px 0; }
+ .marketing p + h4 {
+ margin-top: 28px; }
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+ /* Remove the padding we set earlier */
+ /* Space out the masthead */
+ /* Remove the bottom border on the jumbotron for visual effect */
+ .container {
+ max-width: 730px; }
+ .header, .marketing, .footer {
+ padding-left: 0;
+ padding-right: 0; }
+ .header {
+ margin-bottom: 30px; }
+ .jumbotron {
+ border-bottom: 300; } }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiJGljb24tZm9udC1wYXRoOiBcIi4uL2Jvd2VyX2NvbXBvbmVudHMvYm9vdHN0cmFwLXNhc3Mtb2ZmaWNpYWwvdmVuZG9yL2Fzc2V0cy9mb250cy9ib290c3RyYXAvXCI7XG5cbi8vIGJvd2VyOnNjc3NcbkBpbXBvcnQgXCIuLi9ib3dlcl9jb21wb25lbnRzL2Jvb3RzdHJhcC1zYXNzLW9mZmljaWFsL3ZlbmRvci9hc3NldHMvc3R5bGVzaGVldHMvYm9vdHN0cmFwLnNjc3NcIjtcbi8vIGVuZGJvd2VyXG5cbi5icm93c2VoYXBweSB7XG4gICAgbWFyZ2luOiAwLjJlbSAwO1xuICAgIGJhY2tncm91bmQ6ICNjY2M7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgcGFkZGluZzogMC4yZW0gMDtcbn1cblxuLyogU3BhY2Ugb3V0IGNvbnRlbnQgYSBiaXQgKi9cbmJvZHkge1xuICAgIHBhZGRpbmctdG9wOiAyMHB4O1xuICAgIHBhZGRpbmctYm90dG9tOiAyMHB4O1xufVxuXG4vKiBFdmVyeXRoaW5nIGJ1dCB0aGUganVtYm90cm9uIGdldHMgc2lkZSBzcGFjaW5nIGZvciBtb2JpbGUgZmlyc3Qgdmlld3MgKi9cbi5oZWFkZXIsXG4ubWFya2V0aW5nLFxuLmZvb3RlciB7XG4gICAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICAgIHBhZGRpbmctcmlnaHQ6IDE1cHg7XG59XG5cbi8qIEN1c3RvbSBwYWdlIGhlYWRlciAqL1xuLmhlYWRlciB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG5cbiAgICAvKiBNYWtlIHRoZSBtYXN0aGVhZCBoZWFkaW5nIHRoZSBzYW1lIGhlaWdodCBhcyB0aGUgbmF2aWdhdGlvbiAqL1xuICAgIGgzIHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDQwcHg7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAxOXB4O1xuICAgIH1cbn1cblxuLyogQ3VzdG9tIHBhZ2UgZm9vdGVyICovXG4uZm9vdGVyIHtcbiAgICBwYWRkaW5nLXRvcDogMTlweDtcbiAgICBjb2xvcjogIzc3NztcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2U1ZTVlNTtcbn1cblxuLmNvbnRhaW5lci1uYXJyb3cgPiBociB7XG4gICAgbWFyZ2luOiAzMHB4IDA7XG59XG5cbi8qIE1haW4gbWFya2V0aW5nIG1lc3NhZ2UgYW5kIHNpZ24gdXAgYnV0dG9uICovXG4uanVtYm90cm9uIHtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG4gICAgLmJ0biB7XG4gICAgICAgIGZvbnQtc2l6ZTogMjFweDtcbiAgICAgICAgcGFkZGluZzogMTRweCAyNHB4O1xuICAgIH1cbn1cblxuLyogU3VwcG9ydGluZyBtYXJrZXRpbmcgY29udGVudCAqL1xuLm1hcmtldGluZyB7XG4gICAgbWFyZ2luOiA0MHB4IDA7XG4gICAgcCArIGg0IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMjhweDtcbiAgICB9XG59XG5cbi8qIFJlc3BvbnNpdmU6IFBvcnRyYWl0IHRhYmxldHMgYW5kIHVwICovXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5jb250YWluZXIge1xuICAgICAgICBtYXgtd2lkdGg6IDczMHB4O1xuICAgIH1cblxuICAgIC8qIFJlbW92ZSB0aGUgcGFkZGluZyB3ZSBzZXQgZWFybGllciAqL1xuICAgIC5oZWFkZXIsXG4gICAgLm1hcmtldGluZyxcbiAgICAuZm9vdGVyIHtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAwO1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAwO1xuICAgIH1cblxuICAgIC8qIFNwYWNlIG91dCB0aGUgbWFzdGhlYWQgKi9cbiAgICAuaGVhZGVyIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMzBweDtcbiAgICB9XG5cbiAgICAvKiBSZW1vdmUgdGhlIGJvdHRvbSBib3JkZXIgb24gdGhlIGp1bWJvdHJvbiBmb3IgdmlzdWFsIGVmZmVjdCAqL1xuICAgIC5qdW1ib3Ryb24ge1xuICAgICAgICBib3JkZXItYm90dG9tOiAzMDA7XG4gICAgfVxufVxuXG4vLyB0aGlzIGlzIGEgY29tbWVudC4uLlxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
diff --git a/devtools/client/styleeditor/test/sourcemap-css/test-stylus.css b/devtools/client/styleeditor/test/sourcemap-css/test-stylus.css
new file mode 100644
index 000000000..0ec51da3b
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-css/test-stylus.css
@@ -0,0 +1,7 @@
+div {
+ color: #f06;
+}
+span {
+ background-color: #eee;
+}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3Qtc3R5bHVzLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxPQUFPLEtBQVA7O0FBRUY7RUFDRSxrQkFBa0IsS0FBbEIiLCJmaWxlIjoidGVzdC1zdHlsdXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicGF1bHJvdWdldHBpbmsgPSAjZjA2O1xuXG5kaXZcbiAgY29sb3I6IHBhdWxyb3VnZXRwaW5rXG5cbnNwYW5cbiAgYmFja2dyb3VuZC1jb2xvcjogI0VFRVxuIl19 */ \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemap-sass/media-rules.scss b/devtools/client/styleeditor/test/sourcemap-sass/media-rules.scss
new file mode 100644
index 000000000..4f1c8f216
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-sass/media-rules.scss
@@ -0,0 +1,11 @@
+$break-small: 320px;
+$break-large: 1200px;
+
+div {
+ @media screen and (max-width: $break-small) {
+ width: 100px;
+ }
+ @media screen and (min-width: $break-large) {
+ width: 400px;
+ }
+}
diff --git a/devtools/client/styleeditor/test/sourcemap-sass/sourcemaps.scss b/devtools/client/styleeditor/test/sourcemap-sass/sourcemaps.scss
new file mode 100644
index 000000000..0ff6c471b
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-sass/sourcemaps.scss
@@ -0,0 +1,10 @@
+
+$paulrougetpink: #f06;
+
+div {
+ color: $paulrougetpink;
+}
+
+span {
+ background-color: #EEE;
+} \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemap-styl/test-stylus.styl b/devtools/client/styleeditor/test/sourcemap-styl/test-stylus.styl
new file mode 100644
index 000000000..76ff25c29
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemap-styl/test-stylus.styl
@@ -0,0 +1,7 @@
+paulrougetpink = #f06;
+
+div
+ color: paulrougetpink
+
+span
+ background-color: #EEE \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/sourcemaps-inline.html b/devtools/client/styleeditor/test/sourcemaps-inline.html
new file mode 100644
index 000000000..45846fe28
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemaps-inline.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>testcase for testing CSS source maps in inline style</title>
+ <style type="text/css">body {
+ background-color: black;
+}
+body > h1 {
+ color: white;
+}
+/*# sourceMappingURL=data:application/json;base64,ewoidmVyc2lvbiI6IDMsCiJtYXBwaW5ncyI6ICJBQUFBLElBQUs7RUFDSCxnQkFBZ0IsRUFBRSxLQUFLO0VBQ3ZCLFNBQU87SUFDTCxLQUFLLEVBQUUsS0FBSyIsCiJzb3VyY2VzIjogWyJ0ZXN0LnNjc3MiXSwKInNvdXJjZXNDb250ZW50IjogWyJib2R5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogYmxhY2s7XG4gICYgPiBoMSB7XG4gICAgY29sb3I6IHdoaXRlO1xuICB9XG59XG4iXSwKIm5hbWVzIjogW10sCiJmaWxlIjogInRlc3QuY3NzIgp9Cg== */</style>
+</head>
+<body>
+ <h1>Source maps testcase</div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/sourcemaps-large.html b/devtools/client/styleeditor/test/sourcemaps-large.html
new file mode 100644
index 000000000..b8c92e0c9
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemaps-large.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>testcase for a loading error with CSS source maps</title>
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/test-bootstrap-scss.css"/>
+</head>
+<body>
+ <div>source maps <span>testcase</span> (see Bug 1128747)</div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/sourcemaps-watching.html b/devtools/client/styleeditor/test/sourcemaps-watching.html
new file mode 100644
index 000000000..fc9909ea5
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemaps-watching.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+ <title>testcase for testing CSS source maps</title>
+ <link rel="stylesheet" type="text/css" href="simple.css"/>
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/sourcemaps.css?test=1"/>
+</head>
+<body>
+ <div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/sourcemaps.html b/devtools/client/styleeditor/test/sourcemaps.html
new file mode 100644
index 000000000..887e0ed98
--- /dev/null
+++ b/devtools/client/styleeditor/test/sourcemaps.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+ <title>testcase for testing CSS source maps</title>
+ <link rel="stylesheet" type="text/css" href="simple.css"/>
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/sourcemaps.css?test=1"/>
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/contained.css"/>
+ <link rel="stylesheet" type="text/css" href="sourcemap-css/test-stylus.css"/>
+</head>
+<body>
+ <div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/sync.html b/devtools/client/styleeditor/test/sync.html
new file mode 100644
index 000000000..83da8c57e
--- /dev/null
+++ b/devtools/client/styleeditor/test/sync.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>simple testcase</title>
+ <style type="text/css">
+ body {
+ border-width: 15px;
+ color: red;
+ }
+
+ #testid {
+ font-size: 4em;
+ }
+ </style>
+</head>
+<body>
+ <div id="testid">simple testcase</div>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/test_private.css b/devtools/client/styleeditor/test/test_private.css
new file mode 100644
index 000000000..438954d36
--- /dev/null
+++ b/devtools/client/styleeditor/test/test_private.css
@@ -0,0 +1,3 @@
+body {
+ background-color: red;
+} \ No newline at end of file
diff --git a/devtools/client/styleeditor/test/test_private.html b/devtools/client/styleeditor/test/test_private.html
new file mode 100644
index 000000000..bfde3520e
--- /dev/null
+++ b/devtools/client/styleeditor/test/test_private.html
@@ -0,0 +1,7 @@
+<html>
+<head>
+<link rel="stylesheet" href="test_private.css"></link>
+</head>
+<body>
+</body>
+</html>
diff --git a/devtools/client/styleeditor/test/utf-16.css b/devtools/client/styleeditor/test/utf-16.css
new file mode 100644
index 000000000..92ff5eac5
--- /dev/null
+++ b/devtools/client/styleeditor/test/utf-16.css
Binary files differ