MAGETWO-32315: Side Panels

- CR tabs updates

Author: Oleg Zinoviev

app/code/Magento/Backend/view/adminhtml/templates/widget/tabs.phtml

@@ -11,11 +11,11 @@
 <?php if (!empty($tabs)): ?>
 
 <div class="admin__scope">
-    <div class="admin__page-nav" id="<?php echo $block->getId() ?>">
+    <div class="admin__page-nav" data-role="container" id="<?php echo $block->getId() ?>">
         <?php if ($block->getTitle()): ?>
-            <div class="admin__page-nav-title" <?php echo $block->getUiId('title') ?>>
+            <div class="admin__page-nav-title" data-role="title" <?php echo $block->getUiId('title') ?>>
                 <strong><?php echo $block->getTitle() ?></strong>
-                <span class="admin__page-nav-title-messages"></span>
+                <span data-role="title-messages" class="admin__page-nav-title-messages"></span>
             </div>
         <?php endif ?>
         <ul <?php echo $block->getUiId('tab', $block->getId()) ?> class="<?php echo $block->getIsHoriz() ? 'tabs-horiz' : 'tabs admin__page-nav-items' ?>">
@@ -34,7 +34,7 @@
 
                        <span><?php echo $block->getTabLabel($_tab); ?></span>
 
-                       <span class="admin__page-nav-item-messages">
+                       <span class="admin__page-nav-item-messages" data-role="item-messages">
                            <span class="admin__page-nav-item-message _changed">
                                <span class="admin__page-nav-item-message-icon"></span>
                                <span class="admin__page-nav-item-message-tooltip">

app/code/Magento/Catalog/view/adminhtml/templates/product/edit/tabs.phtml

@@ -32,6 +32,7 @@
             ?>
 
             <div class="admin__page-nav <?php if (!$isBasic): ?> <?php echo '_collapsed';?> <?php endif;?>"
+                data-role="container"
                 id="<?php echo $tabGroupId ?>"
                 <?php if (!$isBasic): ?>
                     data-mage-init='{"collapsible":{
@@ -49,7 +50,7 @@
                         <strong>
                             <?php echo $isBasic ? __('Basic Settings') : __('Advanced Settings') ?>
                         </strong>
-                        <span class="admin__page-nav-title-messages"></span>
+                        <span data-role="title-messages" class="admin__page-nav-title-messages"></span>
                     </div>
                 </div>
 
@@ -71,7 +72,7 @@
 
                                 <span><?php echo $block->escapeHtml($block->getTabLabel($_tab)); ?></span>
 
-                                <span class="admin__page-nav-item-messages">
+                                <span class="admin__page-nav-item-messages" data-role="item-messages">
                                    <span class="admin__page-nav-item-message _changed">
                                        <span class="admin__page-nav-item-message-icon"></span>
                                        <span class="admin__page-nav-item-message-tooltip">

lib/web/mage/backend/tabs.js

@@ -292,14 +292,14 @@
          */
         _updateNavTitleMessages: function(e, messageType) {
             var curAnchor = this.anchors.eq(e.data.index),
-                curItem = curAnchor.parents('.admin__page-nav').find('.admin__page-nav-title'),
-                curItemMessages = curItem.find('.admin__page-nav-title-messages'),
+                curItem = curAnchor.parents('[data-role="container"]').find('[data-role="title"]'),
+                curItemMessages = curItem.find('[data-role="title-messages"]'),
                 curItemMessage,
                 activeClass = "_active";
 
             if ((curItemMessages).is(":empty")) {
                 curAnchor
-                    .find('.admin__page-nav-item-messages')
+                    .find('[data-role="item-messages"]')
                     .clone()
                     .appendTo(curItemMessages);
             }