Bug 922144 - Part 1: Aligned values option for Variables View. r=vporof
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 23 Oct 2013 09:57:00 -0500
changeset 166044 34f1f5b52bb75107e2ef25c3ec485f05b76f3713
parent 166043 cb59117d41f512ccb9b912bbbf2291b02d991827
child 166045 71ecbc0583e2206edbdb6de381289a97864242fc
push id3066
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 19:58:46 +0000
treeherdermozilla-beta@a31a0dce83aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs922144
milestone27.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 922144 - Part 1: Aligned values option for Variables View. r=vporof
browser/devtools/shared/widgets/VariablesView.jsm
browser/devtools/shared/widgets/widgets.css
browser/themes/linux/devtools/widgets.css
browser/themes/osx/devtools/widgets.css
browser/themes/windows/devtools/widgets.css
--- a/browser/devtools/shared/widgets/VariablesView.jsm
+++ b/browser/devtools/shared/widgets/VariablesView.jsm
@@ -888,16 +888,37 @@ VariablesView.prototype = {
       return;
     }
 
     this._parent.removeChild(this._emptyTextNode);
     this._emptyTextNode = null;
   },
 
   /**
+   * Gets if all values should be aligned together.
+   * @return boolean
+   */
+  get alignedValues() {
+    return this._alignedValues;
+  },
+
+  /**
+   * Sets if all values should be aligned together.
+   * @param boolean aFlag
+   */
+  set alignedValues(aFlag) {
+    this._alignedValues = aFlag;
+    if (aFlag) {
+      this._parent.setAttribute("aligned-values", "");
+    } else {
+      this._parent.removeAttribute("aligned-values");
+    }
+  },
+
+  /**
    * Gets the parent node holding this view.
    * @return nsIDOMNode
    */
   get parentNode() this._parent,
 
   /**
    * Gets the owner document holding this view.
    * @return nsIHTMLDocument
@@ -1721,16 +1742,17 @@ Scope.prototype = {
    */
   _startThrobber: function() {
     if (this._throbber) {
       this._throbber.hidden = false;
       return;
     }
     let throbber = this._throbber = this.document.createElement("hbox");
     throbber.className = "variables-view-throbber";
+    throbber.setAttribute("optional-visibility", "");
     this._title.insertBefore(throbber, this._spacer);
   },
 
   /**
    * Stops spinning the throbber in this scope's title.
    */
   _stopThrobber: function() {
     if (!this._throbber) {
@@ -2317,28 +2339,29 @@ Variable.prototype = Heritage.extend(Sco
     separatorLabel.className = "plain separator";
     separatorLabel.setAttribute("value", this.ownerView.separatorStr);
 
     let valueLabel = this._valueLabel = document.createElement("label");
     valueLabel.className = "plain value";
     valueLabel.setAttribute("crop", "center");
 
     let spacer = this._spacer = document.createElement("spacer");
+    spacer.setAttribute("optional-visibility", "");
     spacer.setAttribute("flex", "1");
 
     this._title.appendChild(separatorLabel);
     this._title.appendChild(valueLabel);
     this._title.appendChild(spacer);
 
     if (VariablesView.isPrimitive(descriptor)) {
       this.hideArrow();
     }
 
     // If no value will be displayed, we don't need the separator.
-    if (!descriptor.get && !descriptor.set && !descriptor.value) {
+    if (!descriptor.get && !descriptor.set && !("value" in descriptor)) {
       separatorLabel.hidden = true;
     }
 
     if (descriptor.get || descriptor.set) {
       separatorLabel.hidden = true;
       valueLabel.hidden = true;
 
       // Changing getter/setter names is never allowed.
@@ -2394,34 +2417,38 @@ Variable.prototype = Heritage.extend(Sco
 
     if (ownerView.preventDescriptorModifiers) {
       return;
     }
 
     if (!descriptor.writable && !ownerView.getter && !ownerView.setter) {
       let nonWritableIcon = this.document.createElement("hbox");
       nonWritableIcon.className = "variable-or-property-non-writable-icon";
+      nonWritableIcon.setAttribute("optional-visibility", "");
       this._title.appendChild(nonWritableIcon);
     }
     if (descriptor.value && typeof descriptor.value == "object") {
       if (descriptor.value.frozen) {
         let frozenLabel = this.document.createElement("label");
         frozenLabel.className = "plain variable-or-property-frozen-label";
+        frozenLabel.setAttribute("optional-visibility", "");
         frozenLabel.setAttribute("value", "F");
         this._title.appendChild(frozenLabel);
       }
       if (descriptor.value.sealed) {
         let sealedLabel = this.document.createElement("label");
         sealedLabel.className = "plain variable-or-property-sealed-label";
+        sealedLabel.setAttribute("optional-visibility", "");
         sealedLabel.setAttribute("value", "S");
         this._title.appendChild(sealedLabel);
       }
       if (!descriptor.value.extensible) {
         let nonExtensibleLabel = this.document.createElement("label");
         nonExtensibleLabel.className = "plain variable-or-property-non-extensible-label";
+        nonExtensibleLabel.setAttribute("optional-visibility", "");
         nonExtensibleLabel.setAttribute("value", "N");
         this._title.appendChild(nonExtensibleLabel);
       }
     }
   },
 
   /**
    * Prepares all tooltips for this variable.
@@ -2552,17 +2579,19 @@ Variable.prototype = Heritage.extend(Sco
   _activateInput: function(aLabel, aClassName, aCallbacks) {
     let initialString = aLabel.getAttribute("value");
 
     // Create a texbox input element which will be shown in the current
     // element's specified label location.
     let input = this.document.createElement("textbox");
     input.className = "plain " + aClassName;
     input.setAttribute("value", initialString);
-    input.setAttribute("flex", "1");
+    if (!this._variablesView.alignedValues) {
+      input.setAttribute("flex", "1");
+    }
 
     // Replace the specified label with a textbox input element.
     aLabel.parentNode.replaceChild(input, aLabel);
     this._variablesView._boxObject.ensureElementIsVisible(input);
     input.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 ""
--- a/browser/devtools/shared/widgets/widgets.css
+++ b/browser/devtools/shared/widgets/widgets.css
@@ -52,8 +52,16 @@
 }
 
 .variable-or-property:not([safe-getter]) > tooltip > label[value=WebIDL],
 .variable-or-property:not([non-extensible]) > tooltip > label[value=extensible],
 .variable-or-property:not([frozen]) > tooltip > label[value=frozen],
 .variable-or-property:not([sealed]) > tooltip > label[value=sealed] {
   display: none;
 }
+
+*:not(:hover) .variables-view-delete {
+  visibility: hidden;
+}
+
+.variables-view-container[aligned-values] .title > [optional-visibility] {
+  display: none;
+}
--- a/browser/themes/linux/devtools/widgets.css
+++ b/browser/themes/linux/devtools/widgets.css
@@ -560,16 +560,30 @@
   text-shadow: 0 0 8px #cfc;
 }
 
 .variable-or-property[scope]:not(:focus) > .title > .name {
   color: #00a;
   text-shadow: 0 0 8px #ccf;
 }
 
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
 /* Variables and properties tooltips */
 
 .variable-or-property > tooltip > label {
   margin: 0 2px 0 2px;
 }
 
 .variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
 .variable-or-property[non-configurable] > tooltip > label[value=configurable],
@@ -595,20 +609,16 @@
 .variables-view-delete:hover {
   -moz-image-region: rect(0,32px,16px,16px);
 }
 
 .variables-view-delete:active {
   -moz-image-region: rect(0,48px,16px,32px);
 }
 
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
 .variables-view-delete > .toolbarbutton-text {
   display: none;
 }
 
 .variables-view-edit {
   background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
   width: 20px;
   height: 16px;
--- a/browser/themes/osx/devtools/widgets.css
+++ b/browser/themes/osx/devtools/widgets.css
@@ -560,16 +560,30 @@
   text-shadow: 0 0 8px #cfc;
 }
 
 .variable-or-property[scope]:not(:focus) > .title > .name {
   color: #00a;
   text-shadow: 0 0 8px #ccf;
 }
 
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
 /* Variables and properties tooltips */
 
 .variable-or-property > tooltip > label {
   margin: 0 2px 0 2px;
 }
 
 .variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
 .variable-or-property[non-configurable] > tooltip > label[value=configurable],
@@ -595,20 +609,16 @@
 .variables-view-delete:hover {
   -moz-image-region: rect(0,32px,16px,16px);
 }
 
 .variables-view-delete:active {
   -moz-image-region: rect(0,48px,16px,32px);
 }
 
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
 .variables-view-delete > .toolbarbutton-text {
   display: none;
 }
 
 .variables-view-edit {
   background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
   width: 20px;
   height: 16px;
--- a/browser/themes/windows/devtools/widgets.css
+++ b/browser/themes/windows/devtools/widgets.css
@@ -563,16 +563,30 @@
   text-shadow: 0 0 8px #cfc;
 }
 
 .variable-or-property[scope]:not(:focus) > .title > .name {
   color: #00a;
   text-shadow: 0 0 8px #ccf;
 }
 
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
 /* Variables and properties tooltips */
 
 .variable-or-property > tooltip > label {
   margin: 0 2px 0 2px;
 }
 
 .variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
 .variable-or-property[non-configurable] > tooltip > label[value=configurable],
@@ -598,20 +612,16 @@
 .variables-view-delete:hover {
   -moz-image-region: rect(0,32px,16px,16px);
 }
 
 .variables-view-delete:active {
   -moz-image-region: rect(0,48px,16px,32px);
 }
 
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
 .variables-view-delete > .toolbarbutton-text {
   display: none;
 }
 
 .variables-view-edit {
   background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
   width: 20px;
   height: 16px;