Closed Bug 586980 Opened 15 years ago Closed 15 years ago

The tree of styles in the inspector panel needs to be finalized

Categories

(DevTools :: General, defect)

Product:
DevTools
Component:
General
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jwalker, Assigned: msucan)

References

Details

(Whiteboard: [kd4b6])

What styles should we support, in what order should they go and how are they grouped.
Blocks: 586984
Assignee: nobody → mihai.sucan
The list as it stands right now, cut and paste from csshtmltree.js this.styleGroups = [ new StyleGroupView(this, 'Fonts and Color', [ 'color', 'font-size', 'line-height', 'font-weight', 'font-style', 'text-decoration', 'font-family', ]), new StyleGroupView(this, 'Text', [ 'text-align', 'direction', 'vertical-align', 'white-space', 'text-transform', 'letter-spacing', 'word-spacing', 'column-count', 'column-gap', 'column-width', ]), new StyleGroupView(this, 'Background', [ 'background-color', 'background-image', 'background-repeat', 'background-position', 'background-attachment', ]), new StyleGroupView(this, 'Dimensions', [ 'width', 'height', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'clip', '-moz-box-sizing', ]), new StyleGroupView(this, 'Positioning and Page Flow', [ 'top', 'right', 'bottom', 'left', 'display', 'float', 'clear', 'position', 'visibility', 'overflow', 'z-index', ]), new StyleGroupView(this, 'Borders', [ 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'outline-top-width', 'outline-right-width', 'outline-bottom-width', 'outline-left-width', 'outline-top-color', 'outline-right-color', 'outline-bottom-color', 'outline-left-color', 'outline-top-style', 'outline-right-style', 'outline-bottom-style', 'outline-left-style', '-moz-border-top-radius', '-moz-border-right-radius', '-moz-border-bottom-radius', '-moz-border-left-radius', ]), new StyleGroupView(this, 'Bullets', [ 'list-style-image', 'list-style-position', 'list-style-type', ]), new StyleGroupView(this, 'Effects and Other', [ 'opacity', 'cursor', 'marker-offset', 'user-focus', 'user-select', 'user-modify', 'user-input', ]), ];
From the above list, I am not sure if the marker-offset property is supported by Gecko and/or other browsers. The MDN search results are not more enlightening either. The border-radius properties should actually be: -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft As they are listed in the current Style panel implementation, they are unsupported. The column-related properties should be: -moz-column-width -moz-column-gap -moz-column-count -moz-column-rule -moz-column-rule-color -moz-column-rule-style -moz-column-rule-width These properties are not available without the -moz- prefix. Also, the user-* properties are only supported with the -moz- prefix. Missing properties in the Style panel: Fonts and Color: font-variant font-size-adjust font-stretch Text: quotes text-indent text-rendering text-shadow word-wrap Background: background-clip background-size background-origin Dimensions: max-height max-width min-height min-width resize Positioning and Page Flow: overflow-x overflow-y Borders: border-collapse border-spacing outline-offset -moz-border-image -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright Effects and Other: caption-side content counter-increment counter-reset empty-cells image-rendering pointer-events table-layout -moz-box-shadow -moz-transform -moz-transition This list is based on information available from MDN. Anything else that needs to be added? Or groups need to be changed? Limi: please take a look and provide us with your feedback. Thank you!
Status: NEW → ASSIGNED
We also need to be sure to internationalize those groupings.
Whiteboard: [kd4b5]
Kevin: the code in bug 585569, internationalizes the group names as well.
Just a quick recap of where we are on this. beta 5 is approaching, and with it the strings freeze. This is where we are now (cut and paste from the source, so it will require a minimal amount of interpretation) Are we all OK with this? -- new StyleGroupView(this, "Text, Fonts and Color", [ "color", "direction", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "letter-spacing", "line-height", "quotes", "text-align", "text-decoration", "text-indent", "text-rendering", "text-shadow", "text-transform", "vertical-align", "white-space", "word-spacing", "word-wrap", "-moz-column-count", "-moz-column-gap", "-moz-column-rule-color", "-moz-column-rule-style", "-moz-column-rule-width", "-moz-column-width", ]), new StyleGroupView(this, "Background", [ "background-attachment", "background-clip", "background-color", "background-image", "background-origin", "background-position", "background-repeat", "background-size", ]), new StyleGroupView(this, "Dimensions", [ "width", "height", "max-width", "max-height", "min-width", "min-height", "margin-top", "margin-right", "margin-bottom", "margin-left", "padding-top", "padding-right", "padding-bottom", "padding-left", "clip", "resize", "-moz-box-sizing", ]), new StyleGroupView(this, "Positioning and Page Flow", [ "top", "right", "bottom", "left", "display", "float", "clear", "position", "visibility", "overflow-x", "overflow-y", "z-index", ]), new StyleGroupView(this, "Borders", [ "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "border-collapse", "border-spacing", "outline-top-width", "outline-right-width", "outline-bottom-width", "outline-left-width", "outline-top-color", "outline-right-color", "outline-bottom-color", "outline-left-color", "outline-top-style", "outline-right-style", "outline-bottom-style", "outline-left-style", "outline-offset", "-moz-border-radius-topleft", "-moz-border-radius-topright", "-moz-border-radius-bottomright", "-moz-border-radius-bottomleft", "-moz-outline-radius-topleft", "-moz-outline-radius-topright", "-moz-outline-radius-bottomright", "-moz-outline-radius-bottomleft", ]), new StyleGroupView(this, "Bullets", [ "list-style-image", "list-style-position", "list-style-type", ]), new StyleGroupView(this, "Effects and Other", [ "caption-side", "content", "counter-increment", "counter-reset", "cursor", "empty-cells", "image-rendering", "opacity", "pointer-events", "table-layout", "-moz-box-shadow", "-moz-transform", "-moz-transition", "-moz-user-focus", "-moz-user-input", "-moz-user-modify", "-moz-user-select", ]),
Looks good to me. We might move the groups around a bit (or even the contents) — e.g. have Bullets be after the Text/Fonts/Color group — but as far as the group naming goes, we should be covered. Maybe rename "Bullets" to "Lists" now that I think about it.
Does the current style panel patch reflect this finalized list? Can we close this bug?
Not yet. I'm waiting for dolkse's review to come in and then making all the changes in one go.
Whiteboard: [kd4b5] → [kd4b6]
I have updated the main CssHtmlTree patch to include the changes suggested by Limi: - renamed "Bullets" to "Lists". - moved the "Lists" group to be after the Text/Fonts/Color group. If these are the final changes, then please mark this bug as fixed. Thanks!
Status: ASSIGNED → RESOLVED
Closed: 15 years ago
Resolution: --- → FIXED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.