Bug 752834 - UI tweaks for the property view; r=past
authorVictor Porof <vporof@mozilla.com>
Tue, 29 May 2012 16:12:29 +0300
changeset 97650 71f26fd0bdc5826bdd443a9f9ea6cced85b38da2
parent 97649 5d7b03e92502015ec4f87c4de4969797a12cd12c
child 97651 9448caa01cf35f401cf0df93e5c8126f61021600
push idunknown
push userunknown
push dateunknown
reviewerspast
bugs752834
milestone15.0a1
Bug 752834 - UI tweaks for the property view; r=past
browser/devtools/debugger/debugger-view.js
browser/themes/gnomestripe/devtools/debugger.css
browser/themes/pinstripe/devtools/debugger.css
browser/themes/winstripe/devtools/debugger.css
--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -808,16 +808,22 @@ PropertiesView.prototype = {
      */
     element.addVar = this._addVar.bind(this, element);
 
     /**
      * @see DebuggerView.Properties.addScopeToHierarchy
      */
     element.addToHierarchy = this.addScopeToHierarchy.bind(this, element);
 
+    // Setup the additional elements specific for a scope node.
+    element.refresh(function() {
+      let title = element.getElementsByClassName("title")[0];
+      title.classList.add("devtools-toolbar");
+    }.bind(this));
+
     // Return the element for later use if necessary.
     return element;
   },
 
   /**
    * Removes all added scopes in the property container tree.
    */
   empty: function DVP_empty() {
@@ -1030,53 +1036,55 @@ PropertiesView.prototype = {
 
         // For accessor property descriptors, the two grips need to be
         // contained in 'get' and 'set' properties.
         let getter = desc["get"];
         let setter = desc["set"];
 
         // Handle data property and accessor property descriptors.
         if (value !== undefined) {
-          this._addProperty(aVar, [i, value]);
+          this._addProperty(aVar, [i, value], desc);
         }
         if (getter !== undefined || setter !== undefined) {
           let prop = this._addProperty(aVar, [i]).expand();
-          prop.getter = this._addProperty(prop, ["get", getter]);
-          prop.setter = this._addProperty(prop, ["set", setter]);
+          prop.getter = this._addProperty(prop, ["get", getter], desc);
+          prop.setter = this._addProperty(prop, ["set", setter], desc);
         }
       }
     }
     return aVar;
   },
 
   /**
    * Adds a property to a specified variable.
    * If the optional id is not specified, the property html node will have a
    * default id set as aVar.id->aKey-property.
    *
    * @param object aVar
    *        The parent variable element.
-   * @param {Array} aProperty
+   * @param array aProperty
    *        An array containing the key and grip properties, specifying
    *        the value and/or type & class of the variable (if the type
    *        is not specified, it will be inferred from the value).
    *        e.g. ["someProp0", 42]
    *             ["someProp1", true]
    *             ["someProp2", "nasu"]
    *             ["someProp3", { type: "undefined" }]
    *             ["someProp4", { type: "null" }]
    *             ["someProp5", { type: "object", class: "Object" }]
+   * @param object aFlags
+   *        Contans configurable, enumberable or writable flags.
    * @param string aName
    *        Optional, the property name.
    * @paarm string aId
    *        Optional, an id for the property html node.
    * @return object
    *         The newly created html node representing the added prop.
    */
