bluetooth: Add notification system to internals page.

chrome/browser/resources/bluetooth_internals/sidebar.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Javascript for Sidebar, served from chrome://bluetooth-internals/.
  */
 
 cr.define('sidebar', function() {
   /** @const {!cr.ui.pageManager.PageManager}*/
@@ skipping 27 matching lines @@
 
   Sidebar.prototype = {
     __proto__: PageManager.Observer.prototype,
 
     /**
      * Closes the sidebar. Only applies to layouts with window width <= 600px.
      */
     close: function() {
       this.sidebarDiv_.classList.remove('open');
       document.body.style.overflow = '';
+      document.dispatchEvent(new CustomEvent('contentfocus'));

[Dan Beam, 2016/12/16 08:42:58]

why is this not named something like 'sidebar-close'?

[mbrunson, 2016/12/16 21:42:30]

The main purpose of these 2 events (contentfocus/contentblur) is to alert
listeners that some UI element is going to block the main content of the page. I
wanted it to be named something generic in case other UI elements are added that
also block the user from accessing the main content (alert overlays, dialog
boxes, etc.). The main use of this is to prevent the snackbar from closing
before the user has a chance to read it and respond.

I can use specific event names if you think that sounds like a bad idea. But I
would have to have the Snackbar know about and subscribe to each event
separately which seems like a more complex way of doing this.

     },
 
     /**
      * Opens the sidebar. Only applies to layouts with window width <= 600px.
      */
     open: function() {
       document.body.style.overflow = 'hidden';
       this.sidebarDiv_.classList.add('open');
+      document.dispatchEvent(new CustomEvent('contentblur'));
     },
 
     /**
      * Called when a page is navigated to.
      * @override
      * @param {string} path The path of the page being visited.
      */
     updateHistory: function(path) {
       this.sidebarContent_.querySelectorAll('li').forEach(function(item) {
         item.classList.toggle('selected', item.dataset.pageName === path);
       });
     },
 
     /**
      * Switches the page based on which sidebar list button was clicked.
      * @param {!Event} event
      * @private
      */
     onItemClick_: function(event) {
       this.close();
       PageManager.showPageByName(event.target.parentNode.dataset.pageName);
     },
   };
 
   return {
     Sidebar: Sidebar
   };
 });