Merge pull request #20646 from jrburke/bug890647-email-unfork-value-s…

…elector

Bug 890647 - [email] unfork value_selector.css r=mcav

apps/email/index.html

@@ -20,6 +20,7 @@
   <link rel="stylesheet" type="text/css" href="shared/style/action_menu.css" >
   <link rel="stylesheet" type="text/css" href="shared/style/progress_activity.css" >
   <link rel="stylesheet" type="text/css" href="shared/style/tabs.css" >
+  <link rel="stylesheet" type="text/css" href="shared/style/value_selector.css" >
   -->
 
   <!--

apps/email/js/cards/value_selector.html

@@ -0,0 +1,11 @@
+<form class="email-value-selector collapsed" role="dialog" data-type="value-selector">
+  <section class="scrollable">
+    <h1></h1>
+    <ol role="listbox">
+    </ol>
+  </section>
+  <menu>
+    <button class="full"
+            data-l10n-id="message-multiedit-cancel"></button>
+  </menu>
+</form>

apps/email/js/cards/vsl/item.html

@@ -0,0 +1 @@
+<li role="option"><label role="presentation"> <span></span></label></li>

apps/email/js/mail_common.js

@@ -533,7 +533,7 @@ Cards = {
   folderSelector: function(callback) {
     var self = this;
 
-    require(['model', 'value_selector'], function(model) {
+    require(['model'], function(model) {
       // XXX: Unified folders will require us to make sure we get the folder
       //      list for the account the message originates from.
       if (!self.folderPrompt) {

apps/email/js/value_selector.js

@@ -1,8 +1,9 @@
 /*
 !! Warning !!
-  This value selector is modified for email folder selection only.
-  API and layout are changed because of the sub-folder indentation display.
-  Please reference the original version selector in contact app before using.
+  This value selector uses the form layout as specified in
+  shared/style/value_selector/index.html. If that changes, or its associated
+  styles change, then this file or value_selector.html or vsl/index.html may
+  need to be adjusted.
 
 How to:
   var prompt1 = new ValueSelector('Dummy title 1', [
@@ -21,22 +22,20 @@ How to:
 /*jshint browser: true */
 /*global alert, define */
 define(function(require) {
+'use strict';
 
 var FOLDER_DEPTH_CLASSES = require('folder_depth_classes'),
-    mozL10n = require('l10n!');
+    formNode = require('tmpl!cards/value_selector.html'),
+    itemTemplateNode = require('tmpl!cards/vsl/item.html');
 
 // Used for empty click handlers.
 function noop() {}
 
 function ValueSelector(title, list) {
   var init, show, hide, render, setTitle, emptyList, addToList,
-      data, el;
+      data;
 
   init = function() {
-    var strPopup, body, section, btnCancel, cancelStr;
-
-    // Model. By having dummy data in the model,
-    // it make it easier for othe developers to catch up to speed
     data = {
       title: 'No Title',
       list: [
@@ -49,35 +48,12 @@ function ValueSelector(title, list) {
       ]
     };
 
-    body = document.body;
-    cancelStr = mozL10n.get('message-multiedit-cancel');
-
-    el = document.createElement('section');
-    el.setAttribute('class', 'valueselector');
-    el.setAttribute('role', 'region');
-
-    strPopup = '<div role="dialog">';
-    strPopup += '  <div class="center">';
-    strPopup += '    <h3>No Title</h3>';
-    strPopup += '    <ul>';
-    strPopup += '      <li>';
-    strPopup += '        <label class="pack-radio">';
-    strPopup += '          <input type="radio" name="option">';
-    strPopup += '          <span>Dummy element</span>';
-    strPopup += '        </label>';
-    strPopup += '      </li>';
-    strPopup += '    </ul>';
-    strPopup += '  </div>';
-    strPopup += '  <menu>';
-    strPopup += '    <button>' + cancelStr + '</button>';
-    strPopup += '  </menu>';
-    strPopup += '</div>';
-
-    el.innerHTML += strPopup;
-    body.appendChild(el);
-
-    btnCancel = el.querySelector('button');
-    btnCancel.addEventListener('click', function() {
+    document.body.appendChild(formNode);
+
+    var btnCancel = formNode.querySelector('button');
+    btnCancel.addEventListener('click', function(event) {
+      event.stopPropagation();
+      event.preventDefault();
       hide();
     });
 
@@ -96,48 +72,39 @@ function ValueSelector(title, list) {
 
   show = function() {
     render();
-    el.classList.add('visible');
+    formNode.classList.remove('collapsed');
   };
 
   hide = function() {
-    el.classList.remove('visible');
+    formNode.classList.add('collapsed');
     emptyList();
   };
 
   render = function() {
-    var title = el.querySelector('h3'),
-        list = el.querySelector('ul');
+    var title = formNode.querySelector('h1'),
+        list = formNode.querySelector('ol');
 
     title.textContent = data.title;
 
     list.innerHTML = '';
-    for (var i = 0; i < data.list.length; i++) {
-      var li = document.createElement('li'),
-          label = document.createElement('label'),
-          input = document.createElement('input'),
-          span = document.createElement('span'),
-          text = document.createTextNode(data.list[i].label);
-
-      input.setAttribute('type', 'radio');
-      input.setAttribute('name', 'option');
-      label.classList.add('pack-radio');
-      label.appendChild(input);
-      span.appendChild(text);
-      label.appendChild(span);
+    data.list.forEach(function(listItem) {
+      var node = itemTemplateNode.cloneNode(true);
+
+      node.querySelector('span').textContent = listItem.label;
+
       // Here we apply the folder-card's depth indentation to represent label.
-      var depthIdx = data.list[i].depth;
+      var depthIdx = listItem.depth;
       depthIdx = Math.min(FOLDER_DEPTH_CLASSES.length - 1, depthIdx);
-      label.classList.add(FOLDER_DEPTH_CLASSES[depthIdx]);
+      node.classList.add(FOLDER_DEPTH_CLASSES[depthIdx]);
 
       // If not selectable use an empty click handler. Because of event
       // fuzzing, we want to have something registered, otherwise an
       // adjacent list item may receive the click.
-      var callback = data.list[i].selectable ? data.list[i].callback : noop;
-      li.addEventListener('click', callback, false);
+      var callback = listItem.selectable ? listItem.callback : noop;
+      node.addEventListener('click', callback, false);
 
-      li.appendChild(label);
-      list.appendChild(li);
-    }
+      list.appendChild(node);
+    });
   };
 
   setTitle = function(str) {

apps/email/style/common.css

@@ -269,25 +269,33 @@ These folder-depth* styles are here instead of folder_cards.css
 because they are also used by the value_selector for showing
 the list of folders.
 */
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth0,
 .fld-folder-depth0 {
   padding-left: 1.5rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth1,
 .fld-folder-depth1 {
   padding-left: 3rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth2,
 .fld-folder-depth2 {
   padding-left: 4.5rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth3,
 .fld-folder-depth3 {
   padding-left: 6rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth4,
 .fld-folder-depth4 {
   padding-left: 6.5rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth5,
 .fld-folder-depth5 {
   padding-left: 9.5rem;
 }
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depth6,
 .fld-folder-depth6,
+.email-value-selector[role="dialog"][data-type="value-selector"] [role="listbox"] .fld-folder-depthmax,
 .fld-folder-depthmax {
   padding-left: 11rem;
 }

apps/email/style/mail.css

@@ -7,13 +7,13 @@
 @import url('../shared/style/action_menu.css');
 @import url('../shared/style/progress_activity.css');
 @import url('../shared/style/tabs.css');
+@import url('../shared/style/value_selector.css');
 
 @import url('common.css');
 @import url('compose_cards.css');
 @import url('marquee.css');
 @import url('message_cards.css');
 @import url('setup_cards.css');
-@import url('value_selector.css');
 
 
 .peep-bubble {

build/jshint/xfail.list

@@ -85,7 +85,6 @@ apps/email/js/query_uri.js
 apps/email/js/sync.js
 apps/email/js/text.js
 apps/email/js/tmpl.js
-apps/email/js/value_selector.js
 apps/email/js/wake_locks.js
 apps/email/test/config.js
 apps/email/test/marionette/activity_create_email_account_complete_test.js