Moved sidebar tabs into header bar.

For #349.  Narrow view still needs a bit of work, and the header is
getting quite cramped, but it's good enough for now.

resources/report/css/overrides.css

@@ -40,10 +40,11 @@ html /deep/ paper-item[disabled]  {
 
 /* These overrides change the colour of the tab ink effect and their underline. */
 html /deep/ paper-tabs::shadow #selectionBar {
-    background-color: #4285f4;
+    background-color: white;
+    height: 4px;
 }
 html /deep/ paper-tab::shadow #ink {
-    color: #4285f4;
+    color: #f1f1f1;
 }
 
 /* This override change the positioning of the progress dialog to adapt to content changes. */

resources/report/css/style.css

@@ -38,6 +38,10 @@ body {
 #mainToolbar paper-dropdown {
     color: black;
 }
+#sidebarTabs {
+    width: calc(33% - 68px);
+    height: 64px;
+}
 
 div[drawer] > core-tooltip {
     margin: 0 12px;
@@ -105,6 +109,9 @@ section h1 {
     font-weight: normal;
     font-size: 1.2em;
 }
+#filters {
+    padding: 0.9em 1em;
+}
 #filters div {
     padding:0.2em 0.5em;
 }
@@ -218,14 +225,11 @@ paper-progress {
 
 /* This animates the drawer toggle appearing in narrow view. */
 #drawerToggle {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s;
+    display: none;
 }
 @media screen and (max-width: 640px) {
     #drawerToggle {
-        opacity: 1;
-        visibility: visible;
+        display: block;
     }
 }
 #settingsDialog > paper-checkbox {

resources/report/js/script.js

@@ -752,9 +752,11 @@ function areSettingsValid() {
     return true;
 }
 function switchSidebarTab(evt) {
-    evt.target.nextElementSibling.selected = evt.target.selected;
-    if (evt.target.selected == 0) {
-        document.getElementById('cardsNav').lastElementChild.updateSize();
+    if (evt.detail.isSelected) {
+        document.getElementById(evt.target.selected).parentElement.selected = evt.target.selected;
+        if (evt.target.selected == 'cardsNav') {
+            document.getElementById('cardsNav').lastElementChild.updateSize();
+        }
     }
 }
 

resources/report/report.html

@@ -88,6 +88,10 @@
             </paper-dropdown>
         </paper-menu-button>
         <paper-icon-button icon="drawer" id="drawerToggle"></paper-icon-button>
+        <paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id">
+            <paper-tab data-id="cardsNav">Plugins</paper-tab>
+            <paper-tab data-id="filters">Filters</paper-tab>
+        </paper-tabs>
         <loot-dropdown-menu id="gameMenu">
             <!-- Generated game <li> elements go here. -->
         </loot-dropdown-menu>
@@ -103,11 +107,7 @@
     </core-toolbar>
     <core-drawer-panel id="container" drawerWidth="33%">
         <div drawer vertical layout>
-            <paper-tabs id="sidebarTabs" selected="0">
-                <paper-tab>Plugins</paper-tab>
-                <paper-tab>Filters</paper-tab>
-            </paper-tabs>
-            <core-animated-pages selected="0" transitions="" flex>
+            <core-animated-pages selected="cardsNav" valueattr="id" transitions="" flex>
                 <div id="cardsNav" class="tab-content" layout vertical>
                     <paper-item>
                         <a href="#summary"></a>Summary