Tab bar in Firefox displays unnecessary dotted focus outline

[Rob Cresswell]

The tab bar displays the default dotted outline in Firefox - this is not needed because there is already CSS for :focus.

This could be fixed by adding 'outline:none' to openstack_dashboard/static/dashboard/scss/horizon.scss in the tab bar styling (around L980)

[Rob Cresswell (robcresswell-deactivatedaccount)]

Here's an example of the dotted lines on the tab bar

[Rob Cresswell (robcresswell-deactivatedaccount)]

Hey Nikunj,

As a fairly established bug fixer in the dashboard community, it would be good if you could leave some of the low-hanging-fruit for new members to attempt. This is far from a critical fix, and it's useful to have some low-hanging-fruit for people to learn the process of contributing and improving their patches.

Thanks

[Ganesh (ganeshna)]

Hi Rob,

I am a newbie. Attached is the one I see in my local devstack setup. I don't see Volume/Volume Types/Volume Snapshots in a single tab as you have mentioned in your attachment.

Please let me know what I am missing to repro this.

Thanks,
Ganesh

[Ganesh (ganeshna)]

Hi,

I am able to reproduce this issue in firefox (and not in Safari) with both Systems Info tab and Volumes tab. Please find attached the screenshots.

Have started working on the fix.

Thanks,
Ganesh

[Ganesh (ganeshna)]

Fix proposed:

https://review.openstack.org/174808

[Ganesh (ganeshna)]

Hi,

Please review and give +2, so that the changes can be merged.

Thanks,
Ganesh

[Rob Cresswell (robcresswell-deactivatedaccount)]

Hi Ganesh,

It's generally considered good manners to give cores at least a couple of weeks to get round to reviewing code. Please don't add to the number of emails by asking for reviews. Also, as long as the bug is marked properly in the commit message, the status will automatically update to "In progress" and link to the correct gerrit patch, so those comments are also not needed.

Thanks for the fix! :)

[OpenStack Infra (hudson-openstack)]

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

commit 2da71e08a8c959b32e646300581a42bb19307455
Author: Ganesh Narayanan <email address hidden>
Date: Fri Apr 17 04:06:06 2015 -0700

    Fix unnecessary dotted focus outline in tab bar

    In Firefox, the tab bar in "Volumes" and "System Information" pages
    displays unnecessary dotted focus outline. This is not the case with
    other browsers like Chrome or Safari. This is fixed by adding
    'outline:none' to :focus in the tab bar styling (there is already CSS
    for :focus).

    Change-Id: I3f7065003d3c0ec20fa1d3f0189e208bb36e9b94
    Closes-Bug: 1431341

[Ganesh (ganeshna)]

Hi Rob,

Sure, I will make sure I don't ping the reviewers going forward :) Thanks for the review.

~Ganesh