Bug 696181 - Properties disabled in the css rule view should not be lost. r=robcee

browser/devtools/highlighter/inspector.jsm

@@ -1352,7 +1352,16 @@ InspectorUI.prototype = {
     let boundLoadListener = function() {
       iframe.removeEventListener("load", boundLoadListener, true);
       let doc = iframe.contentDocument;
-      this.ruleView = new CssRuleView(doc);
+
+      let winID = this.winID;
+      let ruleViewStore = this.store.getValue(winID, "ruleView");
+      if (!ruleViewStore) {
+        ruleViewStore = {};
+        this.store.setValue(winID, "ruleView", ruleViewStore);
+      }
+
+      this.ruleView = new CssRuleView(doc, ruleViewStore);
+
       this.boundRuleViewChanged = this.ruleViewChanged.bind(this);
       this.ruleView.element.addEventListener("CssRuleViewChanged",
                                              this.boundRuleViewChanged);

browser/devtools/highlighter/test/Makefile.in

@@ -67,6 +67,7 @@ _BROWSER_FILES = \
 		browser_inspector_breadcrumbs.js \
 		browser_inspector_bug_699308_iframe_navigation.js \
         browser_inspector_changes.js \
+        browser_inspector_ruleviewstore.js \
 		$(NULL)
 
 # Disabled due to constant failures

browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js

@@ -0,0 +1,152 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Inspector Tab Switch Tests.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Rob Campbell <rcampbell@mozilla.com>
+ *   Mihai Șucan <mihai.sucan@gmail.com>
+ *   Dave Camp <dcamp@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/**
+ * Tests that properties disabled in the rule view survive a tab switch.
+ */
+
+let div;
+let tab1;
+
+function waitForRuleView(aCallback)
+{
+  if (InspectorUI.ruleView) {
+    aCallback();
+    return;
+  }
+
+  let ruleViewFrame = InspectorUI.getToolIframe(InspectorUI.ruleViewObject);
+  ruleViewFrame.addEventListener("load", function(evt) {
+    ruleViewFrame.removeEventListener(evt.type, arguments.callee, true);
+    executeSoon(function() {
+      aCallback();
+    });
+  }, true);
+}
+
+function inspectorTabOpen1()
+{
+  Services.obs.addObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen1()
+{
+  Services.obs.removeObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Highlight a node.
+  div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+
+  // Open the rule view sidebar.
+  waitForRuleView(ruleViewOpened1);
+
+  InspectorUI.showSidebar();
+  InspectorUI.ruleButton.click();
+}
+
+function ruleViewOpened1()
+{
+  let prop = InspectorUI.ruleView._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  prop.setEnabled(false);
+
+  // Open second tab and switch to it
+  tab2 = gBrowser.addTab();
+  gBrowser.selectedTab = tab2;
+
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+                                                 true);
+    waitForFocus(inspectorTabOpen2, content);
+  }, true);
+  content.location = "data:text/html,<p>tab 2: the inspector should close now";
+}
+
+function inspectorTabOpen2()
+{
+  // Switch back to tab 1.
+  executeSoon(function() {
+    Services.obs.addObserver(inspectorFocusTab1,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    gBrowser.removeCurrentTab();
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorFocusTab1()
+{
+  Services.obs.removeObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Now wait for the rule view to load again...
+  waitForRuleView(ruleViewOpened2);
+}
+
+function ruleViewOpened2()
+{
+  let prop = InspectorUI.ruleView._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  ok(!prop.enabled, "First prop should be disabled.");
+
+  gBrowser.removeCurrentTab();
+  InspectorUI.closeInspectorUI();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+
+  tab1 = gBrowser.addTab();
+  gBrowser.selectedTab = tab1;
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen1, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab switching tests for inspector" +
+    '<div style="background-color: green;">tab 1</div>';
+}
+

browser/devtools/styleinspector/CssRuleView.jsm

@@ -89,11 +89,25 @@ var EXPORTED_SYMBOLS = ["CssRuleView",
 /**
  * ElementStyle maintains a list of Rule objects for a given element.
  *
+ * @param Element aElement
+ *        The element whose style we are viewing.
+ * @param object aStore
+ *        The ElementStyle can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
+ *
  * @constructor
  */
-function ElementStyle(aElement)
+function ElementStyle(aElement, aStore)
 {
   this.element = aElement;
+  this.store = aStore || {};
+  if (this.store.disabled) {
+    this.store.disabled = aStore.disabled;
+  } else {
+    this.store.disabled = WeakMap();
+  }
+
   let doc = aElement.ownerDocument;
 
   // To figure out how shorthand properties are interpreted by the
@@ -383,12 +397,20 @@ Rule.prototype = {
 
   /**
    * Reapply all the properties in this rule, and update their
-   * computed styles.  Will re-mark overridden properties.
+   * computed styles.  Store disabled properties in the element
+   * style's store.  Will re-mark overridden properties.
    */
   applyProperties: function Rule_applyProperties()
   {
+    let disabledProps = [];
+
     for each (let prop in this.textProps) {
       if (!prop.enabled) {
+        disabledProps.push({
+          name: prop.name,
+          value: prop.value,
+          priority: prop.priority
+        });
         continue;
       }
 
@@ -401,6 +423,10 @@ Rule.prototype = {
     }
     this.elementStyle._changed();
 
+    // Store disabled properties in the disabled store.
+    let disabled = this.elementStyle.store.disabled;
+    disabled.set(this.style, disabledProps);
+
     this.elementStyle.markOverridden();
   },
 
@@ -489,6 +515,19 @@ Rule.prototype = {
       let prop = new TextProperty(this, name, matches[2], matches[3] || "");
       this.textProps.push(prop);
     }
+
+    // Include properties from the disabled property store, if any.
+    let disabledProps = this.elementStyle.store.disabled.get(this.style);
+    if (!disabledProps) {
+      return;
+    }
+
+    for each (let prop in disabledProps) {
+      let textProp = new TextProperty(this, prop.name,
+                                      prop.value, prop.priority);
+      textProp.enabled = false;
+      this.textProps.push(textProp);
+    }
   },
 }
 
@@ -605,15 +644,24 @@ TextProperty.prototype = {
  *
  * @param Document aDocument
  *        The document that will contain the rule view.
+ * @param object aStore
+ *        The CSS rule view can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
  * @constructor
  */
-function CssRuleView(aDoc)
+function CssRuleView(aDoc, aStore)
 {
   this.doc = aDoc;
+  this.store = aStore;
 
   this.element = this.doc.createElementNS(HTML_NS, "div");
   this.element.setAttribute("tabindex", "0");
   this.element.classList.add("ruleview");
+
+  // Give a relative position for the inplace editor's measurement
+  // span to be placed absolutely against.
+  this.element.style.position = "relative";
 }
 
 CssRuleView.prototype = {
@@ -643,7 +691,7 @@ CssRuleView.prototype = {
       delete this._elementStyle.onChanged;
     }
 
-    this._elementStyle = new ElementStyle(aElement);
+    this._elementStyle = new ElementStyle(aElement, this.store);
     this._elementStyle.onChanged = function() {
       this._changed();
     }.bind(this);