Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#4049 closed defect (fixed)

Browse: autocomplete list occludes OSK

Reported by: manuq Owned by: manuq
Priority: Unspecified by Maintainer Milestone:
Component: Browse Version: Git as of bugdate
Severity: Unspecified Keywords: 13.1.0, r+, olpc-test-passed
Cc: erikos, garycmartin Distribution/OS: Unspecified
Bug Status: Unconfirmed

Description (last modified by manuq)

TestCase:

  • start Browse with the laptop in ebook mode
  • tap in the url entry and start typing with the on-screen keyboard

Autocomplete list should not occlude the OSK. Test after you have navigated many pages so the list shows the maximun number of matches.

Attachments (16)

browse-autocomplete-osk.jpg (189.0 KB) - added by manuq 9 years ago.
Screen capture.
autocomplete.png (78.9 KB) - added by manuq 9 years ago.
Autocomplete list with the patch applied.
0001-Make-the-autocomplete-list-touch-friendly-SL-4049.patch (2.1 KB) - added by manuq 9 years ago.
Candidate patch.
autocomplete.2.png (76.1 KB) - added by manuq 9 years ago.
early-build-release-sugar-browse-history-example.png (171.2 KB) - added by garycmartin 9 years ago.
0001-Remove-gap-between-the-web-entry-and-the-autocomplet.patch (1.3 KB) - added by manuq 9 years ago.
Remove gap.
autocomplete-v1.png (53.8 KB) - added by manuq 9 years ago.
Styling option 1, like the original gecko but with palette colors
autocomplete-v2.png (52.9 KB) - added by manuq 9 years ago.
Styling option 2, squaring the bottom corners of the entry to make the list the same width
autocomplete-v3.png (52.7 KB) - added by manuq 9 years ago.
Styling option 3, like v2 but with black text over white background.
Browse_history_search_mockup.png (70.7 KB) - added by garycmartin 8 years ago.
An additional palette like search history mockup
0002-Improve-styling-of-the-autocomplete-list-SL-4049-V1.patch (4.3 KB) - added by manuq 8 years ago.
Patch that gets closer to the mockup.
0002-Improve-styling-of-the-autocomplete-list-SL-4049-V2.patch (4.4 KB) - added by manuq 8 years ago.
Patch similar than the previous, counter proposal.
0001-Add-style-for-Browse-search-window-SL-4049.patch (1.0 KB) - added by manuq 8 years ago.
Artwork patch to style the list like a palette.
autocomplete-v4.png (55.9 KB) - added by manuq 8 years ago.
Screengrab of 0002-Improve-styling-of-the-autocomplete-list-SL-4049-V1.patch
autocomplete-v5.png (56.0 KB) - added by manuq 8 years ago.
Screengrab of 0002-Improve-styling-of-the-autocomplete-list-SL-4049-V2.patch
autocomplete-6.png (54.0 KB) - added by manuq 8 years ago.
Adding margin to the text items.

Download all attachments as: .zip

Change History (28)

Changed 9 years ago by manuq

Screen capture.

comment:1 Changed 9 years ago by manuq

  • Description modified (diff)

comment:2 Changed 9 years ago by manuq

  • Cc erikos garycmartin added
  • Keywords r? added

Changed 9 years ago by manuq

Autocomplete list with the patch applied.

comment:3 follow-up: Changed 9 years ago by manuq

For the row height, another approach can be have the url below the title in the autocomplete list.

Changed 9 years ago by manuq

Candidate patch.

Changed 9 years ago by manuq

comment:4 in reply to: ↑ 3 Changed 9 years ago by garycmartin

Replying to manuq:

For the row height, another approach can be have the url below the title in the autocomplete list.

Yes, as per discussion irc the width of the history results is rather narrow these days due to Browse feature creep in the toolbar, reducing the URL input field width. See attached screen shot from an early shipping Sugar build. Putting the url below the title will much improve information visibility for each result and make the hit area larger for touch use. Having the history alternate light grey / dark grey can be used to separate each title/url pair from the next to make it clear they each pair belongs together (without needing to add extra space for a separator). The impact is that with the OSK open we can only show about 7 search history matches. A feature for a future cycle should be opened for allowing the history to be scrolled through all the matching results.

comment:5 follow-up: Changed 9 years ago by erikos

Shouldn't we theme the list Palette like? At least with a black border.

comment:6 in reply to: ↑ 5 Changed 9 years ago by garycmartin

Replying to erikos:

Shouldn't we theme the list Palette like? At least with a black border.

Black background with a grey outline, white text and grey separators would make it palette like. But that seems a lot of work at this stage in the game, and the needed separators would consume more vertical space – so should perhaps hold off until we can add in scrolling the results?

comment:7 Changed 9 years ago by manuq

  • Keywords olpc-test-pending added; r? removed
  • Resolution set to fixed
  • Status changed from new to closed

Pushed as 9c120d63, and filled a ticket #4081 for next cycle to track the future improvements.

comment:8 Changed 9 years ago by manuq

  • Keywords olpc-test-pending removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening as we can improve this solution, as per Simon suggestions. First of, remove the gap that was introduced in the port to webkit. This is a regression. Later, see if the styling of the autocomplete list can be improved.

Changed 9 years ago by manuq

Styling option 1, like the original gecko but with palette colors

Changed 9 years ago by manuq

Styling option 2, squaring the bottom corners of the entry to make the list the same width

Changed 9 years ago by manuq

Styling option 3, like v2 but with black text over white background.

Changed 8 years ago by garycmartin

An additional palette like search history mockup

Changed 8 years ago by manuq

Patch that gets closer to the mockup.

Changed 8 years ago by manuq

Patch similar than the previous, counter proposal.

Changed 8 years ago by manuq

Artwork patch to style the list like a palette.

Changed 8 years ago by manuq

Screengrab of 0002-Improve-styling-of-the-autocomplete-list-SL-4049-V1.patch

Changed 8 years ago by manuq

Screengrab of 0002-Improve-styling-of-the-autocomplete-list-SL-4049-V2.patch

comment:9 Changed 8 years ago by manuq

  • Keywords r? added

I was close to the mockup, but found difficult to add the inner space at both sides of the entry. So I came to a counter proposal.

Changed 8 years ago by manuq

Adding margin to the text items.

comment:10 Changed 8 years ago by manuq

  • Keywords r+ olpc-test-pending added; r? removed
  • Resolution set to fixed
  • Status changed from reopened to closed

Pushed Browse 990f4ddc - 5540c90c and artwork a5da6e4e . Let's use #4081 for further improvements.

comment:11 Changed 8 years ago by greenfeld

  • Keywords olpc-test-passed added; olpc-test-pending removed

The autocomplete list is safely above the OSK in portrait and landscape modes in OLPC 13.1.0 os8.

comment:12 Changed 8 years ago by dnarvaez

  • Milestone 0.98 deleted

Milestone 0.98 deleted

Note: See TracTickets for help on using tickets.