Bug 1225047 - Convert contacts_list_overlay to use the gaia-menu web component

apps/communications/dialer/index.html

@@ -111,7 +111,6 @@
     <link rel="import" href="elements/edit-mode.html">
     <link rel="import" href="elements/call-info-view.html">
     <link rel="import" href="/shared/elements/contacts/contact_in_overlay.html">
-    <link rel="import" href="/shared/elements/contacts/contact_list_overlay.html">
     <link rel="import" href="/shared/elements/confirmation-message.html">
     <link rel="import" href="/contacts/elements/phone_details.html">
     <link rel="import" href="/contacts/elements/email_details.html">
@@ -246,8 +245,9 @@ <h1 data-l10n-id="callLog"></h1>
 
     <form is="confirmation-message" id="confirmation-message" class="hide no-opacity" role="dialog" data-type="confirm"></form>
 
-    <form is="contact-list-overlay" id="contact-list-overlay" role="dialog" data-type="action" class="overlay" aria-hidden="true">
-    </form>
+    <gaia-menu id="contact-list-overlay" class="overlay" hidden>
+      <header></header>
+    </gaia-menu>
 
     <section is="phone-details" id="phone-details" hidden></section>
     <section is="email-details" id="email-details" hidden></section>

apps/communications/dialer/js/dialer.js

@@ -349,7 +349,7 @@ var CallHandler = (function callHandler() {
     };
 
     var oncall = function() {
-      SuggestionBar.hideOverlay();
+      SuggestionBar.overlay && SuggestionBar.overlay.hide();
       SuggestionBar.clear();
     };
 

apps/communications/dialer/js/suggestion_bar.js

@@ -25,7 +25,6 @@ var SuggestionBar = {
   countTag: null,
   list: null,
   overlay: null,
-  overlayCancel: null,
   template: null,
 
   init: function sb_init() {
@@ -67,7 +66,7 @@ var SuggestionBar = {
         });
       });
     } else {
-      this.hideOverlay();
+      this.overlay.hide();
     }
   },
 
@@ -249,7 +248,7 @@ var SuggestionBar = {
     itemElm.removeAttribute('id');
     itemElm.hidden = false;
     itemElm.classList.add('ci--action-menu');
-    this.list.insertBefore(itemElm, this.overlayCancel);
+    this.overlay.appendChild(itemElm);
     return itemElm;
   },
 
@@ -346,26 +345,19 @@ var SuggestionBar = {
     return fragment;
   },
 
-  _initOverlay: function() {
-    if (this.list) {
-      return;
-    }
-
-    this.list = document.getElementById('contact-list');
-    this.overlayCancel = document.getElementById('contact-list-overlay-cancel');
-    this.overlayCancel.addEventListener('click', this.hideOverlay.bind(this));
-  },
-
   _clearOverlay: function() {
-    while (this.list.firstElementChild != this.overlayCancel) {
-      this.list.firstElementChild.remove();
-    }
+    Array.slice(this.overlay.querySelectorAll('button')).forEach(button => {
+      this.overlay.removeChild(button);
+    });
   },
 
   showOverlay: function sb_showOverlay() {
     var self = this;
-    LazyLoader.load(this.overlay, function() {
-      self._initOverlay();
+    var overlayResources = [
+      '/shared/js/component_utils.js',
+      '/shared/elements/gaia_menu/script.js'
+    ];
+    LazyLoader.load(overlayResources, function() {
       self._clearOverlay();
       var title = self.overlay.querySelector('header');
       navigator.mozL10n.setAttributes(
@@ -383,7 +375,7 @@ var SuggestionBar = {
             self._allMatched.allMatches[i][j], node);
         }
       }
-      self.overlay.setAttribute('aria-hidden', false);
+      self.overlay.show();
       self.overlay.classList.add('display');
     });
   },
@@ -398,11 +390,6 @@ var SuggestionBar = {
     });
 
     return SimplePhoneMatcher.bestMatch(variants, contactTels);
