What happened to this design ?

bitsandnumbers

Hi,

At some point, when Yosemite went out, this was the app's design:

But now, we get this:

(app)

(mini)

And the mini using shortcut does not open below the mouse, but always below the menubar. What the point, since I have then to go all the way there anyway ? I'd just use the menubar icon and not the shortcut.

Don't tell me you prefer this latest UI ? We cannot distinguish the slightest detail of the wallpaper below the blurs, like it was in the first picture. Plus some cosmetic changes that do not feel right (there's no header behind the control buttons in the first screenshot, while there is now - On the mini, rounded corners were larger etc…). What made you decide otherwise ? Thx

rickfillion

Hi @bitsandnumbers,

It looks to me like something has happened to your Mac that has changed some system properties. The font used in those screenshots is a fixed width font, which is not the standard Yosemite system font of Helvetica. Here is a screenshot of the mini running here:

This screenshot was taken with "Reduced Transparency" turned on, which is why it appears solid gray.

I suspect that whatever you did to change the system font also affected Vibrancy effects in windows. It's certainly not our intention for the UI to look as you have in those screenshots.

Rick

littlebobbytables

Hi @bitsandnumbers‌

I'm unsure why you're seeing what you are but mine still looks like your first image.

Is it possible you've been tweaking settings in System Preferences at all?

One easy way to check, if you're willing, would be to create a brand new user profile on your Mac. It'll have everything set to their defaults. Does 1Password look the same when you view it from a fresh profile?

bitsandnumbers

Hi,

I tried what @littlebobbytables‌ suggested and created an new account to see if the issue remained, and it happens that it is exactly the same thing: from the header with separation through the very faint blur, and the rounded corners which must be 3px max.

As for the font, I changed it to something more readable as I have not a retina display and the Helvetica Neue has some glitches (bad kerning, pixelation etc…). So it's perfectly normal on my end.

But it is not what cause those UI annoyances on 1password. For instance, even on my main os account, the finder shows a normal yosemite blur, that let some details come through. Other apps do that too. The 3px or so rounded corner of 1password mini do not follow Yosemite guidelines and I can see that contextual menus in Yosemite have 5px or so corners.

