Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Issue 5850: Modifying CSS doesn't update element visibility in HTML p…

  • Loading branch information...
commit e4c3e0ef54b1361d0ed1e1bdbf73343cb46835d2 1 parent 8f0a4d5
Simon Lindholm authored September 01, 2012
14  extension/content/firebug/css/cssModule.js
@@ -10,9 +10,10 @@ define([
10 10
     "firebug/chrome/window",
11 11
     "firebug/lib/xml",
12 12
     "firebug/lib/options",
13  
-    "firebug/lib/array"
  13
+    "firebug/lib/array",
  14
+    "firebug/editor/editorSelector"
14 15
 ],
15  
-function(Obj, Firebug, Xpcom, Events, Url, Css, Win, Xml, Options, Arr) {
  16
+function(Obj, Firebug, Xpcom, Events, Url, Css, Win, Xml, Options, Arr, EditorSelector) {
16 17
 
17 18
 // ********************************************************************************************* //
18 19
 // Constants
@@ -89,9 +90,10 @@ Firebug.CSSModule = Obj.extend(Firebug.Module, Firebug.EditorSelector,
89 90
 
90 91
     deleteRule: function(src, ruleIndex)
91 92
     {
  93
+        var inlineStyle = (src instanceof window.Element);
92 94
         if (FBTrace.DBG_CSS)
93 95
         {
94  
-            if (src instanceof window.Element)
  96
+            if (inlineStyle)
95 97
             {
96 98
                 FBTrace.sysout("deleteRule: element.style", src);
97 99
             }
@@ -102,12 +104,18 @@ Firebug.CSSModule = Obj.extend(Firebug.Module, Firebug.EditorSelector,
102 104
             }
103 105
         }
104 106
 
  107
+        var rule = (inlineStyle ? src : src.cssRules[ruleIndex]);
  108
+        var afterParams = [src, rule.style.cssText];
  109
+        afterParams.push(inlineStyle ? "" : rule.selectorText);
  110
+
105 111
         Events.dispatch(this.fbListeners, "onCSSDeleteRule", [src, ruleIndex]);
106 112
 
107 113
         if (src instanceof window.Element)
108 114
             src.removeAttribute("style");
109 115
         else
110 116
             src.deleteRule(ruleIndex);
  117
+
  118
+        Events.dispatch(this.fbListeners, "onAfterCSSDeleteRule", afterParams);
111 119
     },
112 120
 
113 121
     setProperty: function(rule, propName, propValue, propPriority)
73  extension/content/firebug/html/htmlPanel.js
@@ -20,6 +20,7 @@ define([
20 20
     "firebug/lib/persist",
21 21
     "firebug/chrome/menu",
22 22
     "firebug/lib/url",
  23
+    "firebug/css/cssModule",
23 24
     "firebug/css/cssReps",
24 25
     "firebug/js/breakpoint",
25 26
     "firebug/editor/editor",
@@ -30,7 +31,7 @@ define([
30 31
 ],
31 32
 function(Obj, Firebug, Domplate, FirebugReps, Locale, HTMLLib, Events,
32 33
     SourceLink, Css, Dom, Win, Options, Xpath, Str, Xml, Arr, Persist, Menu,
33  
-    Url, CSSInfoTip) {
  34
+    Url, CSSModule, CSSInfoTip) {
34 35
 
35 36
 with (Domplate) {
36 37
 
@@ -1182,6 +1183,74 @@ Firebug.HTMLPanel.prototype = Obj.extend(WalkingPanel,
1182 1183
     },
1183 1184
 
1184 1185
     // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
  1186
+    // CSS Listener
  1187
+
  1188
+    updateVisibilitiesForSelectorInSheet: function(sheet, selector)
  1189
+    {
  1190
+        if (!selector)
  1191
+            return;
  1192
+        var doc = (sheet && sheet.ownerNode && sheet.ownerNode.ownerDocument);
  1193
+        if (!doc)
  1194
+            return;
  1195
+
  1196
+        var affected = doc.querySelectorAll(selector);
  1197
+        if (!affected.length || !this.ioBox.isInExistingRoot(affected[0]))
  1198
+            return;
  1199
+
  1200
+        for (var i = 0; i < affected.length; ++i)
  1201
+        {
  1202
+            var node = this.ioBox.findObjectBox(affected[i]);
  1203
+            if (node)
  1204
+                this.updateNodeVisibility(node);
  1205
+        }
  1206
+    },
  1207
+
  1208
+    updateVisibilitiesForRule: function(rule)
  1209
+    {
  1210
+        this.updateVisibilitiesForSelectorInSheet(rule.parentStyleSheet, rule.selectorText);
  1211
+    },
  1212
+
  1213
+    cssPropAffectsVisibility: function(propName)
  1214
+    {
  1215
+        // Pretend that "display" is the only property which affects visibility,
  1216
+        // which is a half-truth. We could make this more technically correct
  1217
+        // by unconditionally returning true, but forcing a synchronous reflow
  1218
+        // and computing offsetWidth/Height on up to every element on the page
  1219
+        // isn't worth it.
  1220
+        return (propName === "display");
  1221
+    },
  1222
+
  1223
+    cssTextAffectsVisibility: function(cssText)
  1224
+    {
  1225
+        return (cssText.indexOf("display:") !== -1);
  1226
+    },
  1227
+
  1228
+    onAfterCSSDeleteRule: function(styleSheet, cssText, selector)
  1229
+    {
  1230
+        if (this.cssTextAffectsVisibility(cssText))
  1231
+            this.updateVisibilitiesForSelectorInSheet(styleSheet, selector);
  1232
+    },
  1233
+
  1234
+    onCSSInsertRule: function(styleSheet, cssText, ruleIndex)
  1235
+    {
  1236
+        if (this.cssTextAffectsVisibility(cssText))
  1237
+            this.updateVisibilitiesForRule(styleSheet.cssRules[ruleIndex]);
  1238
+    },
  1239
+
  1240
+    onCSSSetProperty: function(style, propName, propValue, propPriority, prevValue,
  1241
+        prevPriority, rule, baseText)
  1242
+    {
  1243
+        if (this.cssPropAffectsVisibility(propName))
  1244
+            this.updateVisibilitiesForRule(rule);
  1245
+    },
  1246
+
  1247
+    onCSSRemoveProperty: function(style, propName, prevValue, prevPriority, rule, baseText)
  1248
+    {
  1249
+        if (this.cssPropAffectsVisibility(propName))
  1250
+            this.updateVisibilitiesForRule(rule);
  1251
+    },
  1252
+
  1253
+    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
1185 1254
     // extends Panel
1186 1255
 
1187 1256
     name: "html",
@@ -1202,6 +1271,7 @@ Firebug.HTMLPanel.prototype = Obj.extend(WalkingPanel,
1202 1271
         this.onKeyPress = Obj.bind(this.onKeyPress, this);
1203 1272
 
1204 1273
         Firebug.Panel.initialize.apply(this, arguments);
  1274
+        Firebug.CSSModule.addListener(this);
1205 1275
     },
1206 1276
 
1207 1277
     destroy: function(state)
@@ -1220,6 +1290,7 @@ Firebug.HTMLPanel.prototype = Obj.extend(WalkingPanel,
1220 1290
             delete this.inspectorHistory[i];
1221 1291
         delete this.inspectorHistory;
1222 1292
 
  1293
+        Firebug.CSSModule.removeListener(this);
1223 1294
         this.unregisterMutationListeners();
1224 1295
     },
1225 1296
 

0 notes on commit e4c3e0e

Please sign in to comment.
Something went wrong with that request. Please try again.