Add in-page showInfo dialog

config/default-disco.js

@@ -7,6 +7,29 @@ const staticHost = 'https://addons-discovery.cdn.mozilla.net';
 
 module.exports = {
 
+  // The keys listed here will be exposed on the client.
+  // Since by definition client-side code is public these config keys
+  // must not contain sensitive data.
+  clientConfigKeys: [
+    'appName',
+    'amoCDN',
+    'apiHost',
+    'apiPath',
+    'cookieName',
+    'cookieMaxAge',
+    'cookieSecure',
+    'enableClientConsole',
+    'defaultLang',
+    'isDeployed',
+    'isDevelopment',
+    'langs',
+    'langMap',
+    'rtlLangs',
+    'trackingEnabled',
+    'trackingId',
+    'useUiTour',
+  ],
+
   staticHost,
 
   CSP: {
@@ -31,4 +54,8 @@ module.exports = {
   trackingId: 'UA-36116321-7',
 
   enablePostCssLoader: false,
+
+  // If this is false we'll use an in-page
+  // stand-in for the ui-tour.
+  useUiTour: false,
 };

src/disco/components/Addon.js

@@ -25,10 +25,12 @@ import {
   FATAL_ERROR,
   FATAL_INSTALL_ERROR,
   FATAL_UNINSTALL_ERROR,
+  CLOSE_INFO,
   INSTALL_CATEGORY,
   INSTALL_ERROR,
   INSTALL_FAILED,
   INSTALL_STATE,
+  SHOW_INFO,
   START_DOWNLOAD,
   THEME_INSTALL,
   THEME_PREVIEW,
@@ -273,10 +275,17 @@ export function makeProgressHandler(dispatch, guid) {
 
 export function mapDispatchToProps(dispatch, { _tracking = tracking,
                                                _addonManager = addonManager,
+                                               _config = config,
+                                               _dispatchEvent,
                                                ...ownProps } = {}) {
   if (config.get('server')) {
     return {};
   }
+
+  // Set the default here otherwise server code will blow up.
+  // eslint-disable-next-line no-param-reassign
+  _dispatchEvent = _dispatchEvent || document.dispatchEvent;
+
   return {
     setCurrentStatus({ guid, installURL }) {
       const payload = { guid, url: installURL };
@@ -317,21 +326,34 @@ export function mapDispatchToProps(dispatch, { _tracking = tracking,
             category: INSTALL_CATEGORY,
             label: name,
           });
-          document.dispatchEvent(new CustomEvent('mozUITour', {
-            bubbles: true,
-            detail: {
-              action: 'showInfo',
-              data: {
-                target: 'appMenu',
-                icon: iconUrl,
-                title: i18n.gettext('Installed and added to toolbar'),
-                text: i18n.sprintf(
-                  i18n.gettext('Click here to access %(name)s any time.'),
-                  { name }),
-                buttons: [{ label: i18n.gettext('Ok'), callbackID: 'add-on-installed' }],
+          if (_config.has('useUiTour') && _config.get('useUiTour')) {
+            _dispatchEvent(new CustomEvent('mozUITour', {
+              bubbles: true,
+              detail: {
+                action: 'showInfo',
+                data: {
+                  target: 'appMenu',
+                  icon: iconUrl,
+                  title: i18n.gettext('Your add-on is ready'),
+                  text: i18n.sprintf(
+                    i18n.gettext('Now you can access %(name)s from the toolbar.'),
+                    { name }),
+                  buttons: [{ label: i18n.gettext('Ok'), callbackID: 'add-on-installed' }],
+                },
+              },
+            }));
+          } else {
+            dispatch({
+              type: SHOW_INFO,
+              payload: {
+                addonName: name,
+                imageURL: iconUrl,
+                closeAction: () => {
+                  dispatch({ type: CLOSE_INFO });
+                },
               },
-            },
-          }));
+            });
+          }
         })
         .catch((err) => {
           log.error(err);

src/disco/components/InfoDialog.js

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+import translate from 'core/i18n/translate';
+
+import 'disco/css/InfoDialog.scss';
+
+export class InfoDialog extends React.Component {
+  static propTypes = {
+    addonName: PropTypes.string.isRequired,
+    closeAction: PropTypes.func.isRequired,
+    imageURL: PropTypes.string.isRequired,
+    i18n: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { addonName, closeAction, i18n, imageURL } = this.props;
+    return (
+      <div className="show-info" role="dialog"
+           aria-labelledby="show-info-title" aria-describedby="show-info-description">
+        <div className="info">
+          <div className="logo">
+            <img src={imageURL} alt="" />
+          </div>
+          <div className="copy">
+            <h3 id="show-info-title">{i18n.gettext('Your add-on is ready')}</h3>
+            <p id="show-info-description">{i18n.sprintf(
+              i18n.gettext('Now you can access %(name)s from the toolbar.'),
+              { name: addonName })}</p>
+          </div>
+        </div>
+        <button ref={(button) => { if (button != null) { button.focus(); } }}
+          onClick={closeAction}>{i18n.gettext('OK!')}</button>
+      </div>
+    );
+  }
+}
+
+export default translate()(InfoDialog);

src/disco/constants.js

@@ -108,3 +108,6 @@ export const globalEventStatusMap = {
 // they will be fired by addons and themes that aren't
 // necessarily in the disco pane.
 export const globalEvents = Object.keys(globalEventStatusMap);
+
+export const SHOW_INFO = 'SHOW_INFO';
+export const CLOSE_INFO = 'CLOSE_INFO';

src/disco/containers/DiscoPane.js

@@ -17,6 +17,7 @@ import {
 } from 'disco/constants';
 
 import Addon from 'disco/components/Addon';
+import InfoDialog from 'disco/components/InfoDialog';
 import translate from 'core/i18n/translate';
 import tracking from 'core/tracking';
 
@@ -27,12 +28,14 @@ import videoWebm from 'disco/video/AddOns.webm';
 
 export class DiscoPane extends React.Component {
   static propTypes = {
+    AddonComponent: PropTypes.func.isRequred,
     handleGlobalEvent: PropTypes.func.isRequired,
     i18n: PropTypes.object.isRequired,
+    infoDialogData: PropTypes.object,
+    mozAddonManager: PropTypes.object,
     results: PropTypes.arrayOf(PropTypes.object),
-    AddonComponent: PropTypes.func.isRequred,
+    showInfoDialog: PropTypes.boolean,
     _addChangeListeners: PropTypes.func,
-    mozAddonManager: PropTypes.object,
     _tracking: PropTypes.object,
   }
 
@@ -65,15 +68,6 @@ export class DiscoPane extends React.Component {
     });
   }
 
-  showMoreAddons = () => {
-    const { _tracking } = this.props;
-    _tracking.sendEvent({
-      action: 'click',
-      category: NAVIGATION_CATEGORY,
-      label: 'See More Add-ons',
-    });
-  }
-
   closeVideo = (e) => {
     const { _tracking } = this.props;
     e.preventDefault();
@@ -85,8 +79,17 @@ export class DiscoPane extends React.Component {
     });
   }
 
+  showMoreAddons = () => {
+    const { _tracking } = this.props;
+    _tracking.sendEvent({
+      action: 'click',
+      category: NAVIGATION_CATEGORY,
+      label: 'See More Add-ons',
+    });
+  }
+
   render() {
-    const { results, i18n, AddonComponent } = this.props;
+    const { results, i18n, AddonComponent, showInfoDialog, infoDialogData } = this.props;
     const { showVideo } = this.state;
 
     return (
@@ -122,6 +125,7 @@ export class DiscoPane extends React.Component {
             {i18n.gettext('See more add-ons!')}
           </a>
         </div>
+        {showInfoDialog === true ? <InfoDialog {...infoDialogData} /> : null}
       </div>
     );
   }
@@ -147,6 +151,8 @@ export function loadDataIfNeeded({ store: { dispatch, getState } }) {
 export function mapStateToProps(state) {
   return {
     results: loadedAddons(state),
+    showInfoDialog: state.infoDialog.show,
+    infoDialogData: state.infoDialog.data,
   };
 }
 

src/disco/css/InfoDialog.scss

@@ -0,0 +1,66 @@
+.show-info {
+  background: #fff;
+  border-radius: 5px;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+  position: fixed;
+  right: 10px;
+  top: 10px;
+  z-index: 20;
+
+  .info {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .logo {
+    align-self: stretch;
+    display: flex;
+    padding: 20px;
+
+    img {
+      height: 48px;
+      width: 48px;
+    }
+  }
+
+  .copy {
+    align-self: stretch;
+    padding: 20px 20px 20px 0;
+
+    :last-child {
+      margin: 0;
+    }
+
+    [dir=rtl] & {
+      padding: 20px 0 20px 20px;
+    }
+  }
+
+  h3 {
+    margin: 0 0 0.5em;
+  }
+
+  p {
+    margin-top: 0;
+  }
+
+  button {
+    align-self: stretch;
+    flex-direction: column;
+    background: #2ea3ff;
+    padding: 0.8em;
+    border: none;
+    color: #fff;
+    transition: background 200ms;
+
+    &:focus,
+    &:hover {
+      background: #0996f8;
+    }
+  }
+}

src/disco/reducers/infoDialog.js

@@ -0,0 +1,17 @@
+import { CLOSE_INFO, SHOW_INFO } from 'disco/constants';
+
+export default function infoDialog(state = {}, { type, payload }) {
+  switch (type) {
+    case SHOW_INFO:
+      return {
+        show: true,
+        data: payload,
+      };
+    case CLOSE_INFO:
+      return {
+        show: false,
+      };
+    default:
+      return state;
+  }
+}

src/disco/store.js

@@ -6,10 +6,11 @@ import addons from 'core/reducers/addons';
 import api from 'core/reducers/api';
 import discoResults from 'disco/reducers/discoResults';
 import installations from 'disco/reducers/installations';
+import infoDialog from 'disco/reducers/infoDialog';
 
 export default function createStore(initialState = {}) {
   return _createStore(
-    combineReducers({ addons, api, discoResults, installations, reduxAsyncConnect }),
+    combineReducers({ addons, api, discoResults, installations, infoDialog, reduxAsyncConnect }),
     initialState,
     middleware(),
   );