Is it possible that something went wrong in some update ? Because when the first version of Yosemite 1password UI (in Beta as I'm enrolled) went out, I had the exact same thing as the first screenshot of this thread. Then the official 1password 5 went out and I remember saying to myself "What did they do ???". And I didn't tweak anything in the meantime, nor did I have those fonts at the time. I took some time to see if some other update would correct things and then came here to ask.

I'll try to uninstall/reinstall 1password 5 to see what happens at keep you informed.

littlebobbytables

HI @bitsandnumbers‌

Did removing just the 1Password application and reinstalling a fresh copy have any impact?

bitsandnumbers

Nope, I removed it with AppDelete (as I couldn't find an uninstall feature) and everything is the same. Plus I'm now using a new os account since yesterday because I wanted to start things fresh, and there's really no difference. Wonder what's going on...

EDIT: what's stranger is that only 1password seems to be affected. Even if I open the mini, hover over a category the contextual menu that follow *has* correct vibrancy/blur effect (not so true in fact, it is not the same as system contextual menus, sorry). So I'm beginning to wonder if there is not a bug in 1password...

rickfillion

Hi @bitsandnumbers‌,

When I read your original post I think I got too stuck on the color differences, which I think are just caused by the different background as compared to the initial screenshot.

Apple changed the amount of transparency and blur used under UI elements during the Yosemite betas, which may explain some of the transparency differences you're seeing. The apps themselves have no real control over that. We either opt into Vibrancy or not. We don't get to decide how much blur or transparency to apply. It's up to the system.

Going over the other differences you noted.... The divider in the side bar between the items and the window controls in the top left... we decided that though it looked pretty to not have a divider it was appropriate to have one. The mini screenshot you posted does have the wrong rounded corner radius though. The code says it's supposed to be 5.0pt (which technically is different than standard OS X windows, which are 4.5pt). In the screenshot that I posted, you can see that they're 5.0 there. Is there anything particular about your display setup? Are you using a retina or non-retina display? Do you have another display connected (retina or not)? Does the same bizarre corner radius show up when the window is locked?

The mini menus are not standard NSMenus as they appear to be, which probably explains why you aren't seeing the same/correct vibrancy/blur effect. These are workalikes that we've built ourselves as there's stuff we need to do in those that we can't do with standard NSMenus.

Rick

bitsandnumbers

Thanks for those head ups @rickfillion‌.

First the vibrancy, it may well be because I remembered the look of 1password when using betas of Yosemite. But there are several vibrancy levels since contextual menus for the finder have not the same amount as left panes in apps for instance. But maybe it's only used by Apple internally ?

As for the round corners, you can see in the first screenshot of this blog article : http://sayzlim.net/1password-pro-users-tips/ that he has the exact same amount as in mine. The 3px or so, not the 5px one. I have indeed a non standard screen setup. I use a macbook pro 15" with a 21" external display (full HD, 1920x1200). And I don't have retina. I know for sure that OS X has some issues with external displays, even though Apple has done some improvements. But would it explain alone the different rounded corners ?

Hope it helps finding the culprits…

EDIT: I understand for the divider, but would it be possible to disable it if there's only one vault ? Because it's better to use a divider when you have more than one, but otherwise it makes no sense at all.

[Deleted User]

Thought I'd chime in. I made a similar thread the other day about that line in the upper part of the sidebar. It's good to hear that it was an intentional change, even though I personally don't like it either (I only have one vault). It breaks with the overall minimal look of Yosemite and looks a bit out of place.

With respect to the 'vibrancy', I completely understand where you're coming from. The differences are really noticeable and its very unfortunate that there is no option for developers to adjust the effect. To me, 1Password feels a bit out of place sometimes. It isn't as nice-looking as other apps due to these small differences.

The rounded corners on 1Password Mini are smaller on my system too. They don't look the same as other panels.

rickfillion

Hi @bitsandnumbers‌ and @Eitot,

Thanks for the additional information. Curiously, the three of us all have different corner radii. I've got 5pt here, @Eitot's screenshot is 3pt and @bitsandnumbers‌ has 1pt. Hrmm... even in @Eitot's screenshot, the bottom corners are different than the top corners. The top corners look to be 1.5pt or maybe 2pt. My setup here is a 13" retina MBP attached to a 27in thunderbolt display (not retina). During development I was only using the retina MBP (I assume I wouldn't have checked in that code if it didn't look as intended on that display). I'll have to think about this and try to come up with additional things that could affect how we're drawing those corners.

@Eitot : is that a retina screenshot? Or did you change your system font as well? I find it curious that your screenshot is showing no subpixel-antialiasing on the text.

@bitsandnumbers‌ : do you think you could temporarily disable your font switch to see if that's affecting this at all? I notice that in the blog post you link to, the author also has a non-standard system font. I'd like to take that out of the equation so that we can rule it out.

Rick

bitsandnumbers

@rickfillion‌ : I already did that. When I created my new os account to be the new default, I also removed the custom font. And it's still the same, sadly. (btw, the change of font is a simple process, there's no change in system files: you just add your modified font - with special metadata - to the system font folder and log out log in). Hope that help.

rickfillion

I've created a bug here (OPM-2644) so that we can take a deeper look at this and hopefully fix it in a future release. If you think of any other information that could help us reproduce this issue locally, that would be very appreciated.

Rick

ref: OPM-2644

[Deleted User]

@rickfillion‌: I am using an external display and disabled the 'LCD font smoothing' (System Preferences > General), that's probably why there is more pixellation. I have not altered my system typeface and I'm running this on a 2008 MacBook. The reason why the top corners are different is because it's a screenshot of the menubar item. The 1Password browser extension looks like this.

bitsandnumbers

Thanks @rickfillion‌ , I'm looking forward to see the adjustments once you've found the source of the problem.

Megan

Hi @Eitot and @bitsandnumbers‌

Thanks so much for your help in tracking this bug down! I've updated the issue report with the extra information, and I'm sure Rick will pop back in here as soon as he has an update. :)