Bug 14932 – Display Elements Attributes in Styles pane

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

[Sascha]

In the actual builds each element attributes are shown in the Styles pane as separated block.
I would prefer to see all attributes as a single block, like the inline style displayed as "Elements 'style' Attribute".
For this i have patched the Webinspector File: "ResourcePanels.js" with following code.
It*s a quick and dirty hack i think you make this better.

File: ResourcePanels.js
Function: updateStyles
Start Line: 588

            var styleNodeName = styleNode.nodeName.toLowerCase();
		var ss_attrName = "";
		var ss_hasAttrStyles = false;
            for (var i = 0; i < styleNode.attributes.length; ++i) {
            	var attr = styleNode.attributes[i];
            	if (attr.style) {
				if (!ss_hasAttrStyles) {
					var ss_attrStyles = attr.style;
					ss_hasAttrStyles = true;
				} else {
					ss_attrStyles.setProperty(attr.style[0], attr.style.getPropertyValue(attr.style[0]), attr.style.getPropertyPriority(attr.style[0]) ); 
				}
            	}
            }
		if (ss_hasAttrStyles) {
            	var attrStyle = {style: ss_attrStyles };
     		      attrStyle.subtitle = "Elements Attributes";
     	      	attrStyle.selectorText = styleNodeName + "\u2019s attributes";
                  styleRules.push(attrStyle);
		}

[Timothy Hatcher]

We show the mapped style attributes separately to better show where they originated. Grouping them together would make it somewhat ambiguous what attribute caused what styles to be applied, since they can map to more than one style property. (The contenteditable attribute is a good example.)