If the label of a tab changes in paper-tabs, the selectionBar doesn't accommodate that change

[fejesjoco]

Description

Set up a paper-tabs, then change the title of a tab.

Expected outcome

The underline follows the changes.

Actual outcome

The underline does not follow the changes.

Live Demo

https://jsbin.com/demupiqiki/edit?html,output If you change the script to fire immediately instead of a timer, you'll see it looks very differently.

Browsers Affected

Tested Chrome only but probably all of them.

[fejesjoco]

One way to solve it would be to refactor the underline so that it is placed inside the paper-tab, therefore it will follow DOM changes automatically. Keeping the current architecture, DOM observers are needed to trigger underline resizing when the tabs change.

[fejesjoco]

There is a much more evil scenario. Paper-tabs uses the roboto font, which is downloaded from some google fonts server. Before a font is downloaded, Chrome can only guess the size of the text. It is possible that paper-tabs is rendered before the font is there, so you can either see that the title is empty or uses some weird default font. And then the font gets downloaded, the text and its size changes in paper-tabs, but the underline doesn't follow that. We're very good at dealing with flakes in our tests but this is a race condition in paper-tabs so it must be fixed at the source.