merge m-c to fx-team

browser/base/content/browser.css

@@ -584,7 +584,7 @@ stack[anonid=browserStack][responsivemode] {
 }
 
 stack[anonid=browserStack][responsivemode] {
-  -moz-transition-properties: min-width, max-width, min-height, max-height;
+  -moz-transition-property: min-width, max-width, min-height, max-height;
 }
 
 stack[anonid=browserStack][responsivemode][notransition] {

browser/base/content/browser.js

@@ -1400,7 +1400,7 @@ var gBrowserInit = {
 
       // Show the toolbar if it was previously visible
       if (gPrefService.getBoolPref("devtools.toolbar.visible")) {
-        this.DeveloperToolbar.show();
+        DeveloperToolbar.show();
       }
     }
 

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/devtools/layoutview/LayoutView.jsm

@@ -294,7 +294,12 @@ LayoutView.prototype = {
     let clientRect = node.getBoundingClientRect();
     let width = Math.round(clientRect.width);
     let height = Math.round(clientRect.height);
-    this.doc.querySelector("#element-size").textContent =  width + "x" + height;
+
+    let elt = this.doc.querySelector("#element-size");
+    let newLabel = width + "x" + height;
+    if (elt.textContent != newLabel) {
+      elt.textContent = newLabel;
+    }
 
     // If the view is closed, no need to do anything more.
     if (!this.isOpen) return;

browser/devtools/responsivedesign/responsivedesign.jsm

@@ -28,10 +28,10 @@ let ResponsiveUIManager = {
    * @param aTab the tab targeted.
    */
   toggle: function(aWindow, aTab) {
-    if (aTab.responsiveUI) {
-      aTab.responsiveUI.close();
+    if (aTab.__responsiveUI) {
+      aTab.__responsiveUI.close();
     } else {
-      aTab.responsiveUI = new ResponsiveUI(aWindow, aTab);
+      aTab.__responsiveUI = new ResponsiveUI(aWindow, aTab);
     }
   },
 }
@@ -169,7 +169,7 @@ ResponsiveUI.prototype = {
     this.container.removeAttribute("responsivemode");
     this.stack.removeAttribute("responsivemode");
 
-    delete this.tab.responsiveUI;
+    delete this.tab.__responsiveUI;
   },
 
   /**

browser/devtools/responsivedesign/test/browser_responsivecomputedview.js

@@ -42,7 +42,7 @@ function test() {
   }
 
   function onUIOpen() {
-    instance = gBrowser.selectedTab.responsiveUI;
+    instance = gBrowser.selectedTab.__responsiveUI;
     ok(instance, "instance of the module is attached to the tab.");
 
     instance.stack.setAttribute("notransition", "true");

browser/devtools/responsivedesign/test/browser_responsiveruleview.js

@@ -37,7 +37,7 @@ function test() {
   }
 
   function onUIOpen() {
-    instance = gBrowser.selectedTab.responsiveUI;
+    instance = gBrowser.selectedTab.__responsiveUI;
     ok(instance, "instance of the module is attached to the tab.");
 
     instance.stack.setAttribute("notransition", "true");

browser/devtools/responsivedesign/test/browser_responsiveui.js

@@ -28,7 +28,7 @@ function test() {
     // Menus are correctly updated?
     is(document.getElementById("Tools:ResponsiveUI").getAttribute("checked"), "true", "menus checked");
 
-    instance = gBrowser.selectedTab.responsiveUI;
+    instance = gBrowser.selectedTab.__responsiveUI;
     ok(instance, "instance of the module is attached to the tab.");
 
     instance.transitionsEnabled = false;

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
  */