From aa4953905967b77402e20b72a38ee1042fa594c7 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Mon, 28 Nov 2016 18:24:31 -0800
Subject: [PATCH] Remove unavailable blocks from toolbox modal. Hide
 unnecessary category name in a toolbox without categories.

---
 accessible/block-options-modal.component.js |  5 +--
 accessible/toolbox-modal.component.js       | 36 +++++++++---------
 accessible/toolbox-modal.service.js         | 41 +++++++++++++--------
 3 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/accessible/block-options-modal.component.js b/accessible/block-options-modal.component.js
index e44c15244..6867844da 100644
--- a/accessible/block-options-modal.component.js
+++ b/accessible/block-options-modal.component.js
@@ -129,6 +129,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
 
           setTimeout(function() {
             document.getElementById('blockOptionsModal').focus();
+            that.focusOnOption(that.activeActionButtonIndex);
           }, 150);
         }
       );
@@ -136,9 +137,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
   ],
   focusOnOption: function(index) {
     var button = document.getElementById(this.getOptionId(index));
-    if (button) {
-      button.focus();
-    }
+    button.focus();
   },
   // Returns the ID for the corresponding option button.
   getOptionId: function(index) {
diff --git a/accessible/toolbox-modal.component.js b/accessible/toolbox-modal.component.js
index 41d445d93..9100eb946 100644
--- a/accessible/toolbox-modal.component.js
+++ b/accessible/toolbox-modal.component.js
@@ -34,14 +34,12 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
           <h3>Select a block...</h3>
 
           <div *ngFor="#toolboxCategory of toolboxCategories; #categoryIndex=index">
-            <h4>{{toolboxCategory.categoryName}}</h4>
+            <h4 *ngIf="toolboxCategory.categoryName">{{toolboxCategory.categoryName}}</h4>
             <div class="blocklyModalButtonContainer"
                  *ngFor="#block of toolboxCategory.blocks; #blockIndex=index">
               <button [id]="getOptionId(getOverallIndex(categoryIndex, blockIndex))"
                       (click)="selectBlock(getBlock(categoryIndex, blockIndex))"
-                      [ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}"
-                      [attr.disabled]="isBlockAvailable(getBlock(categoryIndex, blockIndex)) ? undefined : 'disabled'"
-                      [attr.aria-disabled]="!isBlockAvailable(getBlock(categoryIndex, blockIndex))">
+                      [ngClass]="{activeButton: activeButtonIndex == getOverallIndex(categoryIndex, blockIndex)}">
                 {{getBlockDescription(block)}}
               </button>
             </div>
@@ -76,22 +74,26 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
 
       this.modalIsVisible = false;
       this.toolboxCategories = [];
+      this.onSelectBlockCallback = null;
+      this.onDismissCallback = null;
+
       this.firstBlockIndexes = [];
       this.activeButtonIndex = 0;
-      this.totalNumBlocks = null;
-      this.isBlockAvailable = null;
+      this.totalNumBlocks = 0;
 
       var that = this;
       this.toolboxModalService.registerPreShowHook(
         function(
-            toolboxCategories, isBlockAvailable, onSelectBlockCallback,
-            onDismissCallback) {
+            toolboxCategories, onSelectBlockCallback, onDismissCallback) {
           that.modalIsVisible = true;
           that.toolboxCategories = toolboxCategories;
-          that.isBlockAvailable = isBlockAvailable;
           that.onSelectBlockCallback = onSelectBlockCallback;
           that.onDismissCallback = onDismissCallback;
 
+          that.firstBlockIndexes = [];
+          that.activeButtonIndex = 0;
+          that.totalNumBlocks = 0;
+
           var cumulativeIndex = 0;
           that.toolboxCategories.forEach(function(category) {
             that.firstBlockIndexes.push(cumulativeIndex);
@@ -107,8 +109,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
               evt.preventDefault();
               evt.stopPropagation();
             },
-            // Enter key: selects an action, performs it, and closes the
-            // modal.
+            // Enter key: selects an action, performs it, and closes the modal.
             '13': function(evt) {
               evt.preventDefault();
               evt.stopPropagation();
@@ -142,7 +143,7 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
               } else {
                 that.activeButtonIndex--;
               }
-              that.focusOnOptionIfPossible(that.activeButtonIndex);
+              that.focusOnOption(that.activeButtonIndex);
             },
             // Down key: navigates to the next item in the list.
             '40': function(evt) {
@@ -152,12 +153,13 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
               } else {
                 that.activeButtonIndex++;
               }
-              that.focusOnOptionIfPossible(that.activeButtonIndex);
+              that.focusOnOption(that.activeButtonIndex);
             }
           });
 
           setTimeout(function() {
             document.getElementById('toolboxModal').focus();
+            that.focusOnOption(that.activeButtonIndex);
           }, 150);
         }
       );
@@ -179,13 +181,9 @@ blocklyApp.ToolboxModalComponent = ng.core.Component({
     return this.utilsService.getBlockDescription(block);
   },
   // Focuses on the button represented by the given index.
-  focusOnOptionIfPossible: function(index) {
+  focusOnOption: function(index) {
     var button = document.getElementById(this.getOptionId(index));
-    if (!button.disabled) {
-      button.focus();
-    } else {
-      document.activeElement.blur();
-    }
+    button.focus();
   },
   // Returns the ID for the corresponding option button.
   getOptionId: function(index) {
diff --git a/accessible/toolbox-modal.service.js b/accessible/toolbox-modal.service.js
index 7b6adbfbf..8256985f7 100644
--- a/accessible/toolbox-modal.service.js
+++ b/accessible/toolbox-modal.service.js
@@ -37,7 +37,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
 
       this.modalIsShown = false;
 
-      this.isBlockAvailable = null;
+      this.selectedToolboxCategories = null;
       this.onSelectBlockCallback = null;
       this.onDismissCallback = null;
       this.preShowHook = function() {
@@ -45,13 +45,13 @@ blocklyApp.ToolboxModalService = ng.core.Class({
             'A pre-show hook must be defined for the toolbox modal before it ' +
             'can be shown.');
       };
-      this.toolboxCategories = [];
 
       // Populate the toolbox categories.
+      this.allToolboxCategories = [];
       var toolboxXmlElt = document.getElementById('blockly-toolbox-xml');
       var toolboxCategoryElts = toolboxXmlElt.getElementsByTagName('category');
       if (toolboxCategoryElts.length) {
-        this.toolboxCategories = Array.from(toolboxCategoryElts).map(
+        this.allToolboxCategories = Array.from(toolboxCategoryElts).map(
           function(categoryElt) {
             var workspace = new Blockly.Workspace();
             Blockly.Xml.domToWorkspace(categoryElt, workspace);
@@ -73,8 +73,8 @@ blocklyApp.ToolboxModalService = ng.core.Class({
             Blockly.Xml.domToBlock(workspace, topLevelNode);
           });
 
-          that.toolboxCategories = [{
-            categoryName: 'Available Blocks',
+          that.allToolboxCategories = [{
+            categoryName: '',
             blocks: workspace.topBlocks_
           }];
         });
@@ -84,16 +84,16 @@ blocklyApp.ToolboxModalService = ng.core.Class({
   registerPreShowHook: function(preShowHook) {
     this.preShowHook = function() {
       preShowHook(
-          this.toolboxCategories, this.isBlockAvailable,
-          this.onSelectBlockCallback, this.onDismissCallback);
+          this.selectedToolboxCategories, this.onSelectBlockCallback,
+          this.onDismissCallback);
     };
   },
   isModalShown: function() {
     return this.modalIsShown;
   },
   showModal_: function(
-      isBlockAvailable, onSelectBlockCallback, onDismissCallback) {
-    this.isBlockAvailable = isBlockAvailable;
+      selectedToolboxCategories, onSelectBlockCallback, onDismissCallback) {
+    this.selectedToolboxCategories = selectedToolboxCategories;
     this.onSelectBlockCallback = onSelectBlockCallback;
     this.onDismissCallback = onDismissCallback;
 
@@ -105,9 +105,22 @@ blocklyApp.ToolboxModalService = ng.core.Class({
   },
   showToolboxModalForAttachToMarkedConnection: function(sourceButtonId) {
     var that = this;
-    this.showModal_(function(block) {
-      return that.clipboardService.canBeAttachedToMarkedConnection(block);
-    }, function(block) {
+
+    var selectedToolboxCategories = [];
+    this.allToolboxCategories.forEach(function(toolboxCategory) {
+      var selectedBlocks = toolboxCategory.blocks.filter(function(block) {
+        return that.clipboardService.canBeAttachedToMarkedConnection(block);
+      });
+
+      if (selectedBlocks.length > 0) {
+        selectedToolboxCategories.push({
+          categoryName: toolboxCategory.categoryName,
+          blocks: selectedBlocks
+        });
+      }
+    });
+
+    this.showModal_(selectedToolboxCategories, function(block) {
       var blockDescription = that.utilsService.getBlockDescription(block);
 
       // Clean up the active desc for the destination tree.
@@ -140,9 +153,7 @@ blocklyApp.ToolboxModalService = ng.core.Class({
   },
   showToolboxModalForCreateNewGroup: function(sourceButtonId) {
     var that = this;
-    this.showModal_(function(block) {
-      return true;
-    }, function(block) {
+    this.showModal_(this.allToolboxCategories, function(block) {
       var blockDescription = that.utilsService.getBlockDescription(block);
       var xml = Blockly.Xml.blockToDom(block);
       var newBlockId = Blockly.Xml.domToBlock(blocklyApp.workspace, xml).id;