Checkbox labels ellipsized on phone screen in portrait orientation

Bug #1442851 reported by Leo Arias
10
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Ubuntu UX
Fix Committed
Medium
James Mulholland
webbrowser-app
Fix Released
Medium
Olivier Tilloy
ubuntu-ui-toolkit (Ubuntu)
Fix Released
High
Adnane Belmadiaf
webbrowser-app (Ubuntu)
Fix Released
Undecided
Unassigned
Vivid
Confirmed
Undecided
Unassigned

Bug Description

Browser's Settings screen shows an example of a checkbox where its label does not fit in the available screen width, so it is ellipsized. <https://launchpadlibrarian.net/206607288/half-fixed.png> The only way to see what the option means is to switch the phone to landscape.

Even if an app developer avoids this, in portrait mode, on the smallest shipping phone, for every string in their app, in English, they are quite likely not to check their app in every shipping language. And the app may not provide a landscape mode at all. So ellipsizing the label is not an ideal solution.

<https://goo.gl/qc5GV7>: "A checkbox or switch should almost always have a label, which can be tapped just like the checkbox or switch itself. If there is not enough room to display the label on one line, by default it should wrap to multiple lines. It should not be cropped or ellipsized unless the app developer specifically requests this, typically for text that they do not control the length of (such as a Wi-Fi network name, filename, or bookmark title)."

Tags: unity8

Related branches

Revision history for this message
Leo Arias (elopio) wrote :
Revision history for this message
Leo Arias (elopio) wrote :

bug #1356640 was reported for the same issue, in system settings.

Revision history for this message
Olivier Tilloy (osomon) wrote :

Agreed, although of course this is dependent on the screen resolution (the BQ device has a rather low resolution) and on the language itself. Adding an ubuntu-ux task to get input from design on how to tackle this best.

Leo Arias (elopio)
summary: - settings are two big for phone screen in portrait orientation
+ settings are too big for phone screen in portrait orientation
Changed in ubuntu-ux:
importance: Undecided → Medium
status: New → Triaged
assignee: nobody → Matthew Paul Thomas (mpt)
Revision history for this message
Matthew Paul Thomas (mpt) wrote : Re: settings are too big for phone screen in portrait orientation

I don't know why this was assigned to me; I'm not involved in the design of the Web browser. But here are a few suggestions for improving or fixing the problem:

1. In the toolkit, switch labels should obviously wrap to multiple lines if necessary, just like checkbox labels or any other system-provided labels. Ellipsizing should be something that developer turns on for an individual label only if it contains data of possibly-huge length (e.g. a filename, Bluetooth device name, or wi-fi network name).

2. If they are retained, both these settings should be checkboxes (since they're verb phrases), not switches (since they're not noun phrases). That would let "Restore previous session at startup" fit on one line. To be clear, it's not true that "a different UI component should be used for these two options" merely for "the user to see the full text of what he's enabling or disabling"; problems with the toolkit should be fixed in the toolkit, not in apps. But these settings just happen to be using the wrong control anyway.

3. Abolish the "Restore previous session at startup" setting, making the browser always behave that way. Usually when the browser quits it is not from your action: it quits in the background to free up memory, or the whole system shuts down because the battery goes flat. So this setting is equivalent to asking, "Please, phone, don't randomly throw away my work". A "Please do throw away my work" function may be useful, for clearing history+cookies+whatever all in one go -- but then it should be a "Reset Browser" command that you have to invoke manually, not a setting that triggers invisibly and unpredictably in the background.

4. Abolish the "Allow opening new tabs in [the] background" setting. All it does is add an "Open link in new background tab" item to the link context menu, making the menu four items instead of three. Just have that item in the menu all the time.

Changed in ubuntu-ux:
assignee: Matthew Paul Thomas (mpt) → Olga Kemmet (olga-kemmet)
summary: - settings are too big for phone screen in portrait orientation
+ Setting labels ellipsized on phone screen in portrait orientation
Olivier Tilloy (osomon)
tags: added: settings
Revision history for this message
Olivier Tilloy (osomon) wrote : Re: Setting labels ellipsized on phone screen in portrait orientation

Thanks for your input mpt. Some comments:

> If they are retained, both these settings should be checkboxes

That’s interesting, I wasn’t aware of this distinction. It makes sense to me, once explained. Is this documented somewhere? https://design.ubuntu.com/apps/building-blocks/selection doesn’t seem to mention when to use one or the other (and by the way the image for the checkbox component is wrong.

> But these settings just happen to be using the wrong control anyway.

Let’s use this bug report to track this.

> Abolish the "Restore previous session at startup" setting,
> making the browser always behave that way.

It has always been the default behaviour (and there was a time when there was no setting for this), but some users complained that they wanted the opposite behaviour, where they mostly use the browser for throwaway sessions, and re-opening previously open tabs uses up data when undesired. Which is why that setting way introduced.

> Abolish the "Allow opening new tabs in [the] background" setting.

I tend to agree with you on this, but this was explicitly requested by Giorgio back in the days, with a different default for desktop (on) and mobile (off). I’d be more than happy to remove the setting and have the contextual action always there. James, could you maybe comment on this? (Olga, would you mind re-assigning to James? I can’t do it myself)

Changed in webbrowser-app:
status: New → Confirmed
importance: Undecided → Medium
Changed in webbrowser-app (Ubuntu):
status: New → Confirmed
Olivier Tilloy (osomon)
Changed in webbrowser-app:
assignee: nobody → Olivier Tilloy (osomon)
status: Confirmed → In Progress
summary: - Setting labels ellipsized on phone screen in portrait orientation
+ [browser] Setting labels ellipsized on phone screen in portrait
+ orientation
Changed in ubuntu-ux:
assignee: Olga Kemmet (olga-kemmet) → nobody
assignee: nobody → James Mulholland (jamesjosephmulholland)
Revision history for this message
Selene ToyKeeper (toykeeper) wrote : Re: [browser] Setting labels ellipsized on phone screen in portrait orientation

I see this partially fixed in a silo. One item still ends in an ellipsis. Shouldn't this be fixed at a toolkit level instead of just shortening the labels? Otherwise it'll still fail when translated to a longer string or when run on a different screen size or with a different font size.

Revision history for this message
Selene ToyKeeper (toykeeper) wrote :
Revision history for this message
Olivier Tilloy (osomon) wrote :

@Selene: the webbrowser-app change isn’t attempting to fix the issue initially reported (which indeed should be fixed at the UITK level). It is however addressing mpt’s remark that those items are using the wrong controls (switch instead of checkbox). See comment #5 on this bug for details.

Revision history for this message
Olivier Tilloy (osomon) wrote :

The browser side of things is fixed (now using checkboxes instead of switches). Remaining work will have to happen in the UITK.

Changed in webbrowser-app:
status: In Progress → Fix Released
Revision history for this message
Matthew Paul Thomas (mpt) wrote :

Stephanie Wilson has made a note to fix the examples of checkboxes vs. switches in the design guidelines. <https://design.ubuntu.com/apps/building-blocks/selection>

Using a "Restore previous session at startup" setting for "throwaway sessions" is awkward in several ways: it's not at all obvious that that's what it's for; either it doesn't clear your history+cookies, therefore satisfying only part of the use case, or it's not obvious that it does clear them; it doesn't let you have throwaway tabs and persistent tabs open at the same time; and having it as a setting is optimized for people who always or never use the browser that way, and not for people who *sometimes* use the browser that way. All those issues could be resolved by replacing it with a private/incognito area with its own set of tabs, cookies, and history that expires when you close its last tab. But that's a matter for another bug report.

The remaining toolkit issue for this bug report is switching labels to wrap their text by default, ellipsizing it only if the app specifically requests it. This might require changes in System Settings Wi-Fi and Bluetooth screens.

Revision history for this message
Olivier Tilloy (osomon) wrote :

> Using a "Restore previous session at startup" setting for
> "throwaway sessions" is awkward in several ways: it's not at all
> obvious that that's what it's for; either it doesn't clear your
> history+cookies, therefore satisfying only part of the use case, or
> it's not obvious that it does clear them; it doesn't let you have
> throwaway tabs and persistent tabs open at the same time; and having it
> as a setting is optimized for people who always or never use the
> browser that way, and not for people who *sometimes* use the browser
> that way. All those issues could be resolved by replacing it with a
> private/incognito area with its own set of tabs, cookies, and history
> that expires when you close its last tab. But that's a matter for
> another bug report.

The original use case for this setting is that of people who don’t want their open tabs to be remembered at the end of a browsing session (i.e. when they explicitly close the browser). It’s an entirely different use case from the private/incognito browsing mode (which by the way was just implemented). In private mode, as you point out, nothing is recorded (pages you visit are not recorded in the history database and data is not cached on disk), whereas that setting only discards the list of open tabs. Admittedly, this setting could be made more explicit, and in fact it is not part of the design spec (but was requested by a number of very vocal users). It can definitely be improved (or removed if it’s deemed unnecessary, but beware that the vocal users won’t let it go by without complaining!).

Revision history for this message
Matthew Paul Thomas (mpt) wrote :

Specification updated. <https://goo.gl/qc5GV7>

Changed in ubuntu-ui-toolkit (Ubuntu):
status: New → Triaged
description: updated
tags: removed: settings
summary: - [browser] Setting labels ellipsized on phone screen in portrait
- orientation
+ Checkbox labels ellipsized on phone screen in portrait orientation
Changed in ubuntu-ux:
status: Triaged → Fix Committed
Revision history for this message
Launchpad Janitor (janitor) wrote :

This bug was fixed in the package webbrowser-app - 0.23+15.10.20150522.1-0ubuntu1

---------------
webbrowser-app (0.23+15.10.20150522.1-0ubuntu1) wily; urgency=medium

  [ Arthur Mello ]
  * Implement private browsing mode per design specification. (LP:
    #1351179, #1457925, #1457958)

  [ CI Train Bot ]
  * New rebuild forced.
  * Resync trunk.

  [ Olivier Tilloy ]
  * Add Qwant to the default list of search engines. added:
    src/app/webbrowser/searchengines/qwant.xml
  * Add missing import statement. (LP: #1457060)
  * Delay hiding the tab contents to give it an opportunity to grab an
    up-to-date capture. Improve the tab switching animation to not
    flicker and jump around that much. (LP: #1452998)
  * Ensure the search engine delegates do not overlap with the settings
    header. (LP: #1455399)
  * Fix a flaky autopilot test. On a mobile device with network access,
    the URL (http://en.wikipedia.org/wiki/Linux) might be rewritten to
    https://en.m.wikipedia.org/wiki/Linux, thus making the test racy
    depending on when the check on the webview’s URL is performed. (LP:
    #1456885)
  * Make use of the WebContext.maxCacheSizeHint property, introduced in
    Oxide 1.6. This bumps the dependency of qtdeclarative5-ubuntu-web-
    plugin on liboxideqt-qmlplugin to 1.6. (LP: #1277659)
  * Remove a number of useless calls to QTest::qWait() in unit tests,
    thus making them significantly faster to run.
  * When opening a new blank tab, always clear the address bar. (LP:
    #1456199)

webbrowser-app (0.23+15.04.20150515-0ubuntu1) vivid; urgency=medium

  [ CI Train Bot ]
  * Resync trunk.

  [ Olivier Tilloy ]
  * Change the homepage in tests so that the domain name doesn’t contain
    a dot, to work around https://launchpad.net/bugs/1108742. (LP:
    #1108742)
  * Delay showing the fullscreen hint to prevent it from jumping up
    while the webview is being resized. (LP: #1454097)
  * Look for custom search engines description files in several
    locations. This adds a build dependency on qml-module-qt-labs-
    folderlistmodel, to run unit tests at package construction time.
    (LP: #1455207)
  * Use checkboxes instead of switches for verb phrases, per design
    guidance. (LP: #1442851)

 -- CI Train Bot <email address hidden> Fri, 22 May 2015 19:21:17 +0000

Changed in webbrowser-app (Ubuntu):
status: Confirmed → Fix Released
Revision history for this message
Launchpad Janitor (janitor) wrote :

Status changed to 'Confirmed' because the bug affects multiple users.

Changed in webbrowser-app (Ubuntu Vivid):
status: New → Confirmed
Cris Dywan (kalikiana)
tags: added: unity8
Changed in ubuntu-ui-toolkit (Ubuntu):
importance: Undecided → High
Cris Dywan (kalikiana)
Changed in ubuntu-ui-toolkit (Ubuntu):
status: Triaged → In Progress
assignee: nobody → Adnane Belmadiaf (daker)
Cris Dywan (kalikiana)
Changed in ubuntu-ui-toolkit (Ubuntu):
status: In Progress → Fix Committed
Revision history for this message
Launchpad Janitor (janitor) wrote :

This bug was fixed in the package ubuntu-ui-toolkit - 1.3.2184+17.04.20170306

---------------
ubuntu-ui-toolkit (1.3.2184+17.04.20170306) zesty; urgency=medium

  [ Adnane Belmadiaf ]
  * Add support for CheckBox label when set
  * Add more tests for checkbox. Fixes LP: #1333228, LP: #1442851.
  * Make sure we resets partial text input from the input method.
    Fixes LP: #1630872.
  * Fix ListItem title/subtitle alignment & elide in RTL mode.
    Fixes LP: #1665944.
  * Fix PageHeader title alignment & elide in RTL mode. Fixes LP: #1665942.
  * Fix UbuntuListView docs. Fixes LP: #1486940.
  * Add count prop to OptionSelector. Fixes LP: #1341559.
  * Replace the hardcoded color with a theme color. Fixes LP: #1664758.
  * Fix the import statement for Menu, MenuBar and MenuGroup.
    Fixes LP: #1660604.

  [ Albert Astals Cid ]
  * Fix memory leak in UCStyleHints
  * ThinDivider: Anchors can't be null, set to undefined
  * No need to call UCUnits::resolveResource to learn we just need to load it
    normally because the fact that we already loaded it normally means we need
    to load it normally. Fixes LP: #1558663.
  * Fix conditional jump or move depends on uninitialised value(s)

  [ Christian Dywan ]
  * Initialize UCApplication with no side effects. Fixes LP: #1662868.
  * Unit test case insensitive FilterBehavior.pattern. Fixes LP: #1663924.
  * ListItemPopover delegate should (in)visible as per action Bug 1662220:
    [ListItem] Popupmenu shows traces of disabled actions

  [ Olivier Tilloy ]
  * Check that window is not null before accessing its activeFocusItem property.
    Fixes LP: #1664620.

  [ Lukáš Tinkl ]
  * Unbreak the startup race between unity8/qtmir and UITK trying talk to
    content-hub. Fixes LP: #1663106.

 -- Zoltán Balogh <email address hidden> Mon, 06 Mar 2017 16:04:56 +0000

Changed in ubuntu-ui-toolkit (Ubuntu):
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.