Bug 711941 - part 3.1 - Make sure all devtools/styleinspector test open tabs with utf-8 charset; r=me
authorPatrick Brosset <pbrosset@mozilla.com>
Thu, 17 Jul 2014 09:59:11 +0200
changeset 216525 0b0b703ed42865a242ee697fea5e86b2e534eec8
parent 216524 2a7afe8ef3d715b0f54b961536bb1542cf3c3674
child 216526 d12fab26162e00015f627b2a8212ea2a7308ce0c
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersme
bugs711941
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 711941 - part 3.1 - Make sure all devtools/styleinspector test open tabs with utf-8 charset; r=me
browser/devtools/styleinspector/test/browser_computedview_browser-styles.js
browser/devtools/styleinspector/test/browser_computedview_keybindings_01.js
browser/devtools/styleinspector/test/browser_computedview_keybindings_02.js
browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
browser/devtools/styleinspector/test/browser_computedview_matched-selectors_02.js
browser/devtools/styleinspector/test/browser_computedview_no-results-placeholder.js
browser/devtools/styleinspector/test/browser_computedview_search-filter.js
browser/devtools/styleinspector/test/browser_computedview_select-and-copy-styles.js
browser/devtools/styleinspector/test/browser_computedview_style-editor-link.js
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js
browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js
browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-appears-on-swatch-click.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-hides-on-tooltip.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js
browser/devtools/styleinspector/test/browser_ruleview_colorpicker-swatch-displayed.js
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-appears-on-swatch-click.js
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-commit-on-ENTER.js
browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-revert-on-ESC.js
browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js
browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
browser/devtools/styleinspector/test/browser_ruleview_keybindings.js
browser/devtools/styleinspector/test/browser_ruleview_livepreview.js
browser/devtools/styleinspector/test/browser_ruleview_mathml-element.js
browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-duplicates.js
browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-priority.js
browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js
browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_02.js
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_01.js
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_02.js
browser/devtools/styleinspector/test/browser_ruleview_select-and-copy-styles.js
browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js
browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
browser/devtools/styleinspector/test/browser_styleinspector_csslogic-inherited-properties.js
browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
browser/devtools/styleinspector/test/browser_styleinspector_inplace-editor.js
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-closes-on-new-selection.js
browser/devtools/styleinspector/test/browser_styleinspector_tooltip-multiple-background-images.js
browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-01.js
browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-02.js
browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-03.js
browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-04.js
--- a/browser/devtools/styleinspector/test/browser_computedview_browser-styles.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_browser-styles.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the checkbox to include browser styles works properly.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,default styles test");
+  yield addTab("data:text/html;charset=utf-8,default styles test");
 
   info("Creating the test document");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     '.matches {color: #F00;}</style>' +
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   content.document.title = "Style Inspector Default Styles Test";
 
--- a/browser/devtools/styleinspector/test/browser_computedview_keybindings_01.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_keybindings_01.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test computed view key bindings
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,default styles test");
+  yield addTab("data:text/html;charset=utf-8,default styles test");
 
   info("Adding content to the test page");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     '.matches {color: #F00;}</style>' +
     '<span class="matches">Some styled text</span>' +
     '</div>';
 
   let {toolbox, inspector, view} = yield openComputedView();
--- a/browser/devtools/styleinspector/test/browser_computedview_keybindings_02.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_keybindings_02.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests the computed-view keyboard navigation
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,computed view keyboard nav test");
+  yield addTab("data:text/html;charset=utf-8,computed view keyboard nav test");
 
   content.document.body.innerHTML = '<style type="text/css"> ' +
     'span { font-variant: small-caps; color: #000000; } ' +
     '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
     'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
     '<h1>Some header text</h1>\n' +
     '<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
     '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ' +
--- a/browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the computed view properties can be expanded and collapsed with
 // either the twisty or by dbl-clicking on the container
 