-  },
-
-  hideOverlay: function sb_hideOverlay() {
-    this.overlay.setAttribute('aria-hidden', true);
-    this.overlay.classList.remove('display');
   }
 };
 

apps/communications/dialer/test/unit/suggestion_bar_test.js

@@ -4,6 +4,9 @@
 
 'use strict';
 
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_menu/script.js');
+
 require('/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
 require('/shared/test/unit/mocks/mock_lazy_loader.js');
 require('/dialer/test/unit/mock_call_handler.js');
@@ -120,9 +123,6 @@ suite('suggestion Bar', function() {
     loadBodyHTML('/shared/elements/contacts/contact_in_overlay.html');
     var suggestionItemTemplate = document.body.querySelector('template');
 
-    loadBodyHTML('/shared/elements/contacts/contact_list_overlay.html');
-    var suggestionOverlayTemplate = document.body.querySelector('template');
-
     domSuggestionBar = document.createElement('section');
     domSuggestionBar.id = 'suggestion-bar';
     domSuggestionBar.classList.add('hide');
@@ -147,25 +147,19 @@ suite('suggestion Bar', function() {
     domSuggestionItem.appendChild(
       suggestionItemTemplate.content.cloneNode(true));
 
-    domOverlay = document.createElement('form');
+    domOverlay = document.createElement('gaia-menu');
     domOverlay.id = 'contact-list-overlay';
-    domOverlay.setAttribute('is', 'contact-list-overlay');
-    domOverlay.setAttribute('role', 'dialog');
-    domOverlay.dataset.type = 'action';
     domOverlay.classList.add('overlay');
-    domOverlay.setAttribute('aria-hidden', 'true');
-    domOverlay.innerHTML = '';
-    domOverlay.appendChild(suggestionOverlayTemplate.content.cloneNode(true));
+    domOverlay.setAttribute('hidden', 'true');
+    domOverlay.innerHTML = '<header></header>';
     document.body.appendChild(domOverlay);
 
     domSuggestionCount = domSuggestionBar.querySelector('#suggestion-count');
 
     subject.overlay = domOverlay;
     subject.bar = domSuggestionBar;
     subject.countTag = document.getElementById('suggestion-count');
-    subject.list = document.getElementById('contact-list');
-    subject.overlayCancel =
-        document.getElementById('contact-list-overlay-cancel');
+    subject.list = document.querySelector('gaia-menu');
     subject.init();
 
     this.sinon.spy(MockL10n, 'setAttributes');
@@ -405,20 +399,14 @@ suite('suggestion Bar', function() {
       });
 
       test('should load the overlay', function() {
-        sinon.assert.calledWith(LazyLoader.load, domOverlay);
+        sinon.assert.called(LazyLoader.load);
       });
 
       test('overlay is displayed', function() {
-        assert.equal(subject.overlay.getAttribute('aria-hidden'), 'false');
+        assert.equal(subject.overlay.hasAttribute('hidden'), false);
         assert.isTrue(subject.overlay.classList.contains('display'));
       });
 
-      test('should have a cancel button as the last button', function() {
-        var buttons = subject.list.children;
-        var cancel = buttons[buttons.length - 1];
-        assert.equal(cancel.id, 'contact-list-overlay-cancel');
-      });
-
       test('should have 2 suggestions', function() {
         assert.equal(suggestions.length, 2);
       });
@@ -480,12 +468,8 @@ suite('suggestion Bar', function() {
     });
 
     suite('hide overlay', function() {
-      setup(function() {
-        subject.hideOverlay();
-      });
-
       test('should hide the overlay', function() {
-        assert.equal(subject.overlay.getAttribute('aria-hidden'), 'true');
+        assert.equal(subject.overlay.getAttribute('hidden'), 'true');
         assert.isFalse(subject.overlay.classList.contains('display'));
       });
     });
@@ -497,15 +481,14 @@ suite('suggestion Bar', function() {
       subject.showOverlay();
 
       assert.equal(
-          subject.overlay.querySelector('#contact-list').childElementCount,
+          subject.overlay.childElementCount,
           4, 'should have 3 items + cancel button into overlay list');
       assert.isFalse(subject.overlay.hidden, 'should show suggestion list');
     });
 
     suite('#tap on suggestions list', function() {
       setup(function() {
         this.sinon.spy(MockCallHandler, 'call');
-        this.sinon.spy(subject, 'hideOverlay');
 
         MockContacts.mResult = mockResult1;
         subject.update('1234');
@@ -524,7 +507,6 @@ suite('suggestion Bar', function() {
         document.body.querySelector('.js-suggestion-item').click();
 
         sinon.assert.notCalled(MockCallHandler.call);
-        sinon.assert.calledOnce(subject.hideOverlay);
       });
     });
 

apps/emergency-call/index.html

@@ -21,7 +21,6 @@
     <link rel="stylesheet" type="text/css" href="/shared/style/animations.css">
     <link rel="stylesheet" type="text/css" href="/shared/style/dialer/dialer.css">
     <link rel="stylesheet" type="text/css" href="/shared/style/dialer/keypad.css">
-    <link rel="stylesheet" type="text/css" href="/shared/style/action_menu.css">
     <link rel="stylesheet" type="text/css" href="/shared/style/contacts/contact_in_overlay.css">
     <link rel="stylesheet" type="text/css" href="/shared/style/dialer/overlay.css">
     <link rel="stylesheet" type="text/css" href="style/ice_contacts.css">
@@ -58,7 +57,6 @@
 
     <link rel="import" href="/shared/elements/confirmation-message.html">
     <link rel="import" href="/shared/elements/contacts/contact_in_overlay.html">
-    <link rel="import" href="/shared/elements/contacts/contact_list_overlay.html">
   </head>
   <body class="skin-comms theme-communications">
     <article id="views" class="full-height">
@@ -142,8 +140,9 @@
         </article>
       </section>
     </article>
-    <form is="contact-list-overlay" id="contact-list-overlay" role="dialog" data-type="action" class="overlay">
-    </form>
+    <gaia-menu id="contact-list-overlay" class="overlay" hidden>
+      <header></header>
+    </gaia-menu>
     <button is="contact-in-overlay" id="contact-in-overlay" class="contact-item ci--action-menu" hidden></button>
     <form is="confirmation-message" id="confirmation-message" class="hide no-opacity" role="dialog" data-type="confirm"></form>
     <gaia-sim-picker id="sim-picker" tabindex="-1"></gaia-sim-picker>

apps/emergency-call/js/ice_contacts.js

@@ -6,9 +6,7 @@
   var iceContactsDetails = [],
       iceContactsBar,
       contactListOverlay,
-      contactInOverlay,
-      contactList,
-      contactListCancel;
+      contactInOverlay;
 
   function init() {
     if (ICEContacts._initialized) {
@@ -19,16 +17,16 @@
     contactListOverlay = document.getElementById('contact-list-overlay');
     contactInOverlay = document.getElementById('contact-in-overlay');
 
-    LazyLoader.load([contactListOverlay], function() {
+    var contactsListOverlayResources = [
+      '/shared/js/component_utils.js',
+      '/shared/elements/gaia_menu/script.js'
+    ];
+
+    LazyLoader.load(contactsListOverlayResources, function() {
       var contactListOverlayHeader = contactListOverlay.querySelector('header');
       contactListOverlayHeader.dataset.l10nId = 'ice-contacts-overlay-title';
 
-      contactList = document.getElementById('contact-list');
-      contactListCancel =
-        document.getElementById('contact-list-overlay-cancel');
-
       iceContactsBar.addEventListener('click', showICEContactOverlay);
-      contactListCancel.addEventListener('click', hideICEContactOverlay);
 
       ICEContacts._initialized = true;
     });
@@ -39,15 +37,11 @@
   }
 
   function showICEContactOverlay() {
-    contactListOverlay.classList.add('display');
-  }
-
-  function hideICEContactOverlay() {
-    contactListOverlay.classList.remove('display');
+    contactListOverlay.show();
   }
 
   function callICEContact(number) {
-    hideICEContactOverlay();
+    contactListOverlay.hide();
     CallHandler.call(number);
   }
 
@@ -86,7 +80,7 @@
           tel.type[0];
         iceContactOverlayEntry.querySelector('.js-tel').textContent =
           tel.value;
-        contactList.insertBefore(iceContactOverlayEntry, contactListCancel);
+        contactListOverlay.appendChild(iceContactOverlayEntry);
         iceContactOverlayEntry.addEventListener('click',
           callICEContact.bind(null, tel.value));
         // Set the ICE contacts bar visible as soon as there is some

apps/emergency-call/test/unit/ice_contacts_test.js

@@ -37,15 +37,10 @@ suite('ICE contacts bar', function() {
     iceContactBar.textContent = 'ICE Contacts - In Case of Emergency';
     container.appendChild(iceContactBar);
 
-    loadBodyHTML('/shared/elements/contacts/contact_list_overlay.html');
-    var iceContactsOverlayTemplate = document.body.querySelector('template');
-    iceContactsOverlay = document.createElement('form');
+    iceContactsOverlay = document.createElement('gaia-menu');
+    iceContactsOverlay.innerHTML = '<header></header>';
     iceContactsOverlay.id = 'contact-list-overlay';
-    iceContactsOverlay.setAttribute('role', 'dialog');
-    iceContactsOverlay.setAttribute('data-type', 'action');
     iceContactsOverlay.classList.add('overlay');
-    iceContactsOverlay.appendChild(
-      iceContactsOverlayTemplate.content.cloneNode(true));
     container.appendChild(iceContactsOverlay);
 
     loadBodyHTML('/shared/elements/contacts/contact_in_overlay.html');
@@ -60,7 +55,7 @@ suite('ICE contacts bar', function() {
 
     document.body.appendChild(container);
 
-    iceContactList = document.getElementById('contact-list');
+    iceContactList = document.querySelector('gaia-menu');
   }
 
   function shouldNotShowICEContactsBar(done) {
@@ -103,7 +98,7 @@ suite('ICE contacts bar', function() {
     test('Lazyloads contact list overlay', function(done) {
       this.sinon.spy(MockLazyLoader, 'load');
       ICEContacts.updateICEContacts().then(function() {
-        sinon.assert.calledWith(MockLazyLoader.load, [iceContactsOverlay]);
+        sinon.assert.called(MockLazyLoader.load);
         done();
       });
     });
@@ -443,11 +438,6 @@ suite('ICE contacts bar', function() {
                    contact1.tel[0].value);
     });
 
-    test('Should include cancel button', function() {
-      assert.ok(
-        iceContactsOverlay.querySelector('#contact-list-overlay-cancel'));
-    });
-
     test('Tapping a contact dials them', function() {
       this.sinon.spy(CallHandler, 'call');
       iceContactsOverlay.querySelector('button').click();

build/csslint/xfail.list

@@ -144,6 +144,7 @@ shared/style/action_menu.css 3 1
 shared/style/buttons.css 7 0
 shared/style/confirm.css 7 0
 shared/style/contacts/contacts_buttons.css 0 7
+shared/style/contacts/contact_in_overlay.css 0 3
 shared/style/date_selector.css 1 0
 shared/style/dialer/dialer.css 0 1
 shared/style/dialer/keypad.css 1 0

shared/style/contacts/contact_in_overlay.css

@@ -1,8 +1,9 @@
 /* Overrides building blocks */
-#contact-list .contact-item {
-  height: auto;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+/* TODO, move into web component styles. Bug 1225857 */
+#contact-list-overlay .contact-item {
+  height: auto !important;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 /* End overrides building blocks */