Fixes #4724 - Add image editor new feature promotion dialog

locales/en-US/server.ftl

@@ -175,6 +175,11 @@ timeDiffFutureDays = { $number ->
 
 errorThirdPartyCookiesEnabled = If you took this shot and cannot delete it, you may need to temporarily enable third party cookies from your browser’s preferences.
 
+## Shot Page New Feature Promotion Dialog
+promoTitle = Take Note!
+promoMessage = Updated editing tools let you crop, highlight, and even add text to your shot.
+promoLink = Give it a try
+
 ## Annotations
 
 annotationPenButton =

server/src/pages/shot/controller.js

@@ -20,6 +20,23 @@ function shouldHighlightEditIcon(model) {
   return !hasSeen;
 }
 
+function shouldShowPromo(model) {
+  if (!model.isOwner || !model.enableAnnotations) {
+    return false;
+  }
+  let show = false;
+  const count = localStorage.hasSeenPromoDialog;
+
+  if (!count) {
+    localStorage.hasSeenPromoDialog = 1;
+    show = true;
+  } else if (count < 3) {
+    localStorage.hasSeenPromoDialog = parseInt(count, 10) + 1;
+    show = true;
+  }
+  return show;
+}
+
 exports.launch = function(data) {
   const firstSet = !model;
   model = data;
@@ -57,6 +74,7 @@ exports.launch = function(data) {
     }
   }
   model.highlightEditButton = shouldHighlightEditIcon(model);
+  model.promoDialog = shouldShowPromo(model);
   if (firstSet) {
     refreshHash();
   }

server/src/pages/shot/view.js

@@ -5,6 +5,7 @@ const { Localized } = require("fluent-react/compat");
 const { Footer } = require("../../footer-view");
 const sendEvent = require("../../browser-send-event.js");
 const { ShareButton } = require("../../share-buttons");
+const { PromoDialog } = require("../../promo-dialog");
 const { DeleteShotButton } = require("../../delete-shot-button");
 const { TimeDiff } = require("./time-diff");
 const reactruntime = require("../../reactruntime");
@@ -182,6 +183,7 @@ class Body extends React.Component {
 
   componentDidMount() {
     this.setState({highlightEditButton: this.props.highlightEditButton});
+    this.setState({promoDialog: this.props.promoDialog});
   }
 
   doCloseBanner() {
@@ -408,6 +410,7 @@ class Body extends React.Component {
 
     const noText = this.props.abTests && this.props.abTests.downloadText
                    && this.props.abTests.downloadText.value === "no-download-text";
+
     return (
       <reactruntime.BodyTemplate {...this.props}>
         { renderGetFirefox ? this.renderFirefoxRequired() : null }
@@ -430,6 +433,7 @@ class Body extends React.Component {
             { this.props.enableAnnotations ? editButton : null }
             { highlight }
             <ShareButton abTests={this.props.abTests} clipUrl={clipUrl} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} renderExtensionNotification={renderExtensionNotification} isExtInstalled={this.props.isExtInstalled} />
+            <PromoDialog promoClose={this.promoClose.bind(this)} promoOpen={this.promoOpen.bind(this)} display={this.state.promoDialog} promoType="edit" />
             <Localized id="shotPageDownloadShot">
               <a className="button primary" href={ this.props.downloadUrl } onClick={ this.onClickDownload.bind(this) }
                 title="Download the shot image">
@@ -452,6 +456,24 @@ class Body extends React.Component {
     </reactruntime.BodyTemplate>);
   }
 
+  promoOpen(promoType) {
+    if (promoType === "edit") {
+      document.querySelector(".button.transparent.edit").style.backgroundColor = "#ededf0";
+    }
+  }
+
+  promoClose(shouldDisplay, islink, promoType) {
+    if (!shouldDisplay) {
+      this.setState({promoDialog: false});
+    }
+    if (promoType === "edit") {
+      if (islink) {
+        this.onClickEdit();
+      }
+      document.querySelector(".button.transparent.edit").style.backgroundColor = "";
+    }
+  }
+
   onMouseOverHighlight() {
     this.editButton.style.backgroundColor = "#ededf0";
   }
@@ -555,6 +577,7 @@ Body.propTypes = {
   enableAnnotations: PropTypes.bool,
   expireTime: PropTypes.number,
   highlightEditButton: PropTypes.bool,
+  promoDialog: PropTypes.bool,
   id: PropTypes.string,
   isExtInstalled: PropTypes.bool,
   isMobile: PropTypes.bool,

server/src/promo-dialog.js

@@ -0,0 +1,56 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+const sendEvent = require("./browser-send-event.js");
+
+exports.PromoDialog = class PromoDialog extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (this.props.display) {
+      return <div id="promo-dialog-panel" className="promo-panel" >
+        <div className={`${this.props.promoType} promo-box default-color-scheme`}>
+        <a className="box-close" aria-label="Close Notification" onClick={this.closePanel.bind(this)}></a>
+        <Localized id="promoTitle">
+          <span className="title">Take Note!</span>
+        </Localized>
+        <Localized id="promoMessage">
+          <p className="message">
+            Updated editing tools let you crop, highlight, and even add text to your shot.
+          </p>
+        </Localized>
+        <span className="promo-star"></span>
+         <Localized id="promoLink">
+          <a id="promo-link" aria-label="Try Edit Link" className="message link" onClick={this.closePanel.bind(this)}>
+            Give it a try
+          </a>
+        </Localized>
+        <span className="promo-star"></span>
+      </div>
+      </div>;
+    }
+    return null;
+  }
+
+  componentDidUpdate() {
+    if (this.props.display) {
+      this.props.promoOpen(this.props.promoType);
+    }
+  }
+
+  closePanel(event) {
+    const shouldDisplay = false;
+    const isLink = event.target.id === "promo-link";
+    this.props.promoClose(shouldDisplay, isLink, this.props.promoType);
+    sendEvent("promo-closed");
+  }
+};
+
+exports.PromoDialog.propTypes = {
+  display: PropTypes.bool,
+  promoClose: PropTypes.func,
+  promoOpen: PropTypes.func,
+  promoType: PropTypes.string
+};

static/css/frame.scss

@@ -47,6 +47,61 @@
   }
 }
 
+.promo-panel {
+  .edit {
+    right: 50px;
+    top: 75px;
+  }
+  .promo-box {
+    border-radius: 3px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
+    position: absolute;
+    width: 180px;
+    z-index: 999;
+    padding: 10px 5px;
+    text-align:center;
+  }
+
+  .title {
+    font-size: 14px;
+    line-height: 14px;
+    font-weight: bold;
+  }
+
+  .message {
+    display: inline-block;
+    font-size: 12px;
+    margin: 5px 2px;
+  }
+
+  .promo-star:before {
+    content: "\02728";
+  }
+
+  .link {
+    cursor: pointer;
+    color: #009ec0;
+  }
+
+  a.box-close{
+    float:right;
+    cursor:pointer;
+    color: #000;
+    width:15px;
+    height: 15px;
+    line-height: 10px;
+    margin: -8px -3px 0 0;  
+  }
+
+  .box-close:before {
+    content: "×";
+  }
+
+  .box-close:hover {
+    background-color: $light-hover;
+  }
+}
+
 .shot-alt-actions {
   #downloadIcon {
     margin-right: 4px;