-const TEST_URL = "data:text/html," + encodeURIComponent([
+const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent([
   '<html>' +
   '<head>' +
   '  <title>Computed view toggling test</title>',
   '  <style type="text/css"> ',
   '    html { color: #000000; font-size: 15pt; } ',
   '    h1 { color: red; } ',
   '  </style>',
   '</head>',
--- a/browser/devtools/styleinspector/test/browser_computedview_matched-selectors_02.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_matched-selectors_02.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests for matched selector texts in the computed view
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,<div style='color:blue;'></div>");
+  yield addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
 
   info("Opening the computed view");
   let {toolbox, inspector, view} = yield openComputedView();
 
   info("Selecting the test node");
   yield selectNode("div", inspector);
 
   info("Checking the color property view");
--- a/browser/devtools/styleinspector/test/browser_computedview_no-results-placeholder.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_no-results-placeholder.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the no results placeholder works properly.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,no results placeholder test");
+  yield addTab("data:text/html;charset=utf-8,no results placeholder test");
 
   info("Creating the test document");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     '.matches {color: #F00;}</style>' +
     '<span id="matches" class="matches">Some styled text</span>';
   content.document.title = "Tests that the no results placeholder works properly";
 
   info("Opening the computed view");
--- a/browser/devtools/styleinspector/test/browser_computedview_search-filter.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_search-filter.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the search filter works properly.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,default styles test");
+  yield addTab("data:text/html;charset=utf-8,default styles test");
 
   info("Creating the test document");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     '.matches {color: #F00;}</style>' +
     '<span id="matches" class="matches">Some styled text</span>' +
     '</div>';
   content.document.title = "Style Inspector Search Filter Test";
 
--- a/browser/devtools/styleinspector/test/browser_computedview_select-and-copy-styles.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_select-and-copy-styles.js
@@ -6,17 +6,17 @@
 
 // Tests that properties can be selected and copied from the computed view
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,computed view copy test");
+  yield addTab("data:text/html;charset=utf-8,computed view copy test");
 
   info("Creating the test document");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     'span { font-variant: small-caps; color: #000000; } ' +
     '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
     'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
     '<h1>Some header text</h1>\n' +
     '<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
--- a/browser/devtools/styleinspector/test/browser_computedview_style-editor-link.js
+++ b/browser/devtools/styleinspector/test/browser_computedview_style-editor-link.js
@@ -6,17 +6,17 @@
 
 // Test the links from the computed view to the style editor
 
 const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
   [".highlight {",
    "color: blue",
    "}"].join("\n"));
 
-const DOCUMENT_URL = "data:text/html,"+encodeURIComponent(
+const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
   ['<html>' +
    '<head>' +
    '<title>Computed view style editor link test</title>',
    '<style type="text/css"> ',
    'html { color: #000000; } ',
    'span { font-variant: small-caps; color: #000000; } ',
    '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',
    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js
@@ -15,17 +15,17 @@ let PAGE_CONTENT = [
   '  .testclass {',
   '    background-color: green;',
   '  }',
   '</style>',
   '<div id="testid" class="testclass">Styled Node</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js
@@ -12,17 +12,17 @@ let PAGE_CONTENT = [
   '  #testid {',
   '    background-color: blue;',
   '  }',
   '</style>',
   '<div id="testid">Styled Node</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js
@@ -17,17 +17,17 @@ let PAGE_CONTENT = [
   '  .testclass {',
   '    background-color: green;',
   '  }',
   '</style>',
   '<div id="testid" class="testclass">Styled Node</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js
@@ -13,17 +13,17 @@ const PAGE_CONTENT = [
   '  body {',
   '    background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let value = getRuleViewProperty(view, "body", "background").valueSpan;
   let swatch = value.querySelector(".ruleview-colorswatch");
   let url = value.querySelector(".theme-link");
   yield testImageTooltipAfterColorChange(swatch, url, view);
 });
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js
@@ -15,17 +15,17 @@ const PAGE_CONTENT = [
   '  body {',
   '    background: red url("chrome://global/skin/icons/warning-64.png") no-repeat center center;',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
   yield testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
 });
 
 function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
   let swatch = getRuleViewProperty(ruleView, "body", "background").valueSpan
     .querySelector(".ruleview-colorswatch");
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-appears-on-swatch-click.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-appears-on-swatch-click.js
@@ -14,17 +14,17 @@ const PAGE_CONTENT = [
   '    background-image: url(chrome://global/skin/icons/warning-64.png);',
   '    border: 2em solid rgba(120, 120, 120, .5);',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let cSwatch = getRuleViewProperty(view, "body", "color").valueSpan
     .querySelector(".ruleview-colorswatch");
   let bgSwatch = getRuleViewProperty(view, "body", "background-color").valueSpan
     .querySelector(".ruleview-colorswatch");
   let bSwatch = getRuleViewProperty(view, "body", "border").valueSpan
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js
@@ -11,17 +11,17 @@ const PAGE_CONTENT = [
   '  body {',
   '    border: 2em solid rgba(120, 120, 120, .5);',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let swatch = getRuleViewProperty(view, "body" , "border").valueSpan
     .querySelector(".ruleview-colorswatch");
   yield testPressingEnterCommitsChanges(swatch, view);
 });
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js
@@ -12,17 +12,17 @@ const PAGE_CONTENT = [
   '  body {',
   '    background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);',
   '  }',
   '</style>',
   'Updating a gradient declaration with the color picker tooltip'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view")
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Testing that the colors in gradient properties are parsed correctly");
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-hides-on-tooltip.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-hides-on-tooltip.js
@@ -14,17 +14,17 @@ const PAGE_CONTENT = [
   '    background-image: url(chrome://global/skin/icons/warning-64.png);',
   '    border: 2em solid rgba(120, 120, 120, .5);',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let swatch = getRuleViewProperty(view, "body", "color").valueSpan
     .querySelector(".ruleview-colorswatch");
 
   yield testColorPickerHidesWhenImageTooltipAppears(view, swatch);
 });
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js
@@ -20,17 +20,17 @@ const PAGE_CONTENT = [
   '  p {',
   '    color: blue;',
   '  }',
   '</style>',
   '<p>Testing the color picker tooltip!</p>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   yield testSimpleMultipleColorChanges(inspector, view);
   yield testComplexMultipleColorChanges(inspector, view);
   yield testOverriddenMultipleColorChanges(inspector, view);
 });
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js
@@ -11,17 +11,17 @@ const PAGE_CONTENT = [
   '  body {',
   '    background-color: #ededed;',
   '  }',
   '</style>',
   'Testing the color picker tooltip!'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let swatch = getRuleViewProperty(view, "body", "background-color").valueSpan
     .querySelector(".ruleview-colorswatch");
   yield testPressingEscapeRevertsChanges(swatch, view);
 });
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-swatch-displayed.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_colorpicker-swatch-displayed.js
@@ -33,17 +33,17 @@ const TESTS = [
   {selector: "body", propertyName: "color", nb: 1},
   {selector: "body", propertyName: "background-color", nb: 1},
   {selector: "body", propertyName: "border", nb: 1},
   {selector: "*", propertyName: "color", nb: 1},
   {selector: "*", propertyName: "box-shadow", nb: 2},
 ];
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view color picker tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   for (let {selector, propertyName, nb} of TESTS) {
     info("Looking for color swatches in property " + propertyName +
       " in selector " + selector);
 
     let prop = getRuleViewProperty(view, selector, propertyName).valueSpan;
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js
@@ -47,17 +47,17 @@ let testData = [
   ["f", "fill", 0, MAX_ENTRIES],
   ["i", "fill", 0, 4],
   ["VK_LEFT", "fill", -1, 0],
   ["VK_LEFT", "fill", -1, 0],
   ["i", "fiill", -1, 0],
   ["VK_ESCAPE", null, -1, 0],
 ];
 
-let TEST_URL = "data:text/html,<h1 style='border: 1px solid red'>Filename" +
+let TEST_URL = "data:text/html;charset=utf-8,<h1 style='border: 1px solid red'>Filename" +
                ": browser_bug893965_css_property_completion_existing_property.js</h1>";
 
 let test = asyncTest(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js
@@ -31,17 +31,17 @@ let testData = [
   ["d", {}, "direction", 0, 3],
   ["i", {}, "direction", 0, 2],
   ["s", {}, "display", -1, 0],
   ["VK_TAB", {}, "blue", -1, 0],
   ["n", {}, "none", -1, 0],
   ["VK_RETURN", {}, null, -1, 0]
 ];
 
-let TEST_URL = "data:text/html,<h1 style='color: red'>Filename: " +
+let TEST_URL = "data:text/html;charset=utf-8,<h1 style='color: red'>Filename: " +
                "browser_bug894376_css_value_completion_existing_property_value_pair.js</h1>";
 
 let test = asyncTest(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js
@@ -32,17 +32,17 @@ let testData = [
   ["VK_BACK_SPACE", "di", -1, 0],
   ["VK_BACK_SPACE", "d", -1, 0],
   ["VK_BACK_SPACE", "", -1, 0],
   ["f", "fill", 0, MAX_ENTRIES],
   ["i", "fill", 0, 4],
   ["VK_ESCAPE", null, -1, 0],
 ];
 
-let TEST_URL = "data:text/html,<h1 style='border: 1px solid red'>Filename:" +
+let TEST_URL = "data:text/html;charset=utf-8,<h1 style='border: 1px solid red'>Filename:" +
                "browser_bug893965_css_property_completion_new_property.js</h1>";
 
 let test = asyncTest(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js
@@ -34,17 +34,17 @@ let testData = [
   ["VK_DOWN", {}, "rosybrown", 4, 6],
   ["VK_DOWN", {}, "royalblue", 5, 6],
   ["VK_RIGHT", {}, "royalblue", -1, 0],
   [" ", {}, "royalblue !important", 0, 10],
   ["!", {}, "royalblue !important", 0, 0],
   ["VK_ESCAPE", {}, null, -1, 0]
 ];
 
-let TEST_URL = "data:text/html,<style>h1{border: 1px solid red}</style>" +
+let TEST_URL = "data:text/html;charset=utf-8,<style>h1{border: 1px solid red}</style>" +
   "<h1>Test element</h1>";
 
 let test = asyncTest(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-appears-on-swatch-click.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-appears-on-swatch-click.js
@@ -16,17 +16,17 @@ const PAGE_CONTENT = [
   '    animation-timing-function: ease-in-out;',
   '    transition-timing-function: ease-out;',
   '  }',
   '</style>',
   '<div class="test">Testing the cubic-bezier tooltip!</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view cubic-bezier tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
 
   let swatches = [];
   swatches.push(
     getRuleViewProperty(view, "div", "animation").valueSpan
     .querySelector(".ruleview-bezierswatch")
--- a/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-commit-on-ENTER.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-commit-on-ENTER.js
@@ -11,17 +11,17 @@ const PAGE_CONTENT = [
   '<style type="text/css">',
   '  body {',
   '    transition: top 2s linear;',
   '  }',
   '</style>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view cubic-bezier tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Getting the bezier swatch element");
   let swatch = getRuleViewProperty(view, "body" , "transition").valueSpan
     .querySelector(".ruleview-bezierswatch");
 
   yield testPressingEnterCommitsChanges(swatch, view);
--- a/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-revert-on-ESC.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-revert-on-ESC.js
@@ -11,17 +11,17 @@ const PAGE_CONTENT = [
   '<style type="text/css">',
   '  body {',
   '    animation-timing-function: linear;',
   '  }',
   '</style>',
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view cubic-bezier tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Getting the bezier swatch element");
   let swatch = getRuleViewProperty(view, "body", "animation-timing-function").valueSpan
     .querySelector(".ruleview-bezierswatch");
   yield testPressingEscapeRevertsChanges(swatch, view);
 });
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js
@@ -19,17 +19,17 @@ const originalValue = "#00F";
 const testData = [
   {value: "red", commitKey: "VK_ESCAPE", modifiers: {}, expected: originalValue},
   {value: "red", commitKey: "VK_RETURN", modifiers: {}, expected: "#F00"},
   {value: "invalid", commitKey: "VK_RETURN", modifiers: {}, expected: "invalid"},
   {value: "blue", commitKey: "VK_TAB", modifiers: {shiftKey: true}, expected: "blue"}
 ];
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test escaping property change reverts back to original value");
+  yield addTab("data:text/html;charset=utf-8,test escaping property change reverts back to original value");
 
   info("Creating the test document");
   createDocument();
 
   info("Opening the rule view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property-increments.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that increasing/decreasing values in rule view using
 // arrow keys works correctly.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,sample document for bug 722691");
+  yield addTab("data:text/html;charset=utf-8,sample document for bug 722691");
   createDocument();
   let {toolbox, inspector, view} = yield openRuleView();
 
   yield selectNode("#test", inspector);
 
   yield testMarginIncrements(view);
   yield testVariousUnitIncrements(view);
   yield testHexIncrements(view);
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js
@@ -17,17 +17,17 @@ let PAGE_CONTENT = [
   '  .testclass {',
   '    background-color: green;',
   '  }',
   '</style>',
   '<div id="testid" class="testclass">Styled Node</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector-commit.js
@@ -43,17 +43,17 @@ const TEST_DATA = [
     value: ".testclass",
     commitKey: "VK_TAB",
     modifiers: {shiftKey: true},
     expected: ".testclass"
   }
 ];
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test escaping selector change reverts back to original value");
+  yield addTab("data:text/html;charset=utf-8,test escaping selector change reverts back to original value");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Iterating over the test data");
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_01.js
@@ -12,17 +12,17 @@ let PAGE_CONTENT = [
   '    text-align: center;',
   '  }',
   '</style>',
   '<div id="testid" class="testclass">Styled Node</div>',
   '<span id="testid2">This is a span</span>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view selector changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view selector changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-selector_02.js
@@ -18,17 +18,17 @@ let PAGE_CONTENT = [
   '</style>',
   '<div id="testid">Styled Node</div>',
   '<span class="testclass">This is a span</span>',
   '<div class="testclass2">A</div>',
   '<div id="testid3">B</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view selector changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view selector changes");
 
   info("Creating the test document");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   info("Opening the rule-view");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test element");
--- a/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_eyedropper.js
@@ -21,17 +21,17 @@ const PAGE_CONTENT = [
 
 const ORIGINAL_COLOR = "rgb(255, 0, 153)";  // #f09
 const EXPECTED_COLOR = "rgb(255, 255, 85)"; // #ff5
 
 // Test opening the eyedropper from the color picker. Pressing escape
 // to close it, and clicking the page to select a color.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view eyedropper test");
+  yield addTab("data:text/html;charset=utf-8,rule view eyedropper test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   let element = content.document.querySelector("div");
   inspector.selection.setNode(element, "test");
   yield inspector.once("inspector-updated");
 
   let property = getRuleViewProperty(view, "div", "background-color");
--- a/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_keybindings.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that focus doesn't leave the style editor when adding a property
 // (bug 719916)
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,<h1>Some header text</h1>");
+  yield addTab("data:text/html;charset=utf-8,<h1>Some header text</h1>");
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Getting the ruleclose brace element");
   let brace = view.doc.querySelector(".ruleview-ruleclose");
 
--- a/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_livepreview.js
@@ -18,17 +18,17 @@ const TEST_DATA = [
   // Invalid property values should not apply, and should fall back to default
   {value: "red", expected: "block"},
   {value: "something", expected: "block"},
 
   {escape: true, value: "inline", expected: "block"}
 ];
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view live preview on user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view live preview on user changes");
 
   let style = '#testid {display:block;}';
   let styleNode = addStyle(content.document, style);
   content.document.body.innerHTML = '<div id="testid">Styled Node</div><span>inline element</span>';
   let testElement = getNode("#testid");
 
   let {toolbox, inspector, view} = yield openRuleView();
   yield selectNode(testElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_mathml-element.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_mathml-element.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that the rule-view displays correctly on MathML elements
 
 const TEST_URL = [
-  "data:text/html,",
+  "data:text/html;charset=utf-8,",
   "<div>",
   "  <math xmlns=\"http://www.w3.org/1998/Math/MathML\">",
   "    <mfrac>",
   "      <msubsup>",
   "        <mi>a</mi>",
   "        <mi>i</mi>",
   "        <mi>j</mi>",
   "      </msubsup>",
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-duplicates.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-duplicates.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-priority.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-priority.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_01.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple-properties-unfinished_02.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_01.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_01.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_02.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_02.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the rule-view behaves correctly when entering mutliple and/or
 // unfinished properties/values in inplace-editors
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,test rule view user changes");
+  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
   content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Creating the test element");
   let newElement = content.document.createElement("div");
   newElement.textContent = "Test Element";
   content.document.body.appendChild(newElement);
   yield selectNode(newElement, inspector);
--- a/browser/devtools/styleinspector/test/browser_ruleview_select-and-copy-styles.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_select-and-copy-styles.js
@@ -6,17 +6,17 @@
 
 // Tests that properties can be selected and copied from the rule view
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,<p>rule view context menu test</p>");
+  yield addTab("data:text/html;charset=utf-8,<p>rule view context menu test</p>");
 
   info("Creating the test document");
   content.document.body.innerHTML = '<style type="text/css"> ' +
     'html { color: #000000; } ' +
     'span { font-variant: small-caps; color: #000000; } ' +
     '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
     'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
     '<h1>Some header text</h1>\n' +
--- a/browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_style-editor-link.js
@@ -9,17 +9,17 @@
 const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
   ["#first {",
    "color: blue",
    "}"].join("\n"));
 
 const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
 const EXTERNAL_STYLESHEET_URL = TEST_URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME;
 
-const DOCUMENT_URL = "data:text/html,"+encodeURIComponent(
+const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
   ['<html>' +
    '<head>' +
    '<title>Rule view style editor link test</title>',
    '<style type="text/css"> ',
    'html { color: #000000; } ',
    'div { font-variant: small-caps; color: #000000; } ',
    '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',
    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',
--- a/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
+++ b/browser/devtools/styleinspector/test/browser_ruleview_user-property-reset.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that user set style properties can be changed from the markup-view and
 // don't survive page reload
 
 let TEST_PAGE = [
-  "data:text/html,",
+  "data:text/html;charset=utf-8,",
   "<p id='id1' style='width:200px;'>element 1</p>",
   "<p id='id2' style='width:100px;'>element 2</p>"
 ].join("");
 
 let test = asyncTest(function*() {
   yield addTab(TEST_PAGE);
   let {toolbox, inspector, view} = yield openRuleView();
 
--- a/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-inherited-properties.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-inherited-properties.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that inherited properties are treated correctly.
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,selector text test, bug 692400");
+  yield addTab("data:text/html;charset=utf-8,selector text test, bug 692400");
 
   content.document.body.innerHTML = '<div style="margin-left:10px; font-size: 5px"><div id="innerdiv">Inner div</div></div>';
   content.document.title = "Style Inspector Inheritance Test";
 
   let cssLogic = new CssLogic();
   cssLogic.highlight(content.document.getElementById("innerdiv"));
 
   let marginProp = cssLogic.getPropertyInfo("margin-left");
--- a/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
@@ -23,17 +23,17 @@ const TEST_DATA = [
   {text: "* body#home div#warning p.message", expected: 131331},
   {text: "#footer :not(nav) li", expected: 65538},
   {text: "bar:nth-child(n)", expected: 257},
   {text: "li::-moz-list-number", expected: 1},
   {text: "a:hover", expected: 257}
 ];
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,Computed view specificity test");
+  yield addTab("data:text/html;charset=utf-8,Computed view specificity test");
   createDocument();
 
   info("Creating a CssLogic instance");
   let cssLogic = new CssLogic();
   cssLogic.highlight(content.document.body);
   let cssSheet = cssLogic.sheets[0];
   let cssRule = cssSheet.domSheet.cssRules[0];
   let selectors = CssLogic.getSelectors(cssRule);
--- a/browser/devtools/styleinspector/test/browser_styleinspector_inplace-editor.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_inplace-editor.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 // Test the inplace-editor behavior.
 // This test doesn't open the devtools, it just exercises the inplace-editor
 // on test elements in the page
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,inline editor tests");
+  yield addTab("data:text/html;charset=utf-8,inline editor tests");
   yield testReturnCommit();
   yield testBlurCommit();
   yield testAdvanceCharCommit();
 });
 
 function testReturnCommit() {
   info("Testing that pressing return commits the new value");
   let def = promise.defer();
--- a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-background-image.js
@@ -21,17 +21,17 @@ const PAGE_CONTENT = [
   '    background: url(chrome://global/skin/icons/warning-64.png) no-repeat left center;',
   '    padding-left: 70px;',
   '  }',
   '</style>',
   '<div class="test-element">test element</div>'
 ].join("\n");
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,rule view tooltip test");
+  yield addTab("data:text/html;charset=utf-8,rule view tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Testing the background-image property on the body rule");
   yield testBodyRuleView(view);
 
   info("Selecting the test div node");
   yield selectNode(".test-element", inspector);
--- a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that if a tooltip is visible when a new selection is made, it closes
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html,<div class='one'>el 1</div><div class='two'>el 2</div>");
+  yield addTab("data:text/html;charset=utf-8,<div class='one'>el 1</div><div class='two'>el 2</div>");
 
   let {toolbox, inspector, view} = yield openRuleView();
   yield selectNode(".one", inspector);
 
   info("Testing rule view tooltip closes on new selection");
   yield testRuleView(view, inspector);
 
   info("Testing computed view tooltip closes on new selection");
--- a/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-multiple-background-images.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_tooltip-multiple-background-images.js
@@ -17,17 +17,17 @@ let BLUE_DOT = "data:image/png;base64," 
   "dGVkIHdpdGggR0lNUFeBDhcAAAANSURBVAjXY2Bg+F8PAAKCAX/tPkrkAAAAAElFTkSuQmCC";
 
 let test = asyncTest(function* () {
   let TEST_STYLE = "h1 {background: url(" + YELLOW_DOT + "), url(" + BLUE_DOT + ");}";
 
   let PAGE_CONTENT = "<style>" + TEST_STYLE + "</style>" +
     "<h1>browser_styleinspector_tooltip-multiple-background-images.js</h1>";
 
-  yield addTab("data:text/html,background image tooltip test");
+  yield addTab("data:text/html;charset=utf-8,background image tooltip test");
   content.document.body.innerHTML = PAGE_CONTENT;
 
   yield testRuleViewUrls();
   yield testComputedViewUrls();
 });
 
 function* testRuleViewUrls() {
   info("Testing tooltips in the rule view");
--- a/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-01.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-01.js
@@ -13,17 +13,17 @@ const PAGE_CONTENT = [
   '  }',
   '</style>',
   'Test the css transform highlighter'
 ].join("\n");
 
 const TYPE = "CssTransformHighlighter";
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html," + PAGE_CONTENT);
+  yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
 
   let {view: rView} = yield openRuleView();
   let overlay = rView.highlighters;
 
   ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
   let h = yield overlay._getHighlighter(TYPE);
   ok(overlay.highlighters[TYPE], "The highlighter has been created in the rule-view");
   is(h, overlay.highlighters[TYPE], "The right highlighter has been created");
--- a/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-02.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-02.js
@@ -15,17 +15,17 @@ const PAGE_CONTENT = [
   '  }',
   '</style>',
   'Test the css transform highlighter'
 ].join("\n");
 
 let TYPE = "CssTransformHighlighter";
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html," + PAGE_CONTENT);
+  yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
 
 
   let {view: rView} = yield openRuleView();
   let hs = rView.highlighters;
 
   ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (1)");
   ok(!hs.promises[TYPE], "No highlighter is being created in the rule-view (1)");
 
--- a/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-03.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-03.js
@@ -21,17 +21,17 @@ const PAGE_CONTENT = [
   '  }',
   '</style>',
   'Test the css transform highlighter'
 ].join("\n");
 
 const TYPE = "CssTransformHighlighter";
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html," + PAGE_CONTENT);
+  yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
 
   let {inspector, view: rView} = yield openRuleView();
 
   // Mock the highlighter front to get the reference of the NodeFront
   let HighlighterFront = {
     isShown: false,
     nodeFront: null,
     nbOfTimesShown: 0,
--- a/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-04.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_transform-highlighter-04.js
@@ -23,17 +23,17 @@ const PAGE_CONTENT = [
   '  }',
   '</style>',
   '<div class="test"></div>'
 ].join("\n");
 
 const TYPE = "CssTransformHighlighter";
 
 let test = asyncTest(function*() {
-  yield addTab("data:text/html," + PAGE_CONTENT);
+  yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
 
   let {view: rView, inspector} = yield openRuleView();
   yield selectNode(".test", inspector);
 
   let hs = rView.highlighters;
 
   info("Faking a mousemove on the overriden property");
   let {valueSpan} = getRuleViewProperty(rView, "div", "transform");