Thin grey rendering on a white background look inconsistent and provide poor contrast

[Daniel van Vugt]

The top area of the browser window is really just a series thin grey lines on a white background. This is poor design for a few reasons:

  1. Grey and white don't contrast very well, especially thin strips of grey on white.
  2. The grey outlines and symbols are inconsistent in thickness and colour:
     2.1. The X icon is thinner than the + icon beside it, which is a different consistency again to the < button below it.
     2.2. The rounded grey outline around the address is slighly thicker (blurred?) compared to the grey outline delineating the tabs.
  3. Those vision impaired will have a very hard time.
  4. Even those who are not vision impaired will be cognitively slowed by having to interpret the fine grey lines rather than areas of greater contrast.
  5. It looks unprofessional.

[Rae Shambrook (raecontreras)]

We have a new visual design for the browser currently being implemented. The style of the new tabs will rely less on contrasts as the selected tab takes on a different shape. We are also trying to add a divider at the bottom of the chrome to help make it more distinct. Andrew Hayzen will investigate it. As for the differences in icons, this is something I'll have Matthieu James look at in the icon theme.

[Daniel van Vugt (vanvugt)]

I suspect we also have rendering bugs (textures not displayed as pixel aligned) in the browser which might make some icons appear more blurred than they should. Certainly that seems to be the issue in bug 1606489. So that part is less a design problem and more the implementation.