highlight annotations button

server/src/pages/shot/controller.js

@@ -11,6 +11,17 @@ let model;
 
 const SURVEY_EXPIRATION = new Date("2018-01-15");
 
+function shouldHighlightEditIcon(model) {
+  if (!model.isOwner) {
+    return false;
+  }
+  let hasSeen = localStorage.hasSeenEditButton;
+  if (!hasSeen && model.enableAnnotations) {
+    localStorage.hasSeenEditButton = "1";
+  }
+  return !hasSeen;
+}
+
 function shouldShowSurveyLink(model) {
   if ((new Date()) > SURVEY_EXPIRATION) {
     return false;
@@ -82,6 +93,7 @@ exports.launch = function(data) {
     }
   }
   model.showSurveyLink = shouldShowSurveyLink(model);
+  model.highlightEditButton = shouldHighlightEditIcon(model);
   if (firstSet) {
     refreshHash();
   }

server/src/pages/shot/view.js

@@ -337,6 +337,7 @@ class Body extends React.Component {
 
     let trashOrFlagButton;
     let editButton;
+    let highlight = this.props.highlightEditButton ? <div className="edit-highlight"></div> : null;
     if (this.props.isOwner) {
       trashOrFlagButton = <Localized id="shotPageDeleteButton">
         <button className="button transparent trash" title="Delete this shot permanently" onClick={ this.onClickDelete.bind(this) }></button>
@@ -409,6 +410,7 @@ class Body extends React.Component {
           <div className="shot-alt-actions">
             { trashOrFlagButton }
             { 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} />
             <Localized id="shotPageDownloadShot">
               <a className="button primary" href={ this.props.downloadUrl } onClick={ this.onClickDownload.bind(this) }

static/css/frame.scss

@@ -354,6 +354,15 @@
   transition: background-image 150ms $bezier;
 }
 
+.edit-highlight {
+  background-image: url("../img/edit-highlight.svg");
+  height: 17px;
+  width: 17px;
+  position: relative;
+  left: -31px;
+  top: -5px;
+}
+
 .highlight-button {
   background-image: url("../img/annotation-highlight.svg");