Make favicons more pronounced in ctrl+tab previews

RESOLVED FIXED in Firefox 59

Status

()

Firefox
Tabbed Browser
P3
enhancement
RESOLVED FIXED
9 months ago
4 months ago

People

(Reporter: canuckistani, Assigned: dao)

Tracking

({uiwanted})

Trunk
Firefox 59
uiwanted
Points:
---

Firefox Tracking Flags

(firefox59 fixed)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments)

As a user I would be able to more easily recognize a site by, er, sight when using ctrl+tab if the site icon or favicon was added to the preview.

I think this would help mitigate this complaint:

https://twitter.com/stshank/status/887544015750549505

Updated

9 months ago
Component: General → Tabbed Browser
(Assignee)

Comment 1

6 months ago
The favicon overlay the thumbnails in the upper left corner, but perhaps they should be more pronounced?
Severity: normal → enhancement
status-firefox57: affected → ---
Flags: needinfo?(jgriffiths)
(In reply to Dão Gottwald [::dao] from comment #1)
> The favicon overlay the thumbnails in the upper left corner, but perhaps
> they should be more pronounced?

Should put this on the ux backlog. Clearing for now.
Flags: needinfo?(jgriffiths)
(Assignee)

Updated

6 months ago
Keywords: uiwanted
Priority: -- → P3
Summary: Add favicons or site icons to the previews in ctrl+tab → Make favicons more pronounced in ctrl+tab previews
Comment hidden (mozreview-request)
(Assignee)

Updated

4 months ago
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED

Comment 4

4 months ago
Created attachment 8938576 [details]
before / after

Comment 5

4 months ago
mozreview-review
Comment on attachment 8938334 [details]
Bug 1383217 - Update Ctrl+Tab preview styling to better match activity stream and photon.

https://reviewboard.mozilla.org/r/209058/#review215034

::: browser/themes/shared/ctrlTab.inc.css:14
(Diff revision 1)
>  #ctrlTab-panel {
>    -moz-appearance: none;
>  %ifdef XP_MACOSX
>    -moz-window-shadow: none;
>  %endif
> -  background: hsla(0,0%,33%,.85);
> +  background: hsla(0,0%,40%,.85);

Not sure if this (and other "black"s) should be some Grey 90 with opacity: https://design.firefox.com/photon/visuals/color.html#opacity

::: browser/themes/shared/ctrlTab.inc.css:34
(Diff revision 1)
> +  max-height: inherit;
>  }
>  
> -.ctrlTab-preview-inner > .tabPreview-canvas {
> -  box-shadow: 1px 1px 2px hsl(0,0%,12%);
> +.ctrlTab-favicon-container {
> +  position: relative;
> +  -moz-box-pack: end;

No need for `start` for some platforms?

::: browser/themes/shared/ctrlTab.inc.css:39
(Diff revision 1)
> +  -moz-box-pack: end;
>  }
>  
> -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
> +.ctrlTab-favicon[src] {
> +  width: 42px;
> +  height: 42px;

Activity Stream has a bit of complex behaviors for selecting rich icons, but I suppose we're just trying to match the look of the "thumbnail + favicon" fallback, so this is fine.
Attachment #8938334 - Flags: review?(edilee) → review+
(Assignee)

Comment 6

4 months ago
(In reply to Ed Lee :Mardak from comment #5)
> >  #ctrlTab-panel {
> >    -moz-appearance: none;
> >  %ifdef XP_MACOSX
> >    -moz-window-shadow: none;
> >  %endif
> > -  background: hsla(0,0%,33%,.85);
> > +  background: hsla(0,0%,40%,.85);
> 
> Not sure if this (and other "black"s) should be some Grey 90 with opacity:
> https://design.firefox.com/photon/visuals/color.html#opacity

Displaying thumbnails + text over web content is a pretty specific case, so I think we're better off with a custom value optimized for this.

> ::: browser/themes/shared/ctrlTab.inc.css:34
> (Diff revision 1)
> > +  max-height: inherit;
> >  }
> >  
> > -.ctrlTab-preview-inner > .tabPreview-canvas {
> > -  box-shadow: 1px 1px 2px hsl(0,0%,12%);
> > +.ctrlTab-favicon-container {
> > +  position: relative;
> > +  -moz-box-pack: end;
> 
> No need for `start` for some platforms?

Just matching Activity Stream here. At least as far as I know, the icon is always on the end there.

> ::: browser/themes/shared/ctrlTab.inc.css:39
> (Diff revision 1)
> > +  -moz-box-pack: end;
> >  }
> >  
> > -.ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
> > +.ctrlTab-favicon[src] {
> > +  width: 42px;
> > +  height: 42px;
> 
> Activity Stream has a bit of complex behaviors for selecting rich icons, but
> I suppose we're just trying to match the look of the "thumbnail + favicon"
> fallback, so this is fine.

Yeah, would be nice to share this behavior (and code), but that's a bit too much for this bug.

Comment 7

4 months ago
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c94fb183a65f
Update Ctrl+Tab preview styling to better match activity stream and photon. r=Mardak

Comment 8

4 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/c94fb183a65f
Status: ASSIGNED → RESOLVED
Last Resolved: 4 months ago
status-firefox59: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
You need to log in before you can comment on or make changes to this bug.