Bug 833963 - Variables View: better handling for long strings, r=msucan

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

@@ -26,7 +26,7 @@ function testSimpleCall() {
       let testScope = gDebugger.DebuggerView.Variables.addScope("test");
       let testVar = testScope.addVar("something");
 
-      testVar._setGrip(1.618);
+      testVar.setGrip(1.618);
 
       is(testVar.target.querySelector(".value").getAttribute("value"), "1.618",
         "The grip information for the variable wasn't set correctly.");
@@ -35,7 +35,7 @@ function testSimpleCall() {
         "Adding a value property shouldn't add any new tree nodes.");
 
 
-      testVar._setGrip({ "type": "object", "class": "Window" });
+      testVar.setGrip({ "type": "object", "class": "Window" });
 
       is(testVar.target.querySelector(".details").childNodes.length, 0,
         "Adding type and class properties shouldn't add any new tree nodes.");

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

@@ -35,13 +35,13 @@ function testSimpleCall() {
       let localVar4 = localScope.addVar("localVar4");
       let localVar5 = localScope.addVar("localVar5");
 
-      localVar0._setGrip(42);
-      localVar1._setGrip(true);
-      localVar2._setGrip("nasu");
+      localVar0.setGrip(42);
+      localVar1.setGrip(true);
+      localVar2.setGrip("nasu");
 
-      localVar3._setGrip({ "type": "undefined" });
-      localVar4._setGrip({ "type": "null" });
-      localVar5._setGrip({ "type": "object", "class": "Object" });
+      localVar3.setGrip({ "type": "undefined" });
+      localVar4.setGrip({ "type": "null" });
+      localVar5.setGrip({ "type": "object", "class": "Object" });
 
       localVar5.addProperties({ "someProp0": { "value": 42, "enumerable": true },
                                 "someProp1": { "value": true , "enumerable": true},
@@ -63,10 +63,10 @@ function testSimpleCall() {
                                                                    "set": { "type": "undefined" },
                                                                    "enumerable": true } });
 
-      windowVar._setGrip({ "type": "object", "class": "Window" });
+      windowVar.setGrip({ "type": "object", "class": "Window" });
       windowVar.addProperties({ "helloWorld": { "value": "hello world" } });
 
-      documentVar._setGrip({ "type": "object", "class": "HTMLDocument" });
+      documentVar.setGrip({ "type": "object", "class": "HTMLDocument" });
       documentVar.addProperties({ "onload": { "value": { "type": "null" } },
                                   "onunload": { "value": { "type": "null" } },
                                   "onfocus": { "value": { "type": "null" } },

browser/devtools/shared/VariablesView.jsm

@@ -1231,7 +1231,7 @@ function Variable(aScope, aName, aDescriptor) {
   this._onValueInputKeyPress = this._onValueInputKeyPress.bind(this);
 
   Scope.call(this, aScope, aName, this._initialDescriptor = aDescriptor);
-  this._setGrip(aDescriptor.value);
+  this.setGrip(aDescriptor.value);
   this._symbolicName = aName;
   this._absoluteName = aScope.name + "[\"" + aName + "\"]";
 }
@@ -1414,7 +1414,7 @@ create({ constructor: Variable, proto: Scope.prototype }, {
    *             - { type: "null" }
    *             - { type: "object", class: "Object" }
    */
-  _setGrip: function V__setGrip(aGrip) {
+  setGrip: function V_setGrip(aGrip) {
     // Don't allow displaying grip information if there's no name available.
     if (!this._nameString) {
       return;
@@ -1493,6 +1493,7 @@ create({ constructor: Variable, proto: Scope.prototype }, {
 
     let valueLabel = this._valueLabel = document.createElement("label");
     valueLabel.className = "plain value";
+    valueLabel.setAttribute("crop", "center");
 
     this._title.appendChild(separatorLabel);
     this._title.appendChild(valueLabel);
@@ -2091,7 +2092,7 @@ VariablesView.getGrip = function VV_getGrip(aValue) {
  * Returns a custom formatted property string for a grip.
  *
  * @param any aGrip
- *        @see Variable._setGrip
+ *        @see Variable.setGrip
  * @param boolean aConciseFlag
  *        Return a concisely formatted property string.
  * @return string
@@ -2128,7 +2129,7 @@ VariablesView.getString = function VV_getString(aGrip, aConciseFlag) {
  * Returns a custom class style for a grip.
  *
  * @param any aGrip
- *        @see Variable._setGrip
+ *        @see Variable.setGrip
  * @return string
  *         The custom class style.
  */
@@ -2139,6 +2140,8 @@ VariablesView.getClass = function VV_getClass(aGrip) {
         return "token-undefined";
       case "null":
         return "token-null";
+      case "longString":
+        return "token-string";
     }
   } else {
     switch (typeof aGrip) {

browser/themes/gnomestripe/devtools/debugger.css

@@ -440,6 +440,8 @@
  */
 
 #variables .element-value-input {
+  overflow: hidden;
+  max-width: 30em;
   -moz-margin-start: 5px !important;
 }
 
@@ -484,6 +486,7 @@
 }
 
 .token-string {
+  max-width: 30em;
   color: #1c00cf;
 }
 

browser/themes/pinstripe/devtools/debugger.css

@@ -442,6 +442,8 @@
  */
 
 #variables .element-value-input {
+  overflow: hidden;
+  max-width: 30em;
   -moz-margin-start: 5px !important;
 }
 
@@ -486,6 +488,7 @@
 }
 
 .token-string {
+  max-width: 30em;
   color: #1c00cf;
 }
 

browser/themes/winstripe/devtools/debugger.css

@@ -448,6 +448,8 @@
  */
 
 #variables .element-value-input {
+  overflow: hidden;
+  max-width: 30em;
   -moz-margin-start: 5px !important;
 }
 
@@ -492,6 +494,7 @@
 }
 
 .token-string {
+  max-width: 30em;
   color: #1c00cf;
 }