-  _addProperty: function DVP__addProperty(aVar, aProperty, aName, aId) {
+  _addProperty: function DVP__addProperty(aVar, aProperty, aFlags, aName, aId) {
     // Make sure the variable container exists.
     if (!aVar) {
       return null;
     }
 
     // Compute the id of the element if not specified.
     aId = aId || (aVar.id + "->" + aProperty[0] + "-property");
 
@@ -1104,17 +1112,25 @@ PropertiesView.prototype = {
     element.refresh(function(pKey, pGrip) {
       let title = element.getElementsByClassName("title")[0];
       let nameLabel = title.getElementsByClassName("name")[0];
       let separatorLabel = document.createElement("label");
       let valueLabel = document.createElement("label");
 
       if ("undefined" !== typeof pKey) {
         // Use a key element to specify the property name.
-        nameLabel.className = "key plain";
+        let className = "";
+        if (aFlags) {
+          if (aFlags.configurable === false) { className += "non-configurable "; }
+          if (aFlags.enumerable === false) { className += "non-enumerable "; }
+          if (aFlags.writable === false) { className += "non-writable "; }
+        }
+        if (pKey === "__proto__ ") { className += "proto "; }
+
+        nameLabel.className = className + "key plain";
         nameLabel.setAttribute("value", pKey.trim());
         title.appendChild(nameLabel);
       }
       if ("undefined" !== typeof pGrip) {
         // Separator between the variable name and its value.
         separatorLabel.className = "plain";
         separatorLabel.setAttribute("value", ":");
 
--- a/browser/themes/gnomestripe/devtools/debugger.css
+++ b/browser/themes/gnomestripe/devtools/debugger.css
@@ -47,71 +47,64 @@
   -moz-padding-end: 4px;
 }
 
 .dbg-stackframe-name {
   font-weight: 600;
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
   background-color: white;
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
   -moz-margin-start: 10px;
   font: -moz-list;
 }
 
 /**
  * Scope element
  */
 
 .scope > .title {
-  margin-top: 1px;
-  -moz-margin-start: 1px;
-  -moz-padding-start: 2px;
-
-  background: -moz-linear-gradient(bottom,
-      rgb(160,175,205) 0,
-      rgb(120,140,175) 100%);
-
-  border-bottom: 1px solid #888;
-  box-shadow: 0 0 4px #ccc;
-  text-shadow: 0 1px #777;
+  text-shadow: 0 1px #222;
   color: #fff;
   font: -moz-list;
 }
 
+.scope > .title > .arrow {
+  margin-top: -2px;
+}
+
 .scope > .title > .name {
   padding-top: 2px;
-  padding-bottom: 2px;
 }
 
 .scope > .details {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
 
 /**
  * Variable element
  */
 
 .variable {
   -moz-margin-start: 1px;
   -moz-margin-end: 1px;
   margin-top: 2px;
-  border-bottom: 1px dotted #aaa;
+  border-bottom: 1px dotted #ccc;
   border-radius: 8px;
   -moz-transition: background 1s ease-in-out;
   background: #fff;
 }
 
 .variable[changed] {
   -moz-transition-duration: 0.4s;
   background: rgba(255, 255, 0, 0.65);
@@ -138,18 +131,23 @@
 .property > .title > .arrow {
   margin-top: -2px;
 }
 
 .property > .title > .key {
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {
   -moz-padding-start: 6px;
   color: #bbb;
 }
 
 .token-null {
--- a/browser/themes/pinstripe/devtools/debugger.css
+++ b/browser/themes/pinstripe/devtools/debugger.css
@@ -49,70 +49,64 @@
   -moz-padding-end: 4px;
 }
 
 .dbg-stackframe-name {
   font-weight: 600;
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
   background-color: white;
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
   -moz-margin-start: 10px;
   font: -moz-list;
 }
 
 /**
  * Scope element
  */
 
 .scope > .title {
-  margin-top: 1px;
-  -moz-margin-start: 1px;
-  -moz-padding-start: 2px;
-
-  background: -moz-linear-gradient(bottom,
-      rgb(160,175,205) 0,
-      rgb(120,140,175) 100%);
-
-  border-bottom: 1px solid #888;
-  box-shadow: 0 0 4px #ccc;
-  text-shadow: 0 1px #777;
+  text-shadow: 0 1px #222;
   color: #fff;
   font: -moz-list;
 }
 
+.scope > .title > .arrow {
+  margin-top: -2px;
+}
+
 .scope > .title > .name {
-  padding-top: 4px;
+  padding-top: 2px;
 }
 
 .scope > .details {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
 
 /**
  * Variable element
  */
 
 .variable {
   -moz-margin-start: 1px;
   -moz-margin-end: 1px;
   margin-top: 2px;
-  border-bottom: 1px dotted #aaa;
+  border-bottom: 1px dotted #ccc;
   border-radius: 8px;
   -moz-transition: background 1s ease-in-out;
   background: #fff;
 }
 
 .variable[changed] {
   -moz-transition-duration: 0.4s;
   background: rgba(255, 255, 0, 0.65);
@@ -139,18 +133,23 @@
 .property > .title > .arrow {
   margin-top: -2px;
 }
 
 .property > .title > .key {
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {
   -moz-padding-start: 6px;
   color: #bbb;
 }
 
 .token-null {
--- a/browser/themes/winstripe/devtools/debugger.css
+++ b/browser/themes/winstripe/devtools/debugger.css
@@ -47,71 +47,64 @@
   -moz-padding-end: 4px;
 }
 
 .dbg-stackframe-name {
   font-weight: 600;
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
   background-color: white;
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
   -moz-margin-start: 10px;
   font: -moz-list;
 }
 
 /**
  * Scope element
  */
 
 .scope > .title {
-  margin-top: 1px;
-  -moz-margin-start: 1px;
-  -moz-padding-start: 2px;
-
-  background: -moz-linear-gradient(bottom,
-      rgb(160,175,205) 0,
-      rgb(120,140,175) 100%);
-
-  border-bottom: 1px solid #888;
-  box-shadow: 0 0 4px #ccc;
-  text-shadow: 0 1px #777;
+  text-shadow: 0 1px #222;
   color: #fff;
   font: -moz-list;
 }
 
+.scope > .title > .arrow {
+  margin-top: -2px;
+}
+
 .scope > .title > .name {
   padding-top: 2px;
-  padding-bottom: 2px;
 }
 
 .scope > .details {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
 
 /**
  * Variable element
  */
 
 .variable {
   -moz-margin-start: 1px;
   -moz-margin-end: 1px;
   margin-top: 2px;
-  border-bottom: 1px dotted #aaa;
+  border-bottom: 1px dotted #ccc;
   border-radius: 8px;
   -moz-transition: background 1s ease-in-out;
   background: #fff;
 }
 
 .variable[changed] {
   -moz-transition-duration: 0.4s;
   background: rgba(255, 255, 0, 0.65);
@@ -138,18 +131,23 @@
 .property > .title > .arrow {
   margin-top: -2px;
 }
 
 .property > .title > .key {
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {
   -moz-padding-start: 6px;
   color: #bbb;
 }
 
 .token-null {