MDL-39388 bootstrapbase: Add bootstrap tab renderer

This adds a renderer that outputs standard bootstrap HTML for tabs,
deletes styles that were previously required to make Moodle tab HTML
superficially resemble Bootstrap, and tweak the responsive code that
makes tabs stack on phones to account for the change too.

theme/bootstrapbase/less/moodle.less

@@ -31,7 +31,6 @@ body {
 // New Moodle stuff that builds on Bootstrap.
 @import "moodle/blocks";
 @import "moodle/forms";
-@import "moodle/tabs";
 @import "moodle/modules";
 @import "moodle/backup-restore";
 @import "moodle/tables";

theme/bootstrapbase/less/moodle/responsive.less

@@ -62,27 +62,33 @@
  }
 
 @media (max-width: 480px) {
-    // copied from tabs.less stacked-navs
-    .tabtree > ul {
-        border: none;
-    }
-    .tabtree > ul > li {
+    // make tabs act like nav-stacked
+    // (mostly) copied from bootstrap/navs.less
+    .nav-tabs > li {
         float: none;
     }
-    .tabtree > ul > li > a {
+    .nav-tabs > li > a {
+        margin-right: 0; // no need for the gap between nav items
+    }
+    .nav-tabs {
+        border-bottom: 0;
+    }
+    .nav-tabs > li > a {
         border: 1px solid #ddd;
         .border-radius(0);
     }
-    .tabtree > ul > li.first > a {
+    .nav-tabs > .active > a,
+    .nav-tabs > .active > a:hover {
+        border: 1px solid #ddd;
+    }
+    .nav-tabs > li:first-child > a {
         .border-top-radius(4px);
     }
-    .tabtree > ul > li.last > a,
-    .tabtree > ul > li.last > a:hover {
-        border: 1px solid #ddd;
+    .nav-tabs > li:last-child > a {
         .border-bottom-radius(4px);
     }
-    .tabtree > ul > li > a:hover,
-    .tabtree > ul > li > a:focus {
+    .nav-tabs > li > a:hover,
+    .nav-tabs > li > a:focus {
         border-color: #ddd;
         z-index: 2;
     }

theme/bootstrapbase/less/moodle/tabs.less

@@ -1,65 +0,0 @@
-/* tabs.less */
-// This is an opinionated file. It intentionally doesn't add code if it's
-// only purpose is to support some of the wackier features of the
-// Moodle tabs API i.e. having the current tab name also be a link,
-// having multiple selected tabs at the same time, or having disabled tabs.
-// There's some code in core that suggests these features are used, but some manual
-// testing suggests they aren't. Some bugs to follow on those issues.
-
-.tabtree {
-    margin: 1em 0;
-}
-.tabtree ul {
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1px solid #ddd;
-    border-top: 0;
-    padding: 0;
-    margin: 0;
-}
-.tabtree:after,
-.tabtree:before,
-.tabtree ul:before,
-.tabtree ul:after {
-  display: table;
-  content: "";
-}
-.tabtree:after,
-.tabtree ul:after {
-  clear: both;
-}
-.tabtree li {
-  display: block;
-  float: left;
-  margin-bottom: -1px;
-}
-.tabtree a {
-  display: block;
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-right: 2px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  text-decoration: none;
-  line-height: @baseLineHeight;
-  border: 1px solid transparent;
-  .border-radius(4px 4px 0 0);
-  &:hover,
-  &:focus {
-    border-color: @grayLighter @grayLighter #ddd;
-    background-color: @grayLighter;
-    text-decoration: none;
-  }
-}
-.tabtree .here > a,
-.tabtree .here > a:hover,
-.tabtree .here > a:focus {
-  color: @gray;
-  background-color: @bodyBackground;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-.tabtree .here .empty { // empty second level
-    display: none;
-}

theme/bootstrapbase/renderers/core.php

@@ -161,4 +161,43 @@ class theme_bootstrapbase_core_renderer extends core_renderer {
         }
         return $content;
     }
+
+    /**
+     * Renders tabtree
+     *
+     * @param tabtree $tabtree
+     * @return string
+     */
+    protected function render_tabtree(tabtree $tabtree) {
+        if (empty($tabtree->subtree)) {
+            return '';
+        }
+        $firstrow = $secondrow = '';
+        foreach ($tabtree->subtree as $tab) {
+            $firstrow .= $this->render($tab);
+            if (($tab->selected || $tab->activated) && !empty($tab->subtree) && $tab->subtree !== array()) {
+                $secondrow = $this->tabtree($tab->subtree);
+            }
+        }
+        return html_writer::tag('ul', $firstrow, array('class' => 'nav nav-tabs')) . $secondrow;
+    }
+
+    /**
+     * Renders tabobject (part of tabtree)
+     *
+     * This function is called from {@link core_renderer::render_tabtree()}
+     * and also it calls itself when printing the $tabobject subtree recursively.
+     *
+     * @param tabobject $tabobject
+     * @return string HTML fragment
+     */
+    protected function render_tabobject(tabobject $tab) {
+        if ($tab->selected or $tab->activated) {
+            return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'active'));
+        } else if ($tab->inactive) {
+            return html_writer::tag('li', html_writer::tag('a', $tab->text), array('class' => 'disabled'));
+        } else {
+            return html_writer::tag('li', html_writer::tag('a', $tab->text, array('href' => $tab->link)));
+        }
+    }
 }