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); }
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.)