Bug 49953

Summary: [Qt] Focus rings are ugly, rects should be united instead of drawn individually
Product: WebKit Reporter: Andreas Kling <kling>
Component: Layout and RenderingAssignee: Renata Hodovan <rhodovan.u-szeged>
Status: RESOLVED FIXED    
Severity: Normal CC: abarth, commit-queue, eric, ossy, rhodovan.u-szeged, tonikitoo, webkit.review.bot, yael
Priority: P2 Keywords: Qt, QtTriaged
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
QtWebKit screenshot - focused link split over multiple lines
none
Chromium screenshot - focused link split over multiple lines
none
QtWebKit screenshot - r73897
none
Patch.
kling: review+, commit-queue: commit-queue-
Patch commit-queue: commit-queue-

Description Andreas Kling 2010-11-22 19:14:41 PST
We currently draw each rectangle individually in GraphicsContext::drawFocusRing(Vector<IntRect>, ...)

We should join the rects and paint them as a bounding path, like other ports do.

Screenshots from QtWebKit and Chromium coming.
Comment 1 Andreas Kling 2010-11-22 19:15:27 PST
Created attachment 74627 [details]
QtWebKit screenshot - focused link split over multiple lines
Comment 2 Andreas Kling 2010-11-22 19:15:59 PST
Created attachment 74628 [details]
Chromium screenshot - focused link split over multiple lines
Comment 3 Yael 2010-11-29 05:31:48 PST
(In reply to comment #0)
> We currently draw each rectangle individually in GraphicsContext::drawFocusRing(Vector<IntRect>, ...)
> 
> We should join the rects and paint them as a bounding path, like other ports do.
> 
> Screenshots from QtWebKit and Chromium coming.

Thank you Andreas!
Antonio Gomes & I were talking about exactly the same thing. The focus ring in Qt is ugly and hard to see in many cases.
Comment 4 Andreas Kling 2010-12-13 09:25:43 PST
Created attachment 76392 [details]
QtWebKit screenshot - r73897

Since the addition of support for color and width for focus rings in <http://trac.webkit.org/changeset/73361>, QtWebKit trunk looks slightly ridiculous (see screenshot.)
Comment 5 Yael 2010-12-13 11:58:32 PST
(In reply to comment #4)
> Created an attachment (id=76392) [details]
> QtWebKit screenshot - r73897
> 
> Since the addition of support for color and width for focus rings in <http://trac.webkit.org/changeset/73361>, QtWebKit trunk looks slightly ridiculous (see screenshot.)

Agreed. I already offered to take over this bug :-)
Comment 6 Andreas Kling 2010-12-13 12:08:53 PST
(In reply to comment #5)
> (In reply to comment #4)
> > Created an attachment (id=76392) [details] [details]
> > QtWebKit screenshot - r73897
> > 
> > Since the addition of support for color and width for focus rings in <http://trac.webkit.org/changeset/73361>, QtWebKit trunk looks slightly ridiculous (see screenshot.)
> 
> Agreed. I already offered to take over this bug :-)

Go for it, I doubt Reni was going to work on this anytime soon. :-)
Comment 7 Yael 2010-12-13 19:16:41 PST
Created attachment 76487 [details]
Patch.

Create a QPainterPath and add to it the focus rects, one at a time.
Combine the 2 drawFocusRing functions into one function drawFocusRingForPath.

Kling, the size of this patch is due to the images from the tests, code changes are very small :-)
Comment 8 Andreas Kling 2010-12-14 02:24:52 PST
Comment on attachment 76487 [details]
Patch.

Much better! r=me
Comment 9 Csaba Osztrogonác 2010-12-14 03:33:21 PST
Comment on attachment 76487 [details]
Patch.

go, go, go :)
Comment 10 WebKit Commit Bot 2010-12-14 04:23:40 PST
Comment on attachment 76487 [details]
Patch.

Rejecting attachment 76487 [details] from commit-queue.

Failed to run "['./WebKitTools/Scripts/webkit-patch', '--status-host=queues.webkit.org', '--bot-id=abarth-cq-sl', 'build-and-test', '--no-clean', '--no-update', '--test', '--non-interactive']" exit_code: 2
Last 500 characters of output:
....
fast/clip ....................
fast/compact ...
fast/constructors .
fast/cookies .
fast/css-generated-content .......................................
fast/css ..........................................................................................................
fast/css/focus-ring-detached.html -> failed

