Revert "Merge pull request #33369 from raylin/1210674-improve-feedbac…

…k-to-dialog-service"

This reverts commit 603043e, reversing
changes made to 635c79f.

apps/settings/elements/improve_browser_os_send_feedback.html

@@ -27,6 +27,26 @@ <h1 id="feedback-title"></h1>
         </li>
       </ul>
     </div>
+    <form role="dialog" data-type="confirm" hidden id="feedback-alert">
+      <section>
+        <p>
+          <strong id="feedback-alert-msg"></strong>
+        </p>
+      </section>
+      <menu>
+        <button class="full" id="feedback-alert-btn" data-l10n-id="ok"></button>
+      </menu>
+    </form>
+    <form role="dialog" data-type="confirm" hidden id="feedback-done">
+      <section>
+        <p>
+          <strong data-l10n-id="feedback-complete-msg"></strong>
+        </p>
+      </section>
+      <menu>
+        <button id="feedback-done-btn" class="full" data-l10n-id="done"></button>
+      </menu>
+    </form>
 
     <panel data-path="panels/feedback_send/panel"></panel>
 

apps/settings/js/panels/feedback_send/feedback_send.js

@@ -1,7 +1,6 @@
 define(function(require) {
   'use strict';
 
-  var DialogService = require('modules/dialog_service');
   var SettingsService = require('modules/settings_service');
   var SettingsCache = require('modules/settings_cache');
   require('shared/async_storage');
@@ -59,6 +58,21 @@ define(function(require) {
       this.enableEmail();
     },
 
+    alertConfirm: function() {
+      this.elements.alertDialog.hidden = true;
+      this.elements.alertMsg.textContent = '';
+      this.elements.alertMsg.removeAttribute('data-l10n-id');
+    },
+
+    /**
+     * Once the data is sent successfully and user click 'ok' button,
+     * we'll go back to improveBrowserOS panel.
+     */
+    done: function() {
+      this._SettingsService.navigate('improveBrowserOS');
+      this.elements.doneDialog.hidden = true;
+    },
+
     send: function() {
       this.elements.sendBtn.disabled = true;
       if (!navigator.onLine) {
@@ -150,35 +164,14 @@ define(function(require) {
 
     _messageHandler: function(type) {
       if (type === 'success') {
-        this._openDoneDialog();
+        this.elements.doneDialog.hidden = false;
       } else {
         this.keepAllInputs();
-        this._openAlertDialog(type);
+        this.elements.alertMsg.setAttribute('data-l10n-id',
+          'feedback-errormessage-' + type);
+        this.elements.alertDialog.hidden = false;
       }
       this.elements.sendBtn.disabled = false;
-    },
-
-    _openAlertDialog: function(type) {
-      DialogService.alert({
-        id: 'feedback-errormessage-' + type
-      }, {
-        submitButton: { id: 'ok', style: 'full' }
-      });
-    },
-
-    /**
-     * Once the data is sent successfully and user click 'done' button,
-     * we'll go back to improveBrowserOS panel.
-     */
-    _openDoneDialog: function() {
-      DialogService.alert({
-        id: 'feedback-complete-msg'
-      }, {
-        title: 'sendFeedbackTitle',
-        submitButton: { id: 'done', style: 'full' }
-      }).then(function() {
-        this._SettingsService.navigate('improveBrowserOS');
-      }.bind(this));
     }
   };
   return function ctor_send_feedback() {

apps/settings/js/panels/feedback_send/panel.js

@@ -8,6 +8,9 @@ define(function(require) {
     var elements = {};
     var sendFeedback = SendFeedback();
     var eventMapping = [
+      { elementName: 'alertBtn', eventType: 'click',
+        methodName: 'alertConfirm' },
+      { elementName: 'doneBtn', eventType: 'click', methodName: 'done' },
       { elementName: 'sendBtn', eventType: 'click', methodName: 'send' },
       { elementName: 'emailEnable', eventType: 'change',
         methodName: 'enableEmail' },
@@ -35,6 +38,11 @@ define(function(require) {
     return SettingsPanel({
       onInit: function(panel) {
         elements = {
+          alertDialog: panel.querySelector('#feedback-alert'),
+          alertMsg: panel.querySelector('#feedback-alert-msg'),
+          alertBtn: panel.querySelector('#feedback-alert-btn'),
+          doneDialog: panel.querySelector('#feedback-done'),
+          doneBtn: panel.querySelector('#feedback-done-btn'),
           title: panel.querySelector('#feedback-title'),
           description: panel.querySelector('#feedback-description'),
           emailInput: panel.querySelector('#feedback-email'),

apps/settings/test/unit/panels/feedback_send/feedback_send_test.js

@@ -19,6 +19,18 @@ suite('sendFeedback > ', function() {
   });
 
   var mock_elements = {
+    alertDialog: {
+      hidden: false
+    },
+    alertMsg: {
+      _keys: {},
+      setAttribute: function(key, value) { this._keys[key] = value; },
+      getAttribute: function(key) { return this._keys[key]; },
+      removeAttribute: function(key) { delete this._keys[key]; },
+    },
+    doneDialog: {
+      hidden: true
+    },
     title: {
       _keys: {},
       setAttribute: function(key, value) { this._keys[key] = value; },
@@ -107,6 +119,12 @@ suite('sendFeedback > ', function() {
       });
     });
 
+    test('alertConfirm', function() {
+      sendFeedback.alertConfirm();
+      assert.equal(sendFeedback.elements.alertDialog.hidden, true);
+      assert.equal(sendFeedback.elements.alertMsg.textContent, '');
+    });
+
     test('_isHappy', function() {
       sendFeedback.options = mock_happy_options;
       assert.isTrue(sendFeedback._isHappy());
@@ -115,6 +133,11 @@ suite('sendFeedback > ', function() {
       assert.isFalse(sendFeedback._isHappy());
     });
 
+    test('done', function() {
+      sendFeedback.done();
+      assert.equal(sendFeedback.elements.doneDialog.hidden, true);
+    });
+
     test('enableEmail', function() {
       var originalValue = sendFeedback._showEmail;
       sendFeedback.enableEmail();
@@ -134,8 +157,6 @@ suite('sendFeedback > ', function() {
     });
 
     test('send', function() {
-      this.sinon.spy(sendFeedback, '_openDoneDialog');
-
       sendFeedback.elements.emailColumn.hidden = false;
       sendFeedback.elements.emailInput.value = 'testemailInput';
       sendFeedback.elements.description.value = 'testDescription';
@@ -156,50 +177,46 @@ suite('sendFeedback > ', function() {
 
       sendFeedback._xhr.readyState = 4;
       sendFeedback._xhr.triggerOnLoad(201);
-      assert.equal(sendFeedback._openDoneDialog.called, true);
+      assert.equal(sendFeedback.elements.doneDialog.hidden, false);
       assert.equal(sendFeedback.elements.sendBtn.disabled, false);
     });
 
     test('_responseHandler', function() {
       sendFeedback._xhr.readyState = 4;
 
-      this.sinon.spy(sendFeedback, '_openAlertDialog');
       sendFeedback._xhr.status = 400;
       sendFeedback._responseHandler();
-      assert.equal(
-        sendFeedback._openAlertDialog.calledWithExactly('unknown-error'), true);
+      assert.equal(sendFeedback.elements.alertMsg.getAttribute('data-l10n-id'),
+        'feedback-errormessage-unknown-error');
+      assert.equal(sendFeedback.elements.alertDialog.hidden, false);
 
       sendFeedback._xhr.status = 429;
       sendFeedback._responseHandler();
-      assert.equal(sendFeedback._openAlertDialog.called, true);
+      assert.equal(sendFeedback.elements.alertDialog.hidden, false);
 
       sendFeedback._xhr.status = 404;
       sendFeedback._responseHandler();
-      assert.equal(
-        sendFeedback._openAlertDialog.calledWithExactly('server-off'), true);
+      assert.equal(sendFeedback.elements.alertMsg.getAttribute('data-l10n-id'),
+        'feedback-errormessage-server-off');
 
       sendFeedback._xhr.status = 402;
       sendFeedback._responseHandler();
-      assert.equal(
-        sendFeedback._openAlertDialog.calledWithExactly('unknown-error'), true);
+      assert.equal(sendFeedback.elements.alertMsg.getAttribute('data-l10n-id'),
+        'feedback-errormessage-unknown-error');
     });
 
     suite('_messageHandler', function() {
       test('_messageHandler with success', function() {
-        this.sinon.spy(sendFeedback, '_openDoneDialog');
-
         sendFeedback._messageHandler('success');
-        assert.equal(sendFeedback._openDoneDialog.called, true);
+        assert.equal(sendFeedback.elements.doneDialog.hidden, false);
         assert.equal(sendFeedback.elements.sendBtn.disabled, false);
       });
 
       test('_messageHandler with failure', function() {
-        this.sinon.spy(sendFeedback, 'keepAllInputs');
-        this.sinon.spy(sendFeedback, '_openAlertDialog');
-
+        this.sinon.stub(sendFeedback, 'keepAllInputs');
         sendFeedback._messageHandler('wrong-email');
         assert.equal(sendFeedback.keepAllInputs.called, true);
-        assert.equal(sendFeedback._openAlertDialog.called, true);
+        assert.equal(sendFeedback.elements.alertDialog.hidden, false);
         assert.equal(sendFeedback.elements.sendBtn.disabled, false);
       });
     });