To implement this header, we'll want to: - standardize on a class for the icon, the containing header, and the text (we'll want to reuse the styling in dialogs not using commonDialog) - make sure the text never overlaps the icon - make sure the text never wraps - make the text start-aligned in a container, but make that container end-aligned within another container in the header (such that if the text is too long, the start of the text is hidden/clipped behind the icon - see https://url.spec.whatwg.org/#url-rendering-elision for reasoning; exact styling is TBD but a cut-off is fine for this bug) - pass the icon as an argument to commondialog's API, and render it at 16x16 css pixels, with a 4px gap to the text - Use standard message box font sizes (11/12px) for the text, and make sure the icon is vertically aligned to the middle of the text box - ensure CSS/SVG fill context can be used to use the text foreground colour of the container for the foreground colour of the (SVG) icon.
Bug 1693008 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
To implement this header, we'll want to: - standardize on a class for the icon, the containing header, and the text (we'll want to reuse the styling in dialogs not using commonDialog) - make sure the text never overlaps the icon - make sure the text never wraps - make the text start-aligned in a container, but make that container end-aligned within another container in the header (such that if the text is too long, the start of the text is hidden/clipped behind the icon - see https://url.spec.whatwg.org/#url-rendering-elision ). Use a 100px wide 0-1 opacity overlay / filter after the icon to "fade out" the header text at the start, and duplicate the full text into a tooltip. - pass the icon as an argument to commondialog's API, and render it at 16x16 css pixels, with a 4px gap to the text - Use standard message box font sizes (11/12px) for the text, and make sure the icon is vertically aligned to the middle of the text box - ensure CSS/SVG fill context can be used to use the text foreground colour of the container for the foreground colour of the (SVG) icon.