Exiting early after 1 failures. 6428 tests run.
111.53s total testing time

6427 test cases (99%) succeeded
1 test case (<1%) had incorrect layout
4 test cases (<1%) had stderr output

Full output: http://queues.webkit.org/results/6961111
Comment 11 Yael 2010-12-14 12:18:21 PST
Created attachment 76554 [details]
Patch

It was suggested on IRC that I will not provide mac results. Updated patch is teh same as before, minus mac results.
Comment 12 WebKit Commit Bot 2010-12-14 14:30:48 PST
Comment on attachment 76554 [details]
Patch

Rejecting attachment 76554 [details] from commit-queue.

Failed to run "['./WebKitTools/Scripts/webkit-patch', '--status-host=queues.webkit.org', '--bot-id=abarth-cq-sl', 'build-and-test', '--no-clean', '--no-update', '--test', '--non-interactive']" exit_code: 2
Last 500 characters of output:
s/websocket/tests/workers ......
http/tests/workers .....
http/tests/xhtmlmp .
http/tests/xmlhttprequest ............................................................................................................................................................................
http/tests/xmlhttprequest/web-apps ...............
http/tests/xmlhttprequest/workers .........
547.39s total testing time

22190 test cases (99%) succeeded
2 test cases (<1%) were new
13 test cases (<1%) had stderr output

Full output: http://queues.webkit.org/results/6934134
Comment 13 Yael 2010-12-14 16:41:52 PST
Committed 74069. <http://trac.webkit.org/changeset/74069>
Comment 14 WebKit Review Bot 2010-12-14 17:18:42 PST
http://trac.webkit.org/changeset/74069 might have broken SnowLeopard Intel Release (Tests)
The following tests are not passing:
fast/css/focus-ring-detached.html
fast/css/focus-ring-multiline.html
Comment 15 Antonio Gomes 2011-01-03 14:07:07 PST
It is much better now, but still looks bad. The focus ring could be more thin. Yael, are you on it or plan to?
Comment 16 Yael 2011-01-03 14:23:03 PST
(In reply to comment #15)
> It is much better now, but still looks bad. The focus ring could be more thin. Yael, are you on it or plan to?

I have been trying to make it look better, but I don't have a solution yet.

Ideally, we should use a gradient to draw the focus ring, like the mac port does. See an example in <http://imagepaste.nullnetwork.net/viewimage.php?id=1591>.
When I tried to use Qt's radial gradient, I got the result in <http://imagepaste.nullnetwork.net/viewimage.php?id=1590>, which is not what I wanted. I'll be happy to get some help fixing it.
Comment 17 Antonio Gomes 2011-01-03 14:53:16 PST
(In reply to comment #16)
> (In reply to comment #15)
> > It is much better now, but still looks bad. The focus ring could be more thin. Yael, are you on it or plan to?
> 
> I have been trying to make it look better, but I don't have a solution yet.
> 
> Ideally, we should use a gradient to draw the focus ring, like the mac port does. See an example in <http://imagepaste.nullnetwork.net/viewimage.php?id=1591>.
> When I tried to use Qt's radial gradient, I got the result in <http://imagepaste.nullnetwork.net/viewimage.php?id=1590>, which is not what I wanted. I'll be happy to get some help fixing it.

Ok. Is there a follow up filed? Should we reopen?
Comment 18 Yael 2011-01-03 15:09:28 PST
(In reply to comment #17)
> (In reply to comment #16)
> > (In reply to comment #15)
> > > It is much better now, but still looks bad. The focus ring could be more thin. Yael, are you on it or plan to?
> > 
> > I have been trying to make it look better, but I don't have a solution yet.
> > 
> > Ideally, we should use a gradient to draw the focus ring, like the mac port does. See an example in <http://imagepaste.nullnetwork.net/viewimage.php?id=1591>.
> > When I tried to use Qt's radial gradient, I got the result in <http://imagepaste.nullnetwork.net/viewimage.php?id=1590>, which is not what I wanted. I'll be happy to get some help fixing it.
> 
> Ok. Is there a follow up filed? Should we reopen?

I think we need a new bug. This bug was filed before I added support for outline-width, which caused this problem.
Comment 19 Yael 2011-01-03 16:34:25 PST
Filed https://bugs.webkit.org/show_bug.cgi?id=51854