Bug 761174 - Always show a property tooltip; r=past

browser/devtools/debugger/debugger-view.js

@@ -977,6 +977,9 @@ PropertiesView.prototype = {
       let valueLabel = document.createElement("label");
       let title = element.getElementsByClassName("title")[0];
 
+      // Use attribute flags to specify the element type and tooltip text.
+      this._setAttributes(element, aName, aFlags);
+
       // Separator between the variable name and its value.
       separatorLabel.className = "plain";
       separatorLabel.setAttribute("value", ":");
@@ -984,21 +987,6 @@ PropertiesView.prototype = {
       // The variable information (type, class and/or value).
       valueLabel.className = "value plain";
 
-      if (aFlags) {
-        // Use attribute flags to specify the element type and tooltip text.
-        let tooltip = [];
-
-        !aFlags.configurable ? element.setAttribute("non-configurable", "")
-                             : tooltip.push("configurable");
-        !aFlags.enumerable   ? element.setAttribute("non-enumerable", "")
-                             : tooltip.push("enumerable");
-        !aFlags.writable     ? element.setAttribute("non-writable", "")
-                             : tooltip.push("writable");
-
-        element.setAttribute("tooltiptext", tooltip.join(", "));
-      }
-      if (aName === "this") { element.setAttribute("self", ""); }
-
       // Handle the click event when pressing the element value label.
       valueLabel.addEventListener("click", this._activateElementInputMode.bind({
         scope: this,
@@ -1029,6 +1017,36 @@ PropertiesView.prototype = {
     return element;
   },
 
+  /**
+   * Sets a variable's configurable, enumerable or writable attributes.
+   *
+   * @param object aVar
+   *        The object to set the attributes on.
+   * @param object aName
+   *        The varialbe name.
+   * @param object aFlags
+   *        Contains configurable, enumerable or writable flags.
+   */
+  _setAttributes: function DVP_setAttributes(aVar, aName, aFlags) {
+    if (aFlags) {
+      if (!aFlags.configurable) {
+        aVar.setAttribute("non-configurable", "");
+      }
+      if (!aFlags.enumerable) {
+        aVar.setAttribute("non-enumerable", "");
+      }
+      if (!aFlags.writable) {
+        aVar.setAttribute("non-writable", "");
+      }
+    }
+    if (aName === "this") {
+      aVar.setAttribute("self", "");
+    }
+    if (aName === "__proto__ ") {
+      aVar.setAttribute("proto", "");
+    }
+  },
+
   /**
    * Sets the specific grip for a variable.
    * The grip should contain the value or the type & class, as defined in the
@@ -1209,6 +1227,9 @@ PropertiesView.prototype = {
       let separatorLabel = document.createElement("label");
       let valueLabel = document.createElement("label");
 
+      // Use attribute flags to specify the element type and tooltip text.
+      this._setAttributes(element, pKey, aFlags);
+
       if ("undefined" !== typeof pKey) {
         // Use a key element to specify the property name.
         nameLabel.className = "key plain";
@@ -1228,21 +1249,6 @@ PropertiesView.prototype = {
         title.appendChild(valueLabel);
       }
 
-      if (aFlags) {
-        // Use attribute flags to specify the element type and tooltip text.
-        let tooltip = [];
-
-        !aFlags.configurable ? element.setAttribute("non-configurable", "")
-                             : tooltip.push("configurable");
-        !aFlags.enumerable   ? element.setAttribute("non-enumerable", "")
-                             : tooltip.push("enumerable");
-        !aFlags.writable     ? element.setAttribute("non-writable", "")
-                             : tooltip.push("writable");
-
-        element.setAttribute("tooltiptext", tooltip.join(", "));
-      }
-      if (pKey === "__proto__ ") { element.setAttribute("proto", ""); }
-
       // Handle the click event when pressing the element value label.
       valueLabel.addEventListener("click", this._activateElementInputMode.bind({
         scope: this,
@@ -1498,6 +1504,7 @@ PropertiesView.prototype = {
     } else {
       arrow.addEventListener("click", function() { element.toggle(); }, false);
       name.addEventListener("click", function() { element.toggle(); }, false);
+      name.addEventListener("mouseover", function() { element.updateTooltip(name); }, false);
     }
 
     title.appendChild(arrow);
@@ -1728,6 +1735,52 @@ PropertiesView.prototype = {
       }
     });
 
+    /**
+     * Creates a tooltip for the element displaying certain attributes.
+     *
+     * @param object aAnchor
+     *        The element which will anchor the tooltip.
+     */
+    element.updateTooltip = function DVP_element_updateTooltip(aAnchor) {
+      let tooltip = document.getElementById("element-tooltip");
+      if (tooltip) {
+        document.documentElement.removeChild(tooltip);
+      }
+
+      tooltip = document.createElement("tooltip");
+      tooltip.id = "element-tooltip";
+
+      let configurableLabel = document.createElement("label");
+      configurableLabel.id = "configurableLabel";
+      configurableLabel.setAttribute("value", "configurable");
+
+      let enumerableLabel = document.createElement("label");
+      enumerableLabel.id = "enumerableLabel";
+      enumerableLabel.setAttribute("value", "enumerable");
+
+      let writableLabel = document.createElement("label");
+      writableLabel.id = "writableLabel";
+      writableLabel.setAttribute("value", "writable");
+
+      tooltip.setAttribute("orient", "horizontal")
+      tooltip.appendChild(configurableLabel);
+      tooltip.appendChild(enumerableLabel);
+      tooltip.appendChild(writableLabel);
+
+      if (element.hasAttribute("non-configurable")) {
+        configurableLabel.setAttribute("non-configurable", "");
+      }
+      if (element.hasAttribute("non-enumerable")) {
+        enumerableLabel.setAttribute("non-enumerable", "");
+      }
+      if (element.hasAttribute("non-writable")) {
+        writableLabel.setAttribute("non-writable", "");
+      }
+
+      document.documentElement.appendChild(tooltip);
+      aAnchor.setAttribute("tooltip", tooltip.id);
+    };
+
     /**
      * Generic function refreshing the internal state of the element when
      * it's modified (e.g. a child detail, variable, property is added).

browser/themes/gnomestripe/devtools/debugger.css

@@ -168,6 +168,16 @@
   opacity: 0.5;
 }
 
+#element-tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+#element-tooltip > label[non-enumerable],
+#element-tooltip > label[non-configurable],
+#element-tooltip > label[non-writable]{
+  text-decoration: line-through;
+}
+
 /**
  * Property values colors
  */

browser/themes/pinstripe/devtools/debugger.css

@@ -170,6 +170,16 @@
   opacity: 0.5;
 }
 
+#element-tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+#element-tooltip > label[non-enumerable],
+#element-tooltip > label[non-configurable],
+#element-tooltip > label[non-writable]{
+  text-decoration: line-through;
+}
+
 /**
  * Property values colors
  */

browser/themes/winstripe/devtools/debugger.css

@@ -168,6 +168,16 @@
   opacity: 0.5;
 }
 
+#element-tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+#element-tooltip > label[non-enumerable],
+#element-tooltip > label[non-configurable],
+#element-tooltip > label[non-writable]{
+  text-decoration: line-through;
+}
+
 /**
  * Property values colors
  */