Created attachment 115949 [details] Polishing pixels * Accent suggested suffix, not a prefix entered by user * Use Highlight and HighlightText system colors (http://www.w3.org/TR/CSS2/ui.html#system-colors) to looks native on different platforms. Chromium's suggest seems to use the same colors. Does it look better?
Created attachment 115950 [details] Polishing pixels
Comment on attachment 115950 [details] Polishing pixels View in context: https://bugs.webkit.org/attachment.cgi?id=115950&action=review > Source/WebCore/inspector/front-end/textPrompt.css:63 > + color: HighlightText; > + background-color: Highlight; We don't tend to use system named colors in the Inspector. But I see the appeal here to match the selection color. > Source/WebCore/inspector/front-end/textPrompt.css:67 > + opacity: 0.5; It is better to use a color instead of opacity. Opacity and subpixel text antialiasing don't mix. But using HighlightText prevents that.
Comment on attachment 115950 [details] Polishing pixels View in context: https://bugs.webkit.org/attachment.cgi?id=115950&action=review >> Source/WebCore/inspector/front-end/textPrompt.css:67 >> + opacity: 0.5; > > It is better to use a color instead of opacity. Opacity and subpixel text antialiasing don't mix. But using HighlightText prevents that. I see the problem with antialiasing but unfortunately it's the only way to "blend" Highlight and HighlightText colors.
Comment on attachment 115950 [details] Polishing pixels Two reasons I don't like it for: 1) We never use system colors in the front-end: we should either migrate sidebars and DOM view to them first or hardcode selection color here as well 2) This new look will conflict with your other suggestion at https://bugs.webkit.org/show_bug.cgi?id=72798 that we agreed upon. Prefix and suggested suffix should be rendered consistently in text prompt and suggest box.
To clarify: I think _prefix_ should be rendered using exactly the same style in text prompt and suggest box. Having completion rendered differently (ala Google search field) seems reasonable.
(In reply to comment #4) > (From update of attachment 115950 [details]) > Two reasons I don't like it for: > 1) We never use system colors in the front-end: we should either migrate sidebars and DOM view to them first or hardcode selection color here as well Can you expand on this? On Mac OS X Highlight color doesn't look good for selected node. http://elv1s.ru/i/webinspector-dom-selection-highlight-color.png Mac OS X native apps don't use the same color for selected menu item (see http://images.apple.com/mac/includes/builtin/images/mail_overview.png). Alas, there is no system color for menu selected item. > 2) This new look will conflict with your other suggestion at https://bugs.webkit.org/show_bug.cgi?id=72798 that we agreed upon. Prefix and suggested suffix should be rendered consistently in text prompt and suggest box. By "consistently" you mean using exactly the same color? http://elv1s.ru/i/webinspector-suggest-gray-colors.png If so, I don't like it. The most significant part of the suggest's pop-over is suffix, not the prefix. Prefix is the same for all items. Why should we make the prefix more contrast then?
(In reply to comment #5) > To clarify: I think _prefix_ should be rendered using exactly the same style in text prompt and suggest box. Having completion rendered differently (ala Google search field) seems reasonable. Like this http://elv1s.ru/i/webinspector-suggest-bold.png ? It looks to "weight" for me. Google's suggest uses larger non-monospace font that doesn't look that weight.
> Can you expand on this? On Mac OS X Highlight color doesn't look good for selected node. http://elv1s.ru/i/webinspector-dom-selection-highlight-color.png > Mac OS X native apps don't use the same color for selected menu item (see http://images.apple.com/mac/includes/builtin/images/mail_overview.png). Alas, there is no system color for menu selected item. I want selection to look consistent across the UI elements. Using Highlight is likely to create inconsistent UI on say GTK or themed Windows. So my suggestion is to either 1) use system colors everywhere or 2) to hardcode the color that is consistent with present UI. You say that (1) is not possible, then we should probably stick to (2). (In reply to comment #7) > Like this http://elv1s.ru/i/webinspector-suggest-bold.png ? > It looks to "weight" for me. Google's suggest uses larger non-monospace font that doesn't look that weight. Ok, I see what you mean. It does add a bit of clutter. Could you play with it and attach 2-3 versions of the UI you find reasonable so that we could choose from them?
(In reply to comment #8) > > Can you expand on this? On Mac OS X Highlight color doesn't look good for selected node. http://elv1s.ru/i/webinspector-dom-selection-highlight-color.png > > Mac OS X native apps don't use the same color for selected menu item (see http://images.apple.com/mac/includes/builtin/images/mail_overview.png). Alas, there is no system color for menu selected item. > > I want selection to look consistent across the UI elements. Using Highlight is likely to create inconsistent UI on say GTK or themed Windows. So my suggestion is to either 1) use system colors everywhere or 2) to hardcode the color that is consistent with present UI. You say that (1) is not possible, then we should probably stick to (2). (2) sounds good to me. Also, it will eliminate the need of opacity and fix antialiasing issue. > (In reply to comment #7) > > Like this http://elv1s.ru/i/webinspector-suggest-bold.png ? > > It looks to "weight" for me. Google's suggest uses larger non-monospace font that doesn't look that weight. > > Ok, I see what you mean. It does add a bit of clutter. Could you play with it and attach 2-3 versions of the UI you find reasonable so that we could choose from them? Sure.
Created attachment 115982 [details] Mockup. Second try. I've rethought the style. We shouldn't use selection text color for a current suggest item. These things are different. I think we could pick one set of colors and use it for all platform. It doesn't have to match to text selection. It does have to look nice and be less contrast than text selection.
Created attachment 115983 [details] Second try
> I've rethought the style. We shouldn't use selection text color for a current suggest item. These things are different. I think we could pick one set of colors and use it for all platform. It doesn't have to match to text selection. It does have to look nice and be less contrast than text selection. I don't really like these. It seems that you are introducing too many different text styles within single control. I don't see how it is better than the existing version. The one we currently have looks sharp and clear.
Comment on attachment 115983 [details] Second try r- per my previous comment.
Please open a new bug if you want to improve current UI.