Toolbar Height calculation to accommodate hidden tabs

Problem/Motivation

As seen in the attached screenshot, the Toolbar is overlapping the heading of the page.

The admin toolbar applies a padding to the top of the body element that should be equal to its height to ensure content is lost underneath it.

However in the following scenario the height calculation is incorrect:

The Settings Tray module adds a tab to the toolbar with a class of hidden. It's the first element inside #toolbar-bar.

Bootstrap css defines .hidden as display: none !important;

In ToolbarVisualView.js the updateToolbarHeight method sets toolbarTabOuterHeight by getting the outerHeight of the first .toolbar-tab.

var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').outerHeight() || 0;

Because the first tab is hidden (and crucially, because of bootstrap it has !important), the outerHeight is 0px and thus the body receives a top padding of 0px.

Here is an example of calculating the height on an element that is display: none!important.
https://jsfiddle.net/marmite/d9oma2e3/7/

The jQuery documentation for outerHeight says:
The value reported by .outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .outerHeight(). jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

Proposed resolution

Perhaps just ensure the tab it selects to get the height isn't hidden.

var toolbarTabOuterHeight = $('#toolbar-bar').find('.toolbar-tab').filter(':visible').outerHeight() || 0;