Left nav panel groups flash open before being hidden

[Janet Yu]

When the page is loading for a panel in Chrome (at least version 39.0.2171.95 (64-bit)), all the panel groups not containing the active panel flash open before being hidden, which is distracting and looks buggy.

[Janet Yu (jwy)]

Fix proposed to branch: master
Review: https://review.openstack.org/145654

[wonderfan (wonderfan2000)]

In your local settings, there should have default dashboard and panel. It is no sense for your changes

[Janet Yu (jwy)]

@wonderfan: I'm not sure how the default dashboard and panel are related to this. The root cause is that in the left nav template, all panel groups are rendered, then all the ones not containing the active panel are hidden by JavaScript. In the time between the page having finished loading and the JavaScript running to hide the panels, all the panels are visible for just a moment.

[Janet Yu (jwy)]

Here is an example. The screenshot in comment #4 shows what the leftnav looks like for the Compute Overview page, which is what is expected. Only the panels in the Compute panel group are shown. The screenshot in this comment shows what appears in the Chrome browser. The Network and Object Store panel groups (highlighted in the red rectangle in the screenshot) are momentarily visible to the user before being hidden.

[Rob Cresswell (robcresswell-deactivatedaccount)]

Confirmed - Chrome 40.0.2214.115 (64-bit) / Ubuntu 14.10

[Rob Cresswell (robcresswell-deactivatedaccount)]

@Janet - best thing to do here is add a "Steps to reproduce" section in your bug report. Make it very verbose, so people understand exactly how to trigger the bug.

[Janet Yu (jwy)]

@Rob: Thanks for the suggestion. Here is what I did for my example above:

1. Log in to Horizon in a Chrome web browser.
2. In the navigational menu on the lefthand side of the page, under Project > Compute, click on the link for the Overview panel.
3. Observe the page as it is loading and rendering. Note that the links for the panels under Project > Network and Project > Object Store are momentarily visible (namely, Network Topology, Networks, Routers, Load Balancers, and Containers - see image in comment #5).
4. After the page has finished rendering, note that the panel links that were momentarily visible are now hidden (see image in comment #4).

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/145654
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=2f65ee7305abc0c737406fc402ac8fb7eaf3ee79
Submitter: Jenkins
Branch: master

commit 2f65ee7305abc0c737406fc402ac8fb7eaf3ee79
Author: Janet Yu <email address hidden>
Date: Sun Jan 11 12:05:53 2015 -0800

    Prevent flash of left nav panels when loading page

    In the left nav, only the panel group containing the panel for the current page
    should be expanded. However, in the Chrome browser, all other panels in the
    same dashboard are momentarily shown before being hidden. The flash of content
    happens in the time between the page's template rendering the panels and the
    JavaScript being run to hide the non-active panels. Prevent the flash by hiding
    non-active panels in the template instead of using JavaScript to hide the
    panels later.

    Closes-Bug: 1408513
    Change-Id: I8fde47f4a0d6b7415998cf84fa4974bbe39728eb