1107088 - Implement search-engine discovery notification. Part 2: Add some UI

Status: NEW

(SeaMonkey :: Search, defect)

Description

[Philip Chee]

+++ This bug was initially created as a clone of Bug #1019383 +++

> In the old days, Firefox used to have a visual notification on the 
> .searchbar-engine-button that Open Search engines were available to 
> install.  It would make the search-engine-button glow aqua blue.  (Not 
> sure if this was ever in SeaMonkey?)

https://groups.google.com/forum/#!original/mozilla.dev.apps.seamonkey/RyzSclK8i9Q/dZgEzjZtQlkJ

> The UI in Firefox 2.0 for this was pretty nice, and very easy to code up. 
>  It's just an aqua blue glow around the search-engine-button:
> 
> http://upload.wikimedia.org/wikipedia/commons/5/58/Wikipedia_Main_Page_in_Firefox_2.0.0.12.png
> 
> This is just a fast and dirty simulation of that:
> 
> .searchbar-engine-button[addengines] {
> box-shadow: inset 0px 0px 8px rgba(20,150,200,.6)!important;
> border-right: 1px solid rgba(0,0,0,.4)!important;

Comment 1

[Shubham Jindal [:shubham]]

Attachment: bug1107088.diff

We have to see which color will suit the best. Aqua Blue is looking a bit weird.

Comment 2

[Philip Chee]

Comment on attachment 8533835 [details] [diff] [review]
bug1107088.diff

> We have to see which color will suit the best. Aqua Blue is looking a bit
> weird.
Right so first thing to do is to go through ui-review:

Neil is the Themes module owner so ui-r? is set to Neil.
(Final approval will still have to go to Neil)
I'm also setting feedback? to Patrick as it was his suggestion for CSS.

(This bug will probably see a lot of bike-shedding)

Comment 3

[patrickjdempsey]

The aqua blue glow is just what Firefox 2.0 did years ago.  I agree it does look weird in SeaMonkey.  Over the years I've used different methods for this in different themes. I can draw up some mockups if you all want. Also, any method that adds a line like this will have to include code to move it to the other side of the box for RTL support.

Comment 4

[Shubham Jindal [:shubham]]

>   I can draw up some mockups if you all want

Yes.

Comment 5

[Tim Nguyen :ntim]

We could use the green "+" icon here : http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/search/badge-add-engine.png

Comment 6

[patrickjdempsey]

Attachment: Mockups for searchbar notifications.

Here are a few mockups all against the default theme in Windows 7 Aero.  For OSX we have to remember that anything involving shading the button will be kind of weird.

Comment 7

[patrickjdempsey]

Note about the Netscape-style indicators: in the Netscape design language the asterisk in the shiny bubble means "create new thing" and is seen on the New Tab button, and extensively in Mail and Addressbook buttons.  The blue plus sign is seen in the Message window meaning "add" as in "add to existing thing" as seen on the Add Recipient and Add Attachment button.  The difference is subtle, but I think worth noting. If we want to go that route I can work on those graphics and clean them up a bit.

Comment 8

[Philip Chee]

(In reply to Tim Nguyen [:ntim] from comment #5)
> We could use the green "+" icon here :
> http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/search/
> badge-add-engine.png
This is from the Firefox version of this bug (Bug 1106432) isn't it?

Comment 9

[Philip Chee]

Comment on attachment 8539398 [details]
Mockups for searchbar notifications.

(In reply to patrickjdempsey from comment #7)
> Note about the Netscape-style indicators: in the Netscape design language
> the asterisk in the shiny bubble means "create new thing" and is seen on the
> New Tab button, and extensively in Mail and Addressbook buttons.  The blue
> plus sign is seen in the Message window meaning "add" as in "add to existing
> thing" as seen on the Add Recipient and Add Attachment button.  The
> difference is subtle, but I think worth noting. If we want to go that route
> I can work on those graphics and clean them up a bit.
Flagging feedback from Neil and Stefan

> For
> OSX we have to remember that anything involving shading the button will be
> kind of weird.
I think Stefan will want something separate for OSX:
http://mxr.mozilla.org/comm-central/source/suite/themes/classic/mac/communicator/search/searchbar.css

<font="smaller">(Then we can bike-shed all over again for modern)</font>

Comment 10

[Stefan [:stefanh]]

Comment on attachment 8539398 [details]
Mockups for searchbar notifications.

Hmm, maybe I have misunderstood, but I interpreted this as the provider Google wants to tell me something :-)

If you want the notification to be general, I think it would be better to have a new magnifying glass icon, something the one in bug 1106432 ( https://bug1106432.bugzilla.mozilla.org/attachment.cgi?id=8537320)

Comment 11

[Stefan [:stefanh]]

(In reply to Stefan [:stefanh] from comment #10)
> something the one in

Oops, "something *like* the one in

Comment 12

[[e-mail]]

Comment on attachment 8539398 [details]
Mockups for searchbar notifications.

One of my builds has a patch to searchbar.css that gives it a #BDE0EB colour which seems reasonable enough, but the background-gradient style on the middle left works for me too.

Comment 13

[[e-mail]]

(Sorry I hadn't read the bug, just looked at the mockups)

(In reply to Stefan from comment #10)
> (From update of attachment 8539398 [details])
> Hmm, maybe I have misunderstood, but I interpreted this as the provider
> Google wants to tell me something :-)

Maybe if we put the box-shadow on the dropmarker?

Comment 14

[Philip Chee]

(In reply to [e-mail] from comment #13)
> (In reply to Stefan from comment #10)
>> Hmm, maybe I have misunderstood, but I interpreted this as the provider
>> Google wants to tell me something :-)
> Maybe if we put the box-shadow on the dropmarker?
I think either the box shadow or gradient on the dropmarker would work.
The gradient could have some subtle animation just enough to get noticed but not too distracting.

Comment 15

[[e-mail]]

Comment on attachment 8533835 [details] [diff] [review]
bug1107088.diff

>diff --git a/suite/themes/modern/navigator/navigator.css b/suite/themes/modern/navigator/navigator.css
Why isn't this in searchbar.css? (The suggest styles are here only because they need to style the PopupAutoComplete element.)

>+.searchbar-engine-button[addengines]{
>+  box-shadow: inset 0px 0px 8px rgba(20,150,200,.6) !important;
>+  border-right: 1px solid rgba(0,0,0,.4) !important;
>+}
This doesn't look very good because the Modern textbox has padding. What you could do is to add the "padded" class to all the <textbox type="autocomplete"> that need it, then copy the Classic rule that removes the padding on autocomplete textboxes that don't have the padded class.
Or you could just use a more subtle highlight.