Move away from using a common modal service, since the block options and the toolbox modals are going to end up behaving fairly differently.

accessible/app.component.js

@@ -55,7 +55,7 @@ blocklyApp.AppView = ng.core.Component({
   providers: [
       blocklyApp.ClipboardService, blocklyApp.NotificationsService,
       blocklyApp.TreeService, blocklyApp.UtilsService,
-      blocklyApp.AudioService, blocklyApp.ModalService,
+      blocklyApp.AudioService, blocklyApp.BlockOptionsModalService,
       blocklyApp.KeyboardInputService]
 })
 .Class({

accessible/block-options-modal.component.js

@@ -26,12 +26,12 @@
 blocklyApp.BlockOptionsModalComponent = ng.core.Component({
   selector: 'blockly-block-options-modal',
   template: `
-    <div *ngIf="modalIsVisible" id="modalId" role="dialog" tabindex="-1">
+    <div *ngIf="modalIsVisible" id="blockOptionsModal" role="dialog" tabindex="-1">
       <div (click)="hideModal()" class="blocklyModalCurtain">
         <!-- The $event.stopPropagation() here prevents the modal from
         closing when its interior is clicked. -->
         <div class="blocklyModal" (click)="$event.stopPropagation()" role="document">
-          <h3>{{modalHeaderHtml}}</h3>
+          <h3>Block Options</h3>
 
           <div class="blocklyModalButtonContainer"
                *ngFor="#buttonInfo of actionButtonsInfo; #i=index">
@@ -84,27 +84,23 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
 })
 .Class({
   constructor: [
-    blocklyApp.ModalService, blocklyApp.KeyboardInputService,
+    blocklyApp.BlockOptionsModalService, blocklyApp.KeyboardInputService,
     blocklyApp.AudioService,
-    function(modalService_, keyboardInputService_, audioService_) {
+    function(blockOptionsModalService_, keyboardInputService_, audioService_) {
-      this.modalService = modalService_;
+      this.blockOptionsModalService = blockOptionsModalService_;
       this.keyboardInputService = keyboardInputService_;
       this.audioService = audioService_;
 
       this.modalIsVisible = false;
-      this.modalHeaderHtml = '';
       this.actionButtonsInfo = [];
       this.activeActionButtonIndex = 0;
-      this.onHideCallback = null;
 
       var that = this;
-      this.modalService.registerPreShowHook(
+      this.blockOptionsModalService.registerPreShowHook(
-        function(newModalHeaderHtml, newActionButtonsInfo, onHideCallback) {
+        function(newActionButtonsInfo) {
           that.modalIsVisible = true;
-          that.modalHeaderHtml = newModalHeaderHtml;
           that.actionButtonsInfo = newActionButtonsInfo;
           that.activeActionButtonIndex = 0;
-          that.onHideCallback = onHideCallback;
           that.keyboardInputService.setOverride({
             // Tab key: no-op.
             '9': function(evt) {
@@ -156,7 +152,7 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
           });
 
           setTimeout(function() {
-            document.getElementById('modalId').focus();
+            document.getElementById('blockOptionsModal').focus();
           }, 150);
         }
       );
@@ -184,6 +180,6 @@ blocklyApp.BlockOptionsModalComponent = ng.core.Component({
   hideModal: function() {
     this.modalIsVisible = false;
     this.keyboardInputService.clearOverride();
-    this.modalService.hideModal();
+    this.blockOptionsModalService.hideModal();
   }
 });

accessible/block-options-modal.service.js

@@ -18,30 +18,27 @@
  */
 
 /**
- * @fileoverview Angular2 Service that stores the content for custom modals.
+ * @fileoverview Angular2 Service for the block options modal.
- * This is a singleton service.
  *
  * @author sll@google.com (Sean Lip)
  */
 
-blocklyApp.ModalService = ng.core.Class({
+blocklyApp.BlockOptionsModalService = ng.core.Class({
   constructor: [function() {
-    this.modalHeaderHtml = '';
     this.actionButtonsInfo = [];
-    this.preShowHookHtml = null;
+    this.preShowHook = null;
     this.modalIsShown = false;
     this.onHideCallback = null;
   }],
   registerPreShowHook: function(preShowHook) {
     this.preShowHook = function() {
-      preShowHook(this.modalHeaderHtml, this.actionButtonsInfo);
+      preShowHook(this.actionButtonsInfo);
     };
   },
   isModalShown: function() {
     return this.modalIsShown;
   },
-  showModal: function(modalHeaderHtml, actionButtonsInfo, onHideCallback) {
+  showModal: function(actionButtonsInfo, onHideCallback) {
-    this.modalHeaderHtml = modalHeaderHtml;
     this.actionButtonsInfo = actionButtonsInfo;
     this.onHideCallback = onHideCallback;
 

accessible/toolbox.component.js

@@ -73,12 +73,11 @@ blocklyApp.ToolboxComponent = ng.core.Component({
 })
 .Class({
   constructor: [
-    blocklyApp.TreeService, blocklyApp.UtilsService, blocklyApp.ModalService,
+    blocklyApp.TreeService, blocklyApp.UtilsService,
-    function(_treeService, _utilsService, _modalService) {
+    function(_treeService, _utilsService) {
       this.toolboxCategories = [];
       this.treeService = _treeService;
       this.utilsService = _utilsService;
-      this.modalService = _modalService;
 
       this.xmlHasCategories = false;
     }
@@ -120,9 +119,6 @@ blocklyApp.ToolboxComponent = ng.core.Component({
       });
     }
   },
-  isModalShown: function() {
-    return this.modalService.isModalShown();
-  },
   getActiveDescId: function() {
     return this.treeService.getActiveDescId('blockly-toolbox-tree');
   },

accessible/tree.service.js

@@ -27,17 +27,17 @@
 blocklyApp.TreeService = ng.core.Class({
   constructor: [
     blocklyApp.NotificationsService, blocklyApp.UtilsService,
-    blocklyApp.ClipboardService, blocklyApp.ModalService,
+    blocklyApp.ClipboardService, blocklyApp.BlockOptionsModalService,
     blocklyApp.AudioService,
     function(
         _notificationsService, _utilsService, _clipboardService,
-        _modalService, _audioService) {
+        _blockOptionsModalService, _audioService) {
       // Stores active descendant ids for each tree in the page.
       this.activeDescendantIds_ = {};
       this.notificationsService = _notificationsService;
       this.utilsService = _utilsService;
       this.clipboardService = _clipboardService;
-      this.modalService = _modalService;
+      this.blockOptionsModalService = _blockOptionsModalService;
       this.audioService = _audioService;
       this.toolboxWorkspaces = {};
     }
@@ -357,7 +357,7 @@ blocklyApp.TreeService = ng.core.Class({
   },
   showBlockOptionsModal: function(block, blockRootNode) {
     var that = this;
-    this.modalService.showModal('Block options', [{
+    var actionButtonsInfo = [{
       translationIdForText: 'MARK_SPOT_BEFORE',
       action: function() {
         that.clipboardService.markConnection(block.previousConnection);
@@ -436,7 +436,9 @@ blocklyApp.TreeService = ng.core.Class({
       isDisabled: function() {
         return false;
       }
-    }], function() {
+    }];
+
+    this.blockOptionsModalService.showModal(actionButtonsInfo, function() {
       // TODO(sll): If there are no blocks in the workspace, focus on the
       // entire workspace instead.
       that.focusOnBlock(block.id);
@@ -464,7 +466,9 @@ blocklyApp.TreeService = ng.core.Class({
         this.utilsService.getBlockById(blockId);
   },
   onKeypress: function(e, tree) {
-    if (this.modalService.isModalShown()) {
+    // TODO(sll): Instead of this, have a common ActiveContextService which
+    // returns true if at least one modal is shown, and false otherwise.
+    if (this.blockOptionsModalService.isModalShown()) {
       return;
     }
 

accessible/workspace-tree.component.js

@@ -79,17 +79,15 @@ blocklyApp.WorkspaceTreeComponent = ng.core.Component({
 .Class({
   constructor: [
       blocklyApp.ClipboardService, blocklyApp.NotificationsService,
-      blocklyApp.TreeService, blocklyApp.UtilsService,
+      blocklyApp.TreeService, blocklyApp.UtilsService, blocklyApp.AudioService,
-      blocklyApp.AudioService, blocklyApp.ModalService,
       function(
           _clipboardService, _notificationsService, _treeService,
-          _utilsService, _audioService, _modalService) {
+          _utilsService, _audioService) {
     this.clipboardService = _clipboardService;
     this.notificationsService = _notificationsService;
     this.treeService = _treeService;
     this.utilsService = _utilsService;
     this.audioService = _audioService;
-    this.modalService = _modalService;
   }],
   ngOnInit: function() {
     var SUPPORTED_FIELDS = [

demos/accessible/index.html

@@ -20,7 +20,7 @@
 
   <script src="../../accessible/utils.service.js"></script>
   <script src="../../accessible/audio.service.js"></script>
-  <script src="../../accessible/modal.service.js"></script>
+  <script src="../../accessible/block-options-modal.service.js"></script>
   <script src="../../accessible/keyboard-input.service.js"></script>
   <script src="../../accessible/notifications.service.js"></script>
   <script src="../../accessible/clipboard.service.js"></script>