Allow code demo to shrink more (#3345)

If the width goes below a certain threshold,
some tabs are replaced with a single tab with a select menu.

demos/code/code.js

@@ -179,6 +179,15 @@ Code.changeLanguage = function() {
       window.location.host + window.location.pathname + search;
 };
 
+/**
+ * Changes the output language by clicking the tab matching
+ * the selected language in the codeMenu.
+ */
+Code.changeCodingLanguage = function() {
+  var codeMenu = document.getElementById('code_menu');
+  Code.tabClick(codeMenu.options[codeMenu.selectedIndex].value);
+}
+
 /**
  * Bind a function to a button's click event.
  * On touch enabled browsers, ontouchend is treated as equivalent to onclick.
@@ -238,6 +247,14 @@ Code.LANG = Code.getLang();
  */
 Code.TABS_ = ['blocks', 'javascript', 'php', 'python', 'dart', 'lua', 'xml'];
 
+/**
+ * List of tab names with casing, for display in the UI.
+ * @private
+ */
+Code.TABS_DISPLAY_ = [
+  'Blocks', 'JavaScript', 'PHP', 'Python', 'Dart', 'Lua', 'XML',
+];
+
 Code.selected = 'blocks';
 
 /**
@@ -246,7 +263,7 @@ Code.selected = 'blocks';
  */
 Code.tabClick = function(clickedName) {
   // If the XML tab was open, save and render the content.
-  if (document.getElementById('tab_xml').className == 'tabon') {
+  if (document.getElementById('tab_xml').classList.contains('tabon')) {
     var xmlTextarea = document.getElementById('content_xml');
     var xmlText = xmlTextarea.value;
     var xmlDom = null;
@@ -266,25 +283,42 @@ Code.tabClick = function(clickedName) {
     }
   }
 
-  if (document.getElementById('tab_blocks').className == 'tabon') {
+  if (document.getElementById('tab_blocks').classList.contains('tabon')) {
     Code.workspace.setVisible(false);
   }
   // Deselect all tabs and hide all panes.
   for (var i = 0; i < Code.TABS_.length; i++) {
     var name = Code.TABS_[i];
-    document.getElementById('tab_' + name).className = 'taboff';
+    var tab = document.getElementById('tab_' + name);
+    tab.classList.add('taboff');
+    tab.classList.remove('tabon');
     document.getElementById('content_' + name).style.visibility = 'hidden';
   }
 
   // Select the active tab.
   Code.selected = clickedName;
-  document.getElementById('tab_' + clickedName).className = 'tabon';
+  var selectedTab = document.getElementById('tab_' + clickedName);
+  selectedTab.classList.remove('taboff');
+  selectedTab.classList.add('tabon');
   // Show the selected pane.
   document.getElementById('content_' + clickedName).style.visibility =
       'visible';
   Code.renderContent();
+  // The code menu tab is on if the blocks tab is off.
+  var codeMenuTab = document.getElementById('tab_code');
   if (clickedName == 'blocks') {
     Code.workspace.setVisible(true);
+    codeMenuTab.className = 'taboff';
+  } else {
+    codeMenuTab.className = 'tabon';
+  }
+  // Sync the menu's value with the clicked tab value if needed.
+  var codeMenu = document.getElementById('code_menu');
+  for (var i = 0; i < codeMenu.options.length; i++) {
+    if (codeMenu.options[i].value == clickedName) {
+      codeMenu.selectedIndex = i;
+      break;
+    }
   }
   Blockly.svgResize(Code.workspace);
 };
@@ -455,6 +489,14 @@ Code.init = function() {
     Code.bindClick('tab_' + name,
         function(name_) {return function() {Code.tabClick(name_);};}(name));
   }
+  Code.bindClick('tab_code', function(e) {
+    if (e.target !== document.getElementById('tab_code')) {
+      // Prevent clicks on child codeMenu from triggering a tab click.
+      return;
+    }
+    Code.changeCodingLanguage();
+  });
+
   onresize();
   Blockly.svgResize(Code.workspace);
 
@@ -497,6 +539,14 @@ Code.initLanguage = function() {
   }
   languageMenu.addEventListener('change', Code.changeLanguage, true);
 
+  // Populate the coding language selection menu.
+  var codeMenu = document.getElementById('code_menu');
+  codeMenu.options.length = 0;
+  for (var i = 1; i < Code.TABS_.length; i++) {
+    codeMenu.options.add(new Option(Code.TABS_DISPLAY_[i], Code.TABS_[i]));
+  }
+  codeMenu.addEventListener('change', Code.changeCodingLanguage);
+
   // Inject language strings.
   document.title += ' ' + MSG['title'];
   document.getElementById('title').textContent = MSG['title'];

demos/code/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="google" value="notranslate">
   <title>Blockly Demo:</title>
   <link rel="stylesheet" href="style.css">
@@ -33,18 +34,22 @@
         <table width="100%">
           <tr id="tabRow" height="1em">
             <td id="tab_blocks" class="tabon">...</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_javascript" class="taboff tab_collapse">JavaScript</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_python" class="taboff tab_collapse">Python</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_php" class="taboff tab_collapse">PHP</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_lua" class="taboff tab_collapse">Lua</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_dart" class="taboff tab_collapse">Dart</td>
+            <td class="tabmin tab_collapse">&nbsp;</td>
+            <td id="tab_xml" class="taboff tab_collapse">XML</td>
             <td class="tabmin">&nbsp;</td>
-            <td id="tab_javascript" class="taboff">JavaScript</td>
-            <td class="tabmin">&nbsp;</td>
-            <td id="tab_python" class="taboff">Python</td>
-            <td class="tabmin">&nbsp;</td>
-            <td id="tab_php" class="taboff">PHP</td>
-            <td class="tabmin">&nbsp;</td>
-            <td id="tab_lua" class="taboff">Lua</td>
-            <td class="tabmin">&nbsp;</td>
-            <td id="tab_dart" class="taboff">Dart</td>
-            <td class="tabmin">&nbsp;</td>
-            <td id="tab_xml" class="taboff">XML</td>
+            <td id="tab_code" class="taboff">
+              <select id="code_menu"></select>
+            </td>
             <td class="tabmax">
               <button id="trashButton" class="notext" title="...">
                 <img src='../../media/1x1.gif' class="trash icon21">

demos/code/style.css

@@ -99,6 +99,9 @@ td.tabmax {
 html[dir=rtl] td.tabmax {
   text-align: left;
 }
+#tab_code {
+  display: none;
+}
 
 table {
   border-collapse: collapse;
@@ -162,3 +165,12 @@ button {
 .run {
   background-position: -42px 0px;
 }
+
+@media (max-width: 710px) {
+  .tab_collapse {
+    display: none;
+  }
+  #tab_code {
+    display: table-cell;
+  }
+}