Bug 752834 - UI tweaks for the property view; r=past

browser/devtools/debugger/debugger-view.js

@@ -813,6 +813,12 @@ PropertiesView.prototype = {
      */
     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;
   },
@@ -1035,12 +1041,12 @@ PropertiesView.prototype = {
 
         // 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);
         }
       }
     }
@@ -1054,7 +1060,7 @@ PropertiesView.prototype = {
    *
    * @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).
@@ -1064,6 +1070,8 @@ PropertiesView.prototype = {
    *             ["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
@@ -1071,7 +1079,7 @@ PropertiesView.prototype = {
    * @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;
@@ -1109,7 +1117,15 @@ PropertiesView.prototype = {
 
       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);
       }

browser/themes/gnomestripe/devtools/debugger.css

@@ -52,7 +52,7 @@
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
@@ -60,7 +60,7 @@
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
@@ -73,24 +73,17 @@
  */
 
 .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 {
@@ -106,7 +99,7 @@
   -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;
@@ -143,8 +136,13 @@
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {

browser/themes/pinstripe/devtools/debugger.css

@@ -54,7 +54,7 @@
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
@@ -62,7 +62,7 @@
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
@@ -75,23 +75,17 @@
  */
 
 .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 {
@@ -107,7 +101,7 @@
   -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;
@@ -144,8 +138,13 @@
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {

browser/themes/winstripe/devtools/debugger.css

@@ -52,7 +52,7 @@
 }
 
 /**
- * Properties elements
+ * Properties view
  */
 
 #variables {
@@ -60,7 +60,7 @@
 }
 
 /**
- * Generic element details container
+ * Property element details container
  */
 
 .details {
@@ -73,24 +73,17 @@
  */
 
 .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 {
@@ -106,7 +99,7 @@
   -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;
@@ -143,8 +136,13 @@
   color: #881090;
 }
 
+.property > .title > .non-enumerable.key,
+.property > .title > .proto.key {
+  color: #c48bc8;
+}
+
 /**
- * Property colors
+ * Property values colors
  */
 
 .token-undefined {