U4-7045 - Bootstrap tabs with Angular in back office has CPU/performance issues

Created by Shannon Deminick 31 Aug 2015, 14:25:21 Updated by Kevin Giszewski 15 Sep 2015, 09:33:45

Relates to: U4-6908

Relates to: U4-7033

The way that bootstrap tabs were being handled in Angular was incorrect and causing CPU performance issues.

This has been fixed in rev: d1bed54cf1d77e2ea7d4e5cfe072d158d4cc7988

previously there was an infinite angular watch on the tabs collection which would execute for every digest and call a method to re-reset the visible tabs by direct HTML modifications. Not only was this the incorrect way to deal with bootstrap tabs but it was also performance issues.

This may cause some issues for developers who are using the tab constructs when there are actually no tabs. Examples of this in the core are: the data type editor and recycle bin views.

For example, the content recycle bin markup used to look like:

<umb-panel ng-controller="Umbraco.Editors.Content.RecycleBinController">
    <umb-header>
        <div class="umb-headline-editor-wrapper span12">
            <h1><localize key="general_recycleBin">Recycle Bin</localize></h1>
        </div>
    </umb-header>
    <umb-tab-view>
        <umb-tab id="tabRecycleBin" rel="RecycleBin">
            <umb-pane>
                <div ng-include="listViewPath"></div>
            </umb-pane>
        </umb-tab>
    </umb-tab-view>
</umb-panel>

With the new changes, the markup in the umb-tab would not be displayed because there actually isn't any tabs. To work around this behavior, if using the tab markup, you can explicitly set the umb-tab element to be display:block;, Example:

<umb-panel ng-controller="Umbraco.Editors.Content.RecycleBinController">
    <umb-header>
        <div class="umb-headline-editor-wrapper span12">
            <h1><localize key="general_recycleBin">Recycle Bin</localize></h1>
        </div>
    </umb-header>
    <umb-tab-view>
        <umb-tab id="tabRecycleBin" rel="RecycleBin" style="display: block;">
            <umb-pane>
                <div ng-include="listViewPath"></div>
            </umb-pane>
        </umb-tab>
    </umb-tab-view>
</umb-panel>

Comments

Priority: Normal

Type: Bug

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: False

Fix Submitted:

Affected versions:

Due in version: 7.3.0

Sprint:

Story Points:

Cycle: