Bug 11920 – Web Inspector should have Firebug-like CSS editing

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Matt Lilek]

I'm working on implementing live CSS editing from the Web Inspector ala the latest Firebug.  I've got some basic editing working, but it still needs a lot of work so a patch is at least a couple days away.

[Adam Roben (:aroben)]

One part of this is implementing easy disabling of CSS properties, which is bug 14377.

[Charles Gaudette]

This feature request reads as if it is referring to  Firebug's Edit:CSS panel. 

But also note that inside Firebug's Inspect:CSS panel — the same place you can disable properties — it is possible to (temporarily?) insert a new property. You can do this by right-clicking on the CSS rule's name, as in "body {".

[Timothy Hatcher]

Created attachment 17072 [details]
Patch

[Adam Roben (:aroben)]

Comment on attachment 17072 [details]
Patch

+          and makes the code simplier in the inspector. This function was added for the inspector,

Typo: simplier -> simpler

+          Shrink the toggle zone to 10px to better match the size of the arrow. Add and onattach call

Typo: and -> an

+        if (!x && this.onpopulate && this._expanded) {
+            this.onpopulate(this);
+            this._populated = true;
+        }

Is that first check supposed to be "x" instead of "!x"?

+                // Default editable to true if it was omited.

Typo: omited -> omitted

+        if (shorthand && !used) {
+            // Find out if any of the individual longhand properties of the shorthand
+            // are used, if none are then the shorthand is overloaded too.
+            var longhandProperties = this.styleRule.style.getLonghandProperties(property);
+            for (var j = 0; j < longhandProperties.length; ++j) {
+                var individualProperty = longhandProperties[j];
+                if (individualProperty in this.usedProperties)
+                    return false;
+            }
+
+            return true;
+        }
+
+        return !used;

You could reverse the if and turn this into an early return.

+        if (this.expanded)
+            this.collapse();

Is calling collapse() not just a no-op when this.expanded is false? If it is a no-op then there's no need for the if.

+        console.log(userInput + " (" + userInput.length + ")");
+        console.log(parseElement.getAttribute("style") + " (" + parseElement.getAttribute("style").length + ")");
+        console.log(parseElement.style.length);

Did you mean to leave these in?

+            if (this.getPropertyShorthand(individualProperty) !== shorthandProperty || individualProperty in foundProperties)

Assuming that the "in" check is faster than a call to getPropertyShorthand, you should reverse the order of this ||.

r=me!

[Timothy Hatcher]

Landed in r27575. http://trac.webkit.org/projects/webkit/changeset/27575

[Timothy Hatcher]

(In reply to comment #4)
> +        if (!x && this.onpopulate && this._expanded) {
> +            this.onpopulate(this);
> +            this._populated = true;
> +        }
> 
> Is that first check supposed to be "x" instead of "!x"?

It should be !x, since we want to re-populate right away if we are currently expanded.

Addressed the other comments.