New issue
Advanced search Search tips

Issue 761701 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-11-10
OS: Mac
Pri: 1
Type: Bug
Launch-M-Target: 64-Dev , 65-Beta


Show other hotlists

Hotlists containing this issue:
HarmonyFutureP1s


Sign in to add a comment

Mac/Harmony: Bubble anchoring doesn't quite line up (maybe hidpi specific)

Project Member Reported by tapted@chromium.org, Sep 4 2017

Issue description

Chrome Version       : 63.0.3204.0
OS Version: OS X 10.12.6

See attached.

I think the problem is that for the bubble window, the border stroke is part of the shadow, so it's drawn by the window server; "outside" the window.

However, the border stroke of the omnibox is drawn by the view, so it's "inside" the view.

So to anchor correctly, we need to shift the anchor point so that it inside the border stroke of the omnibox. On HiDPI, the border stroke is 1px, not 1 DIP, so this might be tricky...
 
Screen Shot 2017-09-04 at 14.29.19.png
6.9 KB View Download
Screen Shot 2017-09-04 at 14.42.14.png
9.7 KB View Download
Insetting by 1 DIP in the X direction gives a good result on hidpi. (except when focused :/, unless in incognito -- see comments at  https://crbug.com/760429#c4  ).

To fix that I think we need to change the way the omnibox is drawn when focussed. I.e., so that it doesn't shrink!
Screen Shot 2017-09-04 at 16.18.18.png
8.8 KB View Download
Screen Shot 2017-09-04 at 16.18.26.png
6.9 KB View Download
Screen Shot 2017-09-04 at 16.18.39.png
11.3 KB View Download
Screen Shot 2017-09-04 at 16.18.45.png
7.6 KB View Download
1x screenshots attached for https://chromium-review.googlesource.com/c/chromium/src/+/648910 - I think the unfocused version matches the spec in https://bugs.chromium.org/p/chromium/issues/attachment?aid=246433&inline=1 exactly. To fix hidpi and the omnibox-focused positioning, the fix should be to draw the omnibox with a consistent size, since it's tricky to specify window locations in anything other than DIPs.
Screen Shot 2017-09-05 at 10.49.45 am.png
4.3 KB View Download
Screen Shot 2017-09-05 at 10.50.09 am.png
4.3 KB View Download
Labels: Launch-M-Target-64-Beta
NextAction: 2017-11-10
Project Member

Comment 5 by bugdroid1@chromium.org, Sep 5 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f59e7eb5228dac859d2700e1ea32125c4d0d92d7

commit f59e7eb5228dac859d2700e1ea32125c4d0d92d7
Author: Trent Apted <tapted@chromium.org>
Date: Tue Sep 05 21:23:19 2017

Mac: Inset Harmony bubble anchors by 1 DIP in the X direction.

Currently the harmony-style bubbles do not quite align correctly.

An inset is required because the border stroke of the omnibox is
inside its frame, but bubbles have no border stroke (the bubble
border is part of the shadow drawn by the window server; outside the
bubble frame).

But only the X direction is inset. In the Y direction,a 1 DIP "gap"
must be kept, otherwise the "border" stroke from the window server
shadow would be drawn inside the omnibox.

Note the omnibox drawing code on Mac has some quirks in hidpi and
when it draws a focus ring, which will be addressed in a follow-up
to improve the anchoring appearance there.

Bug:  761701 
Change-Id: I055ab62fa525b5c39fa725033ca1ed87d4ad4316
Reviewed-on: https://chromium-review.googlesource.com/648910
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#499752}
[modify] https://crrev.com/f59e7eb5228dac859d2700e1ea32125c4d0d92d7/chrome/browser/ui/cocoa/location_bar/autocomplete_text_field.mm

The NextAction date has arrived: 2017-11-10

Comment 7 by tapted@chromium.org, Nov 15 2017

Labels: -Pri-2 -Launch-M-Target-64-Beta Launch-M-Target-64-Dev Launch-M-Target-65-Beta Pri-1

Comment 8 by tapted@chromium.org, Nov 15 2017

So currently the omnibox on Mac shrinks in size when it gets focus. I'm going to try to fix this.
omnibox_shrink.gif
29.4 KB View Download

Comment 9 by tapted@chromium.org, Nov 16 2017

https://chromium-review.googlesource.com/773718

Here's a gif that toggles between before/after for all the omnibox states (on retina). If you zoom in on the rounded corners, you can see they get a bit cleaner.

(ignore the color speckling - it's because it's a gif and only has 256 colors).
retina.gif
103 KB View Download
24 screenshots for one CL..
retina.gif
105 KB View Download
retina.zip
244 KB Download
nonretina.gif
51.8 KB View Download
nonretina.zip
131 KB Download
Project Member

Comment 12 by bugdroid1@chromium.org, Nov 16 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7fb113edef91fa35305e8d7adc317fa84b9ac61c

commit 7fb113edef91fa35305e8d7adc317fa84b9ac61c
Author: Trent Apted <tapted@chromium.org>
Date: Thu Nov 16 22:44:14 2017

Mac: Don't shrink the omnibox when it has focus.

Also make the focus ring rounded corners properly rounded. Currently
the focus ring is drawn with a rounded-rectangle _stroke_. That gives
the "middle" of the stroke the correct correct corner radius, but it's
the outside edge of the stroke that matters. To make nice rounded
rectangles, it's necessary to draw a fill rather than a stroke.
Currently the focus ring on non-retina appears to take a "shortcut"
around the corners. Fix the border stroke as well as the focus ring
so that everything is symmetric and aligns nicely.

The shrinking is a problem for aligning bubbles. Fix it by, uh, not
shrinking when the omnibox has focus.

Animated before/after screenshots:
non-retina - https://bugs.chromium.org/p/chromium/issues/attachment?aid=312541&inline=1
    retina - https://bugs.chromium.org/p/chromium/issues/attachment?aid=312539&inline=1

Bug:  761701 
Change-Id: I4d3e4dd15175c6d9454b633fa693cadeba39588f
Reviewed-on: https://chromium-review.googlesource.com/773718
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Commit-Queue: Trent Apted <tapted@chromium.org>
Cr-Commit-Position: refs/heads/master@{#517213}
[modify] https://crrev.com/7fb113edef91fa35305e8d7adc317fa84b9ac61c/chrome/browser/ui/cocoa/location_bar/autocomplete_text_field.mm
[modify] https://crrev.com/7fb113edef91fa35305e8d7adc317fa84b9ac61c/chrome/browser/ui/cocoa/location_bar/autocomplete_text_field_cell.mm

Status: Fixed (was: Started)

Sign in to add a comment