Bug 753313 - Some divs and spans are created dynamically in debugger-view; r=rcampbell

browser/devtools/debugger/debugger-view.js

@@ -513,11 +513,11 @@ StackFramesView.prototype = {
     // Make sure the container is empty first.
     this.empty();
 
-    let item = document.createElement("div");
+    let item = document.createElement("label");
 
     // The empty node should look grayed out to avoid confusion.
-    item.className = "empty list-item";
-    item.textContent = L10N.getStr("emptyStackText");
+    item.className = "list-item empty";
+    item.setAttribute("value", L10N.getStr("emptyStackText"));
 
     this._frames.appendChild(item);
   },
@@ -542,21 +542,25 @@ StackFramesView.prototype = {
       return null;
     }
 
-    let frame = document.createElement("div");
-    let frameName = document.createElement("span");
-    let frameDetails = document.createElement("span");
+    let frame = document.createElement("box");
+    let frameName = document.createElement("label");
+    let frameDetails = document.createElement("label");
 
     // Create a list item to be added to the stackframes container.
     frame.id = "stackframe-" + aDepth;
     frame.className = "dbg-stackframe list-item";
 
     // This list should display the name and details for the frame.
-    frameName.className = "dbg-stackframe-name";
-    frameDetails.className = "dbg-stackframe-details";
-    frameName.textContent = aFrameNameText;
-    frameDetails.textContent = aFrameDetailsText;
+    frameName.className = "dbg-stackframe-name plain";
+    frameDetails.className = "dbg-stackframe-details plain";
+    frameName.setAttribute("value", aFrameNameText);
+    frameDetails.setAttribute("value", aFrameDetailsText);
+
+    let spacer = document.createElement("spacer");
+    spacer.setAttribute("flex", "1");
 
     frame.appendChild(frameName);
+    frame.appendChild(spacer);
     frame.appendChild(frameDetails);
 
     this._frames.appendChild(frame);
@@ -846,21 +850,22 @@ PropertiesView.prototype = {
 
     // Setup the additional elements specific for a variable node.
     element.refresh(function() {
-      let separator = document.createElement("span");
-      let value = document.createElement("span");
+      let separatorLabel = document.createElement("label");
+      let valueLabel = document.createElement("label");
       let title = element.getElementsByClassName("title")[0];
 
       // Separator between the variable name and its value.
-      separator.textContent = ": ";
+      separatorLabel.className = "plain";
+      separatorLabel.setAttribute("value", ":");
 
       // The variable information (type, class and/or value).
-      value.className = "value";
+      valueLabel.className = "value plain";
 
       // Handle the click event when pressing the element value label.
-      value.addEventListener("click", this._activateElementInputMode.bind({
+      valueLabel.addEventListener("click", this._activateElementInputMode.bind({
         scope: this,
         element: element,
-        value: value
+        valueLabel: valueLabel
       }));
 
       // Maintain the symbolic name of the variable.
@@ -871,14 +876,14 @@ PropertiesView.prototype = {
         configurable: true
       });
 
-      title.appendChild(separator);
-      title.appendChild(value);
+      title.appendChild(separatorLabel);
+      title.appendChild(valueLabel);
 
       // Remember a simple hierarchy between the parent and the element.
       this._saveHierarchy({
         parent: aScope,
         element: element,
-        value: value
+        valueLabel: valueLabel
       });
     }.bind(this));
 
@@ -919,14 +924,14 @@ PropertiesView.prototype = {
       aGrip = { type: "null" };
     }
 
-    let value = aVar.getElementsByClassName("value")[0];
+    let valueLabel = aVar.getElementsByClassName("value")[0];
 
     // Make sure the value node exists.
-    if (!value) {
+    if (!valueLabel) {
       return null;
     }
 
-    this._applyGrip(value, aGrip);
+    this._applyGrip(valueLabel, aGrip);
     return aVar;
   },
 
@@ -934,20 +939,20 @@ PropertiesView.prototype = {
    * Applies the necessary text content and class name to a value node based
    * on a grip.
    *
-   * @param object aValueNode
+   * @param object aValueLabel
    *        The value node to apply the changes to.
    * @param object aGrip
    *        @see DebuggerView.Properties._setGrip
    */
-  _applyGrip: function DVP__applyGrip(aValueNode, aGrip) {
-    let prevGrip = aValueNode.currentGrip;
+  _applyGrip: function DVP__applyGrip(aValueLabel, aGrip) {
+    let prevGrip = aValueLabel.currentGrip;
     if (prevGrip) {
-      aValueNode.classList.remove(this._propertyColor(prevGrip));
+      aValueLabel.classList.remove(this._propertyColor(prevGrip));
     }
 
-    aValueNode.textContent = this._propertyString(aGrip);
-    aValueNode.classList.add(this._propertyColor(aGrip));
-    aValueNode.currentGrip = aGrip;
+    aValueLabel.setAttribute("value", this._propertyString(aGrip));
+    aValueLabel.classList.add(this._propertyColor(aGrip));
+    aValueLabel.currentGrip = aGrip;
   },
 
   /**
@@ -1058,38 +1063,35 @@ PropertiesView.prototype = {
 
     // Setup the additional elements specific for a variable node.
     element.refresh(function(pKey, pGrip) {
-      let propertyString = this._propertyString(pGrip);
-      let propertyColor = this._propertyColor(pGrip);
       let title = element.getElementsByClassName("title")[0];
-      let name = title.getElementsByClassName("name")[0];
-      let separator = document.createElement("span");
-      let value = document.createElement("span");
-
-      // Use a key element to specify the property name.
-      name.className = "key";
-      name.textContent = pKey;
-
-      // Use a value element to specify the property value.
-      value.className = "value";
-      value.textContent = propertyString;
-      value.classList.add(propertyColor);
-
-      // Separator between the variable name and its value.
-      separator.textContent = ": ";
+      let nameLabel = title.getElementsByClassName("name")[0];
+      let separatorLabel = document.createElement("label");
+      let valueLabel = document.createElement("label");
 
       if ("undefined" !== typeof pKey) {
-        title.appendChild(name);
+        // Use a key element to specify the property name.
+        nameLabel.className = "key plain";
+        nameLabel.setAttribute("value", pKey.trim());
+        title.appendChild(nameLabel);
       }
       if ("undefined" !== typeof pGrip) {
-        title.appendChild(separator);
-        title.appendChild(value);
+        // Separator between the variable name and its value.
+        separatorLabel.className = "plain";
+        separatorLabel.setAttribute("value", ":");
+
+        // Use a value element to specify the property value.
+        valueLabel.className = "value plain";
+        this._applyGrip(valueLabel, pGrip);
+
+        title.appendChild(separatorLabel);
+        title.appendChild(valueLabel);
       }
 
       // Handle the click event when pressing the element value label.
-      value.addEventListener("click", this._activateElementInputMode.bind({
+      valueLabel.addEventListener("click", this._activateElementInputMode.bind({
         scope: this,
         element: element,
-        value: value
+        valueLabel: valueLabel
       }));
 
       // Maintain the symbolic name of the property.
@@ -1104,7 +1106,7 @@ PropertiesView.prototype = {
       this._saveHierarchy({
         parent: aVar,
         element: element,
-        value: value
+        valueLabel: valueLabel
       });
 
       // Save the property to the variable for easier access.
@@ -1124,7 +1126,7 @@ PropertiesView.prototype = {
    * {
    *   "scope": the original scope to be used, probably DebuggerView.Properties,
    *   "element": the element whose value should be made editable,
-   *   "value": the node displaying the value
+   *   "valueLabel": the label displaying the value
    * }
    *
    * @param event aEvent [optional]
@@ -1137,9 +1139,9 @@ PropertiesView.prototype = {
 
     let self = this.scope;
     let element = this.element;
-    let value = this.value;
-    let title = this.value.parentNode;
-    let initialTextContent = value.textContent;
+    let valueLabel = this.valueLabel;
+    let titleNode = valueLabel.parentNode;
+    let initialValue = valueLabel.getAttribute("value");
 
     // When editing an object we need to collapse it first, in order to avoid
     // displaying an inconsistent state while the user is editing.
@@ -1151,44 +1153,39 @@ PropertiesView.prototype = {
     // Create a texbox input element which will be shown in the current
     // element's value location.
     let textbox = document.createElement("textbox");
-    textbox.setAttribute("value", value.textContent);
+    textbox.setAttribute("value", initialValue);
     textbox.className = "element-input";
-    textbox.width = value.clientWidth + 1;
+    textbox.width = valueLabel.clientWidth + 1;
 
     // Save the new value when the texbox looses focus or ENTER is pressed.
     function DVP_element_textbox_blur(aTextboxEvent) {
       DVP_element_textbox_save();
     }
 
-    function DVP_element_textbox_keydown(aTextboxEvent) {
-      if (aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_RETURN ||
-          aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_ENTER) {
-        DVP_element_textbox_save();
-        return;
-      }
-      if (aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_ESCAPE) {
-        value.textContent = initialTextContent;
-        DVP_element_textbox_clear();
-        return;
-      }
-      value.textContent = textbox.value;
-    }
-
-    function DVP_element_textbox_keypress(aTextboxEvent) {
+    function DVP_element_textbox_keyup(aTextboxEvent) {
       if (aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_LEFT ||
           aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_RIGHT ||
           aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_UP ||
           aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_DOWN) {
         return;
       }
-      if (value.clientWidth > textbox.width - 1) {
-        textbox.width = value.clientWidth + 30;
+      if (aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_RETURN ||
+          aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_ENTER) {
+        DVP_element_textbox_save();
+        return;
+      }
+      if (aTextboxEvent.keyCode === aTextboxEvent.DOM_VK_ESCAPE) {
+        valueLabel.setAttribute("value", initialValue);
+        DVP_element_textbox_clear();
+        return;
       }
     }
 
     // The actual save mechanism for the new variable/property value.
     function DVP_element_textbox_save() {
-      if (textbox.value !== value.textContent) {
+      if (textbox.value !== valueLabel.getAttribute("value")) {
+        valueLabel.setAttribute("value", textbox.value);
+
         let expr = "(" + element.token + "=" + textbox.value + ")";
         DebuggerController.StackFrames.evaluate(expr);
       }
@@ -1205,24 +1202,22 @@ PropertiesView.prototype = {
       element.showArrow();
 
       textbox.removeEventListener("blur", DVP_element_textbox_blur, false);
-      textbox.removeEventListener("keydown", DVP_element_textbox_keydown, false);
-      textbox.removeEventListener("keypress", DVP_element_textbox_keypress, false);
-      title.removeChild(textbox);
-      value.removeAttribute("offscreen");
+      textbox.removeEventListener("keyup", DVP_element_textbox_keyup, false);
+      titleNode.removeChild(textbox);
+      titleNode.appendChild(valueLabel);
     }
 
     textbox.addEventListener("blur", DVP_element_textbox_blur, false);
-    textbox.addEventListener("keydown", DVP_element_textbox_keydown, false);
-    textbox.addEventListener("keypress", DVP_element_textbox_keypress, false);
-    title.appendChild(textbox);
-    value.setAttribute("offscreen", "");
+    textbox.addEventListener("keyup", DVP_element_textbox_keyup, false);
+    titleNode.removeChild(valueLabel);
+    titleNode.appendChild(textbox);
 
     textbox.select();
 
     // When the value is a string (displayed as "value"), then we probably want
     // to change it to another string in the textbox, so to avoid typing the ""
     // again, tackle with the selection bounds just a bit.
-    if (value.textContent.match(/^"[^"]*"$/)) {
+    if (valueLabel.getAttribute("value").match(/^"[^"]*"$/)) {
       textbox.selectionEnd--;
       textbox.selectionStart++;
     }
@@ -1315,11 +1310,12 @@ PropertiesView.prototype = {
       return null;
     }
 
-    let element = document.createElement("div");
-    let arrow = document.createElement("span");
-    let name = document.createElement("span");
-    let title = document.createElement("div");
-    let details = document.createElement("div");
+    let element = document.createElement("vbox");
+    let arrow = document.createElement("box");
+    let name = document.createElement("label");
+
+    let title = document.createElement("box");
+    let details = document.createElement("vbox");
 
     // Create a scope node to contain all the elements.
     element.id = aId;
@@ -1330,11 +1326,12 @@ PropertiesView.prototype = {
     arrow.style.visibility = "hidden";
 
     // The name element.
-    name.className = "name";
-    name.textContent = aName || "";
+    name.className = "name plain";
+    name.setAttribute("value", aName || "");
 
     // The title element, containing the arrow and the name.
     title.className = "title";
+    title.setAttribute("align", "center")
 
     // The node element which will contain any added scope variables.
     details.className = "details";
@@ -1608,7 +1605,7 @@ PropertiesView.prototype = {
   _saveHierarchy: function DVP__saveHierarchy(aProperties) {
     let parent = aProperties.parent;
     let element = aProperties.element;
-    let value = aProperties.value;
+    let valueLabel = aProperties.valueLabel;
     let store = aProperties.store || parent._children;
 
     // Make sure we have a valid element and a children storage object.
@@ -1620,7 +1617,7 @@ PropertiesView.prototype = {
       root: parent ? (parent._root || parent) : null,
       parent: parent || null,
       element: element,
-      value: value,
+      valueLabel: valueLabel,
       children: {}
     };
 
@@ -1658,8 +1655,8 @@ PropertiesView.prototype = {
         let action = "";
 
         if (prevVar) {
-          let prevValue = prevVar.value.textContent;
-          let currValue = currVar.value.textContent;
+          let prevValue = prevVar.valueLabel.getAttribute("value");
+          let currValue = currVar.valueLabel.getAttribute("value");
 
           if (currValue != prevValue) {
             action = "changed";

browser/devtools/debugger/debugger.css

@@ -4,133 +4,30 @@
  * 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/. */
 
-/**
- * Debugger content
- */
-
-.dbg-default {
-  cursor: default;
-}
-
 /**
  * Stack frames
  */
 
-#stack {
-  width: 200px;
-}
-
 #stackframes {
   overflow: auto;
 }
 
-.dbg-stackframe {
-  display: block;
-}
-
-.dbg-stackframe-name {
-  float: left;
-}
-
-.dbg-stackframe-details {
-  float: right;
-}
-
-.dbg-stackframe-name:-moz-locale-dir(rtl) {
-  float: right;
-}
-
-.dbg-stackframe-details:-moz-locale-dir(rtl) {
-  float: left;
-}
-
 /**
  * Properties elements
  */
 
-#properties {
-  width: 250px;
-}
-
 #variables {
   overflow: auto;
 }
 
 /**
- * Scope element
+ * Scope, variable and property elements
  */
 
-.scope {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-.scope > .details {
+.details {
   display: none;
 }
 
-.scope > .details[open] {
+.details[open] {
   display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-/**
- * Variable element
- */
-
-.variable {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-.variable > .title {
-  white-space: nowrap;
-  display: block;
-}
-
-.variable > .details {
-  display: none;
-}
-
-.variable > .details[open] {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-/**
- * Property element
- */
-
-.property {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-.property > .title {
-  white-space: nowrap;
-  display: block;
-}
-
-.property > .details {
-  display: none;
-}
-
-.property > .details[open] {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-}
-
-.value[offscreen] {
-  position: fixed;
-  top: -100000px;
-  left: -100000px;
-}
-
-/**
- * Expand/collapse arrow
- */
-
-.arrow {
-  display: inline-block;
-  vertical-align: middle;
 }

browser/devtools/debugger/test/browser_dbg_displayName.js

@@ -33,7 +33,7 @@ function testAnonCall() {
       is(frames.querySelectorAll(".dbg-stackframe").length, 3,
         "Should have three frames.");
 
-      is(frames.querySelector("#stackframe-0 .dbg-stackframe-name").textContent,
+      is(frames.querySelector("#stackframe-0 .dbg-stackframe-name").getAttribute("value"),
         "anonFunc", "Frame name should be anonFunc");
 
       resumeAndFinish();

browser/devtools/debugger/test/browser_dbg_propertyview-02.js

@@ -31,7 +31,7 @@ function testSimpleCall() {
       is(testScope.id, "test-scope",
         "The newly created scope should have the default id set.");
 
-      is(testScope.querySelector(".name").textContent, "test",
+      is(testScope.querySelector(".name").getAttribute("value"), "test",
         "Any new scope should have the designated title.");
 
       is(testScope.querySelector(".details").childNodes.length, 0,

browser/devtools/debugger/test/browser_dbg_propertyview-03.js

@@ -36,7 +36,7 @@ function testSimpleCall() {
       is(testVar.id, "test-scope->something-variable",
         "The newly created scope should have the default id set.");
 
-      is(testVar.querySelector(".name").textContent, "something",
+      is(testVar.querySelector(".name").getAttribute("value"), "something",
         "Any new variable should have the designated title.");
 
       is(testVar.querySelector(".details").childNodes.length, 0,

browser/devtools/debugger/test/browser_dbg_propertyview-05.js

@@ -28,7 +28,7 @@ function testSimpleCall() {
 
       testVar.setGrip(1.618);
 
-      is(testVar.querySelector(".value").textContent, "1.618",
+      is(testVar.querySelector(".value").getAttribute("value"), "1.618",
         "The grip information for the variable wasn't set correctly.");
 
       is(testVar.querySelector(".details").childNodes.length, 0,
@@ -40,7 +40,7 @@ function testSimpleCall() {
       is(testVar.querySelector(".details").childNodes.length, 0,
         "Adding type and class properties shouldn't add any new tree nodes.");
 
-      is(testVar.querySelector(".value").textContent, "[object Window]",
+      is(testVar.querySelector(".value").getAttribute("value"), "[object Window]",
         "The information for the variable wasn't set correctly.");
 
 

browser/devtools/debugger/test/browser_dbg_propertyview-06.js

@@ -104,28 +104,28 @@ function testSimpleCall() {
         "The localVar5.someProp5 doesn't contain all the created properties.");
 
 
-      is(windowVar.querySelector(".value").textContent, "[object Window]",
+      is(windowVar.querySelector(".value").getAttribute("value"), "[object Window]",
         "The grip information for the windowVar wasn't set correctly.");
 
-      is(documentVar.querySelector(".value").textContent, "[object HTMLDocument]",
+      is(documentVar.querySelector(".value").getAttribute("value"), "[object HTMLDocument]",
         "The grip information for the documentVar wasn't set correctly.");
 
-      is(localVar0.querySelector(".value").textContent, "42",
+      is(localVar0.querySelector(".value").getAttribute("value"), "42",
         "The grip information for the localVar0 wasn't set correctly.");
 
-      is(localVar1.querySelector(".value").textContent, "true",
+      is(localVar1.querySelector(".value").getAttribute("value"), "true",
         "The grip information for the localVar1 wasn't set correctly.");
 
-      is(localVar2.querySelector(".value").textContent, "\"nasu\"",
+      is(localVar2.querySelector(".value").getAttribute("value"), "\"nasu\"",
         "The grip information for the localVar2 wasn't set correctly.");
 
-      is(localVar3.querySelector(".value").textContent, "undefined",
+      is(localVar3.querySelector(".value").getAttribute("value"), "undefined",
         "The grip information for the localVar3 wasn't set correctly.");
 
-      is(localVar4.querySelector(".value").textContent, "null",
+      is(localVar4.querySelector(".value").getAttribute("value"), "null",
         "The grip information for the localVar4 wasn't set correctly.");
 
-      is(localVar5.querySelector(".value").textContent, "[object Object]",
+      is(localVar5.querySelector(".value").getAttribute("value"), "[object Object]",
         "The grip information for the localVar5 wasn't set correctly.");
 
       gDebugger.DebuggerController.activeThread.resume(function() {

browser/devtools/debugger/test/browser_dbg_propertyview-07.js

@@ -55,37 +55,37 @@ function testFrameParameters()
       is(localNodes.length, 11,
         "The localScope should contain all the created variable elements.");
 
-      is(localNodes[0].querySelector(".value").textContent, "[object Proxy]",
+      is(localNodes[0].querySelector(".value").getAttribute("value"), "[object Proxy]",
         "Should have the right property value for 'this'.");
 
-      is(localNodes[1].querySelector(".value").textContent, "[object Object]",
+      is(localNodes[1].querySelector(".value").getAttribute("value"), "[object Object]",
         "Should have the right property value for 'aArg'.");
 
-      is(localNodes[2].querySelector(".value").textContent, '"beta"',
+      is(localNodes[2].querySelector(".value").getAttribute("value"), '"beta"',
         "Should have the right property value for 'bArg'.");
 
-      is(localNodes[3].querySelector(".value").textContent, "3",
+      is(localNodes[3].querySelector(".value").getAttribute("value"), "3",
         "Should have the right property value for 'cArg'.");
 
-      is(localNodes[4].querySelector(".value").textContent, "false",
+      is(localNodes[4].querySelector(".value").getAttribute("value"), "false",
         "Should have the right property value for 'dArg'.");
 
-      is(localNodes[5].querySelector(".value").textContent, "null",
+      is(localNodes[5].querySelector(".value").getAttribute("value"), "null",
         "Should have the right property value for 'eArg'.");
 
-      is(localNodes[6].querySelector(".value").textContent, "undefined",
+      is(localNodes[6].querySelector(".value").getAttribute("value"), "undefined",
         "Should have the right property value for 'fArg'.");
 
-      is(localNodes[7].querySelector(".value").textContent, "1",
+      is(localNodes[7].querySelector(".value").getAttribute("value"), "1",
        "Should have the right property value for 'a'.");
 
-      is(localNodes[8].querySelector(".value").textContent, "[object Object]",
+      is(localNodes[8].querySelector(".value").getAttribute("value"), "[object Object]",
        "Should have the right property value for 'b'.");
 
-      is(localNodes[9].querySelector(".value").textContent, "[object Object]",
+      is(localNodes[9].querySelector(".value").getAttribute("value"), "[object Object]",
        "Should have the right property value for 'c'.");
 
-      is(localNodes[10].querySelector(".value").textContent, "[object Arguments]",
+      is(localNodes[10].querySelector(".value").getAttribute("value"), "[object Arguments]",
         "Should have the right property value for 'arguments'.");
 
       resumeAndFinish();

browser/devtools/debugger/test/browser_dbg_propertyview-08.js

@@ -53,7 +53,7 @@ function testFrameParameters()
       is(localNodes.length, 11,
         "The localScope should contain all the created variable elements.");
 
-      is(localNodes[0].querySelector(".value").textContent, "[object Proxy]",
+      is(localNodes[0].querySelector(".value").getAttribute("value"), "[object Proxy]",
         "Should have the right property value for 'this'.");
 
       // Expand the 'this', 'arguments' and 'c' tree nodes. This causes
@@ -79,34 +79,34 @@ function testFrameParameters()
         }
         window.clearInterval(intervalID);
         is(localNodes[0].querySelector(".property > .title > .key")
-                        .textContent, "__proto__ ",
+                        .getAttribute("value"), "__proto__",
           "Should have the right property name for __proto__.");
 
         ok(localNodes[0].querySelector(".property > .title > .value")
-                        .textContent.search(/object/) != -1,
+                        .getAttribute("value").search(/object/) != -1,
           "__proto__ should be an object.");
 
-        is(localNodes[9].querySelector(".value").textContent, "[object Object]",
+        is(localNodes[9].querySelector(".value").getAttribute("value"), "[object Object]",
           "Should have the right property value for 'c'.");
 
         is(localNodes[9].querySelectorAll(".property > .title > .key")[1]
-                        .textContent, "a",
+                        .getAttribute("value"), "a",
           "Should have the right property name for 'a'.");
 
         is(localNodes[9].querySelectorAll(".property > .title > .value")[1]
-                        .textContent, 1,
+                        .getAttribute("value"), 1,
           "Should have the right value for 'c.a'.");
 
-        is(localNodes[10].querySelector(".value").textContent,
+        is(localNodes[10].querySelector(".value").getAttribute("value"),
          "[object Arguments]",
          "Should have the right property value for 'arguments'.");
 
         is(localNodes[10].querySelectorAll(".property > .title > .key")[7]
-                       .textContent, "length",
+                       .getAttribute("value"), "length",
          "Should have the right property name for 'length'.");
 
         is(localNodes[10].querySelectorAll(".property > .title > .value")[7]
-                       .textContent, 5,
+                       .getAttribute("value"), 5,
          "Should have the right argument length.");
 
         resumeAndFinish();

browser/devtools/debugger/test/browser_dbg_propertyview-edit.js

@@ -33,10 +33,10 @@ function testFrameEval() {
           localNodes = localScope.querySelector(".details").childNodes,
           varA = localNodes[7];
 
-      is(varA.querySelector(".name").textContent, "a",
+      is(varA.querySelector(".name").getAttribute("value"), "a",
         "Should have the right name for 'a'.");
 
-      is(varA.querySelector(".value").textContent, 1,
+      is(varA.querySelector(".value").getAttribute("value"), 1,
         "Should have the right initial value for 'a'.");
 
       testModification(varA, function(aVar) {
@@ -76,7 +76,7 @@ function testModification(aVar, aCallback, aNewValue, aNewResult) {
           localNodes = localScope.querySelector(".details").childNodes,
           varA = localNodes[7];
 
-      is(varA.querySelector(".value").textContent, aNewResult,
+      is(varA.querySelector(".value").getAttribute("value"), aNewResult,
         "Should have the right value for 'a'.");
 
       executeSoon(function() {

browser/devtools/debugger/test/browser_dbg_stack-02.js

@@ -36,7 +36,7 @@ function testEvalCall() {
       is(childNodes.length, frames.querySelectorAll(".dbg-stackframe").length,
         "All children should be frames.");
 
-      is(frames.querySelector("#stackframe-0 .dbg-stackframe-name").textContent,
+      is(frames.querySelector("#stackframe-0 .dbg-stackframe-name").getAttribute("value"),
         "(eval)", "Frame name should be (eval)");
 
       ok(frames.querySelector("#stackframe-0").classList.contains("selected"),

browser/themes/gnomestripe/devtools/debugger.css

@@ -8,11 +8,6 @@
   background: -moz-dialog;
 }
 
-div,
-span {
-  font: inherit;
-}
-
 /**
  * Debugger content
  */
@@ -21,27 +16,6 @@ span {
   padding: 6px;
 }
 
-#dbg-content > * > .vbox {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  box-shadow: 0 -5px 10px -3px #ccc;
-  -moz-margin-end: -1px;
-}
-
-#dbg-content > * > .title {
-  text-shadow: 0 1px #fff;
-}
-
-/**
- * Debugger statusbar
- */
-
-#dbg-statusbar {
-  font: -moz-list;
-  padding: 2px;
-  -moz-padding-start: 5px;
-}
-
 /**
  * Lists and headers
  */

browser/themes/pinstripe/devtools/debugger.css

@@ -8,11 +8,6 @@
   background: -moz-dialog;
 }
 
-div,
-span {
-  font: inherit;
-}
-
 /**
  * Debugger content
  */
@@ -21,27 +16,6 @@ span {
   padding: 6px;
 }
 
-#dbg-content > * > .vbox {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  box-shadow: 0 -5px 10px -3px #ccc;
-  -moz-margin-end: -1px;
-}
-
-#dbg-content > * > .title {
-  text-shadow: 0 1px #fff;
-}
-
-/**
- * Debugger statusbar
- */
-
-#dbg-statusbar {
-  font: -moz-list;
-  padding: 2px;
-  -moz-padding-start: 5px;
-}
-
 /**
  * Lists and headers
  */

browser/themes/winstripe/devtools/debugger.css

@@ -8,11 +8,6 @@
   background: -moz-dialog;
 }
 
-div,
-span {
-  font: inherit;
-}
-
 /**
  * Debugger content
  */
@@ -21,27 +16,6 @@ span {
   padding: 6px;
 }
 
-#dbg-content > * > .vbox {
-  background-color: #fff;
-  border: 1px solid #bbb;
-  box-shadow: 0 -5px 10px -3px #ccc;
-  -moz-margin-end: -1px;
-}
-
-#dbg-content > * > .title {
-  text-shadow: 0 1px #fff;
-}
-
-/**
- * Debugger statusbar
- */
-
-#dbg-statusbar {
-  font: -moz-list;
-  padding: 2px;
-  -moz-padding-start: 5px;
-}
-
 /**
  * Lists and headers
  */