Bug 1284423 - Add banner on the top of the Firefox Hello panel. r=dmose

add-on/chrome/modules/MozLoopAPI.jsm

@@ -574,6 +574,15 @@ const kMessageHandlers = {
     reply(MozLoopService.getLoopPref(prefName, prefType));
   },
 
+  /**
+   * Returns any URL preference under "loop.". Used to retrieve properly
+   * formatted URL strings which include platform and version number.
+   */
+  GetLoopUrl: function(message, reply) {
+    let [prefName, prefType] = message.data;
+    reply(MozLoopService.getLoopUrl(prefName, prefType));
+  },
+
   /**
    * Retrieve the plural rule number of the active locale.
    *

add-on/chrome/modules/MozLoopService.jsm

@@ -2021,6 +2021,16 @@ this.MozLoopService = {
     win.openUILinkIn(Services.urlFormatter.formatURL(url), "tab");
   },
 
+  /**
+   * Get a url and properly format it with platform and version specifics.
+   *
+   * @param {String} url_key The key that corresponds to the URL we are
+   *                         want to retrieve.
+   */
+  getLoopUrl: function(urlKey) {
+    return Services.urlFormatter.formatURL(this.getLoopPref(urlKey));
+  },
+
   /**
    * Performs a hawk based request to the loop server.
    *

add-on/chrome/skin/shared/loop.css

@@ -16,6 +16,10 @@
     margin: 0;
   }
 
+  #loop-notification-panel .panel-arrow[side="top"] {
+    list-style-image: url("chrome://loop/skin/panelarrow-vertical-warning.png") !important;
+  }
+
   #loop-button {
     list-style-image: url(chrome://loop/skin/toolbar.png);
     -moz-image-region: rect(0, 16px, 16px, 0);
@@ -60,6 +64,10 @@
   }
 
   @media (min-resolution: 1.1dppx) {
+    #loop-notification-panel .panel-arrow[side="top"] {
+      list-style-image: url("chrome://loop/skin/panelarrow-vertical-warning@2x.png") !important;
+    }
+
     #loop-button {
       list-style-image: url("chrome://loop/skin/toolbar@2x.png");
       -moz-image-region: rect(0, 32px, 32px, 0);

add-on/panels/css/panel.css

@@ -245,6 +245,19 @@ html[dir="rtl"] .rename-container > .input-group {
   line-height: 3rem;
 }
 
+.loop-warning-banner {
+  padding: 2rem;
+  border-bottom: 1px dashed #d1d1d1;
+  background: #F7E27B;
+  color: #222;
+  font-weight: bold;
+}
+
+.loop-warning-banner > a {
+  color: #5192DD;
+  text-decoration: none;
+}
+
 .new-room-view {
   display: flex;
   flex-direction: column;

add-on/panels/js/panel.jsx

@@ -1252,6 +1252,7 @@ loop.panel = _.extend(loop.panel || {}, (function(_, mozL10n) {
         gettingStartedSeen: loop.getStoredRequest(["GetLoopPref", "gettingStarted.latestFTUVersion"]) >= FTU_VERSION,
         multiProcessActive: loop.getStoredRequest(["IsMultiProcessActive"]),
         remoteAutoStart: loop.getStoredRequest(["GetLoopPref", "remote.autostart"]),
+        loop_deprecate_url: loop.getStoredRequest(["GetLoopUrl", "legal.loop_deprecate_url"]),
         renameRoom: null,
         sharePanelOpened: false
       };
@@ -1384,6 +1385,15 @@ loop.panel = _.extend(loop.panel || {}, (function(_, mozL10n) {
     },
 
     render: function() {
+      var learnMoreString =
+        '<a href="' + this.state.loop_deprecate_url + '" target="_blank">' +
+          mozL10n.get("loop_deprecate_learn_more") +
+        "</a>";
+
+      var warningHTML = mozL10n.get("loop_deprecate_notice_and_link", {
+        "learn_more": learnMoreString
+      });
+
       if (this.state.multiProcessActive && !this.state.remoteAutoStart) {
         return (
           <E10sNotSupported onClick={this.launchNonE10sWindow} />
@@ -1394,6 +1404,8 @@ loop.panel = _.extend(loop.panel || {}, (function(_, mozL10n) {
         return (
           <div className="fte-get-started-container"
                onContextMenu={this.handleContextMenu}>
+            <div className="loop-warning-banner"
+                 dangerouslySetInnerHTML={{ __html: warningHTML }} />
             <NotificationListView
               clearOnDocumentHidden={true}
               notifications={this.props.notifications} />
@@ -1424,7 +1436,8 @@ loop.panel = _.extend(loop.panel || {}, (function(_, mozL10n) {
       return (
         <div className={cssClasses}
              onContextMenu={this.handleContextMenu} >
-          <div className="beta-ribbon" />
+           <div className="loop-warning-banner"
+                dangerouslySetInnerHTML={{ __html: warningHTML }} />
           <NotificationListView
             clearOnDocumentHidden={true}
             notifications={this.props.notifications} />
@@ -1543,6 +1556,7 @@ loop.panel = _.extend(loop.panel || {}, (function(_, mozL10n) {
     var prefetch = [
       ["GetLoopPref", "gettingStarted.latestFTUVersion"],
       ["GetLoopPref", "legal.ToS_url"],
+      ["GetLoopUrl", "legal.loop_deprecate_url"],
       ["GetLoopPref", "legal.privacy_url"],
       ["GetLoopPref", "remote.autostart"],
       ["GetUserProfile"],

add-on/panels/test/panel_test.js

@@ -69,6 +69,9 @@ describe("loop.panel", function() {
 
         return 1;
       },
+      GetLoopUrl: function(urlKey) {
+        return "http://" + urlKey;
+      },
       SetPanelHeight: function() { return null; },
       GetPluralForm: function() {
         return "fakeText";
@@ -100,6 +103,7 @@ describe("loop.panel", function() {
       "GetLoopPref|legal.ToS_url": "",
       "GetLoopPref|legal.privacy_url": "",
       "GetLoopPref|remote.autostart": false,
+      "GetLoopUrl|legal.loop_deprecate_url": "fakeurl.com",
       IsMultiProcessActive: false
     };
 

add-on/preferences/prefs.js

@@ -12,6 +12,7 @@ pref("loop.gettingStarted.url", "https://www.mozilla.org/%LOCALE%/firefox/%VERSI
 pref("loop.gettingStarted.resumeOnFirstJoin", false);
 pref("loop.legal.ToS_url", "https://www.mozilla.org/about/legal/terms/firefox-hello/");
 pref("loop.legal.privacy_url", "https://www.mozilla.org/privacy/firefox-hello/");
+pref("loop.legal.loop_deprecate_url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/hello-status");
 pref("loop.do_not_disturb", false);
 pref("loop.retry_delay.start", 60000);
 pref("loop.retry_delay.limit", 300000);

locale/en-US/add-on.properties

@@ -126,6 +126,12 @@ legal_text_and_links3=By using {{clientShortname}} you agree to the {{terms_of_u
 legal_text_tos=Terms of Use
 legal_text_privacy=Privacy Notice
 
+## LOCALIZATION NOTE (learn_more): In this item, don't translate the parts
+## between {{..}} because these will be replaced with links with the labels
+## from loop_deprecate_learn_more.
+loop_deprecate_notice_and_link=Heads up! Firefox Hello will be removed from Firefox soon. {{learn_more}}
+loop_deprecate_learn_more=Learn more
+
 ## LOCALIZATION NOTE (powered_by_beforeLogo, powered_by_afterLogo):
 ## These 2 strings are displayed before and after a 'Telefonica'
 ## logo.