App content visible behind tab header

Sorry, I should probably mention this: I've noticed this first yesterday in an app coded by me (and today in the weather app). It used to work fine in both the weather app and my app, so it's a regression somewhere.

A "clip: true" in the Flickable solves this, so I guess this is not a bug in the toolkit.

Thanks for the report!

Merge proposal is waiting for review.

It used to work without clip: true. Anyway, that indeed solves the issue for me. Thanks for the hint! :-)

Also affects Calendar. See the screenshot at https://plus.google.com/101142018515738559932/posts/2KtUrLupx6q

Fix committed into lp:webbrowser-app at revision 225, scheduled for release in webbrowser-app, milestone ubuntu-13.04-month-5

There were some changes to the clipping of app contents which was needed to support gradient backgrounds. The changes are in r621 of the UITK and my first guess is that this bug is related to that.

I noticed when running the code attached to this bug https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1201452 and commenting-out the title of ListItem, that the contents of the page is still cropped away where the header should be, even though there is no header visible when the title of the active page is not set. So the clipping may be active even when the header is not visible, but this requires further investigation.

This bug was fixed in the package webbrowser-app - 0.21+13.10.20130716-0ubuntu1

---------------
webbrowser-app (0.21+13.10.20130716-0ubuntu1) saucy; urgency=low

  [ Olivier Tilloy ]
  * Display thumbnails of the web pages in the activity view.
  * Refactor the models to group history entries by domain name, not by
    host.
  * Ensure the header of the activity view is opaque. (LP: #1201094)

  [ Ubuntu daily release ]
  * Automatic snapshot from revision 225
 -- Ubuntu daily release <email address hidden> Tue, 16 Jul 2013 08:26:00 +0000

For the File Manager app, there is more to the problem than just content being visible on top of the header. When the app starts, the list doesn't start scrolled fully to the top. The list header starts on top of the header, when it should start just below the header.

Michael, you are right. In fact it is not a new issue in the file manager, it is just more visible now. It is a bug in the ui toolkit. Can you report it separately from here. Something like:
"[MainView] positioning & clipping don't take into account ListView.header's height at startup"

Thanks!

David: the issue in the calendar app was already there for quite some time. I don't think it's related to something the UI toolkit does.

For the music app, I'm not sure what the issue is: somebody has steps to reproduce + a screenshot?

Florian & Michael:

"[MainView] positioning & clipping don't take into account ListView.header's height at startup"

Please include in the bug that also toolbar height is not taken into account either. Currently there's ugly workaround for that in FileManager.

@Arto: what you are describing sounds like a separate bug. Can you make a separate report on it?

This bug was fixed in the package friends-app - 0.91.3+13.10.20130717-0ubuntu1

---------------
friends-app (0.91.3+13.10.20130717-0ubuntu1) saucy; urgency=low

  [ Ken VanDine ]
  * new source for friends-app
  * renamed project file with -app
  * fixed qml path
  * Fixed path
  * added gettext build stuff for localization
  * added a few translations
  * removed unused files
  * Don't use a ListItem.Empty for the favorite line, it was eating the
    mouse clicks
  * margin fixes from robru
  * replace gwibber
  * removed unused import
  * add keyboard navigation (wip)
  * significant scrolling fixes and support for most keyboard navigation
  * polishing up scrolling
  * Don't reorder the view, StreamModel is descending now.
  * Added refresh
  * added pull to refresh bar
  * updated retweet icon
  * Layout improvements for tiles
  * Fixed resize issue after collapsing details
  * set link color to gray
  * Updated favorite icon
  * No orange buttons
  * moved the retweet action to the tile instead of details and hook up
    activity spinners for favorite and retweet.
  * Added character count and clear icon for Post. Added stub code for
    url shortening, commented out until qml-friends exposes it.
  * Use urlShorten
  * Don't change liked and likes locally, rely on the model to handle
    those changes
  * Add counter and urlShorten to reply entry and insert @sender
    automatically for twitter and identica
  * Added Keywords to the .desktop file
  * Use a Checkbox for account selection per design guidelines
  * Use a transparent-button instead of an image and MouseArea for the
    clear button
  * Attempt to load the 100px avatar, if it fails load the full sized
    version
  * Don't pop more than one page off the PageStack when posting to
    multiple accounts. Adds an error popover when there is a failure,
    however we can't display which account had the failure. That will
    require an API change in qml-friends
  * Don't hide the reply entry on posts from_me, we might want to
    comment.
  * ensure content can be markup
  * set textFormat for link_desc
  * merged from trunk
  * revert patch that captured the spacebar for moving the ListView, it
    broke using space in replies.
  * use the width of our listView for the delegate instead of
    ListView.view.width
  * For resolution independence, use units.gu to determine icon sizes
  * reset the string of the unpulled state after refreshing
  * merged from trunk
  * Fix aspect of avatars with Image.PreserveAspectCrop
  * don't use file naming for the images that assume they were designed
    for specific resolutions.
  * Coding style cleanup
  * Use NoSnap for even smoother scrolling
  * use a Row for favorite adding spacing between the icon and the label
  * removed some unneeded code, font properties come from the theme.
  * ported from API deprecations in ubuntu-ui-toolkit .
  * More phablet friendly, don't lock the toolbar and enable
    orientation. .
  * Make TimeLine a Page and set flickable to the listview to fix issues
    with the header . (LP: #1201094)
  * Removed a couple un-needed anchors.

  [ Sam Hewitt ]
  * Redesign of main icon.

  [ Stuart Langridge ]
  * Updat...

Fix committed into lp:ubuntu-weather-app at revision 71, scheduled for release in ubuntu-weather-app, milestone alpha-1

Fix committed into lp:music-app at revision None, scheduled for release in music-app, milestone 1.0

So when I set flickable correctly and added clip: true to the flickable and I still get this, I have a different problem?

this bug was fixed a long time ago in UITK right? Why is it listed as "In progress"?

Well it popped up again in friends-app recently (ask Kai for details) so it doesn't seem like it's 100% fixed to me. Not sure who's working on it though.

The issue with the music app was with page stacks in the flickable. What's
causing the friends app issue?

Here's the MP which re-triggered this issue in Friends, including discussion on how it was resolved:

https://code.launchpad.net/~kai-mast/friends-app/new-postview/+merge/197537

As far as I'm concerned, the "resolution" is just a workaround; really it should not be possble for the tab headers to show content behind them, I can't imagine that situation is ever desirable. It would be nice if they were more robust about hiding the content behind them so that we can avoid this confusion in the future.

Is there any of the core apps that is still affected by this, or can we close the bug for each one of them?

Terminal still seems affected, but only on Nexus 7 2013, not on Nexus 4. Bug 1288343

That seems to have come back at least for Reminders and Music. It seems that the screen is pulled to the top and shows behind the header.

I could not reproduce the issue with this code:

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    width: 800
    height: 600
    id: mainView
    useDeprecatedToolbar: false

    Tabs {
        id: tabs
        Item {
            // does this mess up stuff? nope.
        }

        Tab {
            title: i18n.tr("List view #" + index)
            page: Page {
                ListView {
                    clip: true
                    anchors.fill: parent
                    model: 20
                    delegate: ListItem.Standard {
                        iconName: "call-start"
                        text: "Item "+modelData
                    }
                }
            }
        }
    }
}

and in the latest images (>32) the bug seems to be gone in all the apps, so I am closing this bug.