Fixes mozilla-services#4848 - Header Without text labels

locales/en-US/server.ftl

@@ -7,8 +7,6 @@ gHomeLink = Home
 gNoShots
     .alt = No shots found
 gScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
-gSettings = Settings
-gSignIn = Sign In
 
 ## Header
 buttonSettings =
@@ -98,7 +96,6 @@ shotPageAlertErrorUpdatingTitle = Error saving title
 shotPageConfirmDelete = Are you sure you want to delete this shot permanently?
 shotPageShareButton =
     .title = Share
-shotPageCopy = Copy
 shotPageCopyButton =
     .title = Copy image to clipboard
 shotPageCopied = Copied
@@ -135,13 +132,6 @@ shotPageBackToHomeButton =
     .title = Homepage
 shotPageAllShotsButton =
     .title = All Shots
-shotPageAllShots = All Shots
-shotPageDownload = Download
-# Note: Draw text is used on shot page as a verb (action)
-shotPageDraw = Draw
-# Note: Favorite text is used on shot page as a verb (action)
-shotPageFavorite = Favorite
-shotPageDelete = Delete
 shotPageScreenshotsDescription = Screenshots made simple. Take, save, and share screenshots without leaving Firefox.
 shotPageDMCAMessage = This shot is no longer available due to a third party intellectual property claim.
 # Note: { $dmca } is a placeholder for a link to send email (a 'mailto' link)

server/src/delete-shot-button.js

@@ -76,14 +76,10 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
     }
 
     let deleteButtonStyle = null;
-    let deleteText = null;
     if (this.props.isIcon) {
       deleteButtonStyle = `button transparent trash ${deletePanelOpenClass}`;
     } else {
-      deleteButtonStyle = `nav-button transparent icon-trash trash ${deletePanelOpenClass}`;
-      deleteText = <Localized id="shotPageDelete">
-          <span>Delete</span>
-        </Localized>;
+      deleteButtonStyle = `button nav-button transparent icon-trash trash ${deletePanelOpenClass}`;
     }
 
     return (
@@ -92,9 +88,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
           <button className={deleteButtonStyle}
             title="Delete this shot permanently"
             onClick={this.onClickDelete.bind(this)}
-            ref={this.trashButtonRef}>
-            { deleteText }
-          </button>
+            ref={this.trashButtonRef} />
         </Localized>
         { confirmationPanel }
       </div>

server/src/header.js

@@ -21,7 +21,7 @@ exports.Header = function Header(props) {
 
 exports.Header.propTypes = {
   hasLogo: PropTypes.bool,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   isOwner: PropTypes.bool,
   hasFxa: PropTypes.bool,
   shouldGetFirefox: PropTypes.bool,

server/src/pages/homepage/homepage-header.js

@@ -25,12 +25,9 @@ exports.HomePageHeader = class HomePageHeader extends React.Component {
     let myShots;
     if (this.props.isOwner) {
       myShots = <Localized id="shotIndexPageMyShotsButton" attrs={{title: true}}>
-        <a className="nav-button icon-shots" title="My Shots" href="/shots" onClick={ this.onClickMyShots.bind(this) } tabIndex="0">
-          <Localized id="gMyShots">
-            <span>My Shots</span>
-          </Localized>
-        </a>
-      </Localized>;
+          <a className="nav-button icon-shots" title="My Shots" href="/shots"
+            onClick={ this.onClickMyShots.bind(this) } tabIndex="0" />
+        </Localized>;
     }
 
     const signin = this.renderFxASignIn();

server/src/pages/shot/editor.js

@@ -184,7 +184,7 @@ exports.Editor = class Editor extends React.Component {
     const redoButtonState = this.state.canRedo ? "active" : "inactive";
 
     return <div className="editor-header">
-      <div className="shot-main-actions annotation-main-actions">
+      <div className="shot-edit-main-actions annotation-main-actions">
         <div className="annotation-tools">
           <Localized id="annotationCropButton" attrs={{title: true}}>
             <button className={`button transparent crop-button`} id="crop" onClick={this.onClickCrop.bind(this)} title="Crop"></button>
@@ -217,7 +217,7 @@ exports.Editor = class Editor extends React.Component {
           </Localized>
         </div>
       </div>
-      <div className="shot-alt-actions">
+      <div className="shot-edit-alt-actions">
         <Localized id="annotationSaveEditButton" attrs={{title: true}}>
           <button className="button primary save" id="save" onClick={ this.onClickSave.bind(this) } disabled = { this.state.actionsDisabled } title="Save edit">Save</button>
         </Localized>

server/src/pages/shot/shotpage-header.js

@@ -32,11 +32,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     }
     return (
       <Localized id="shotPageAllShotsButton" attrs={{title: true}}>
-        <a className="nav-button icon-shots" href="/shots" tabIndex="0" title="All Shots">
-          <Localized id="shotPageAllShots">
-            <span>All Shots</span>
-          </Localized>
-        </a>
+        <a className="nav-button icon-shots" href="/shots" tabIndex="0" title="All Shots" />
       </Localized>
     );
   }
@@ -55,14 +51,14 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     const timeDiff = <TimeDiff date={shot.createdDate} />;
     let expirationSubtitle;
     if (this.props.expireTime === null) {
-      expirationSubtitle = <Localized id="shotPageDoesNotExpire"><span>does not expire</span></Localized>;
+      expirationSubtitle = <Localized id="shotPageDoesNotExpire"><span className="expire-info">does not expire</span></Localized>;
     } else {
       const expired = this.props.expireTime < Date.now();
       const expireTimeDiff = <TimeDiff date={this.props.expireTime}/>;
       if (expired) {
-        expirationSubtitle = <Localized id="shotPageTimeExpired" timediff={expireTimeDiff}><span>expired {expireTimeDiff}</span></Localized>;
+        expirationSubtitle = <Localized id="shotPageTimeExpired" timediff={expireTimeDiff}><span className="expire-info">expired {expireTimeDiff}</span></Localized>;
       } else {
-        expirationSubtitle = <Localized id="shotPageTimeExpiresIn" timediff={expireTimeDiff}><span>expires {expireTimeDiff}</span></Localized>;
+        expirationSubtitle = <Localized id="shotPageTimeExpiresIn" timediff={expireTimeDiff}><span className="expire-info">expires {expireTimeDiff}</span></Localized>;
       }
     }
 
@@ -72,7 +68,7 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
           <EditableTitle title={shot.title} isOwner={this.props.isOwner} />
           <div className="shot-subtitle">
             { linkTextShort ? <a className="subtitle-link" rel="noopener noreferrer" href={ shot.url } target="_blank" onClick={ this.onClickOrigUrl.bind(this, "navbar") }>{ linkTextShort }</a> : null }
-            <span className="time-diff">{ timeDiff }</span>
+            <span className="time-diff expire-info">{ timeDiff }</span>
             { expirationSubtitle }
           </div>
         </div>
@@ -110,8 +106,8 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
         { shotInfo }
         <div className="shot-alt-actions">
         { this.props.children }
-        { signin }
         </div>
+        { signin }
       </Header>
     );
   }
@@ -161,7 +157,7 @@ class EditableTitle extends React.Component {
       <input ref={(input) => this.textInput = input}
         className="shot-title-input"
         style={{minWidth: this.state.minWidth}}
-        type="text" defaultValue={this.props.title} autoFocus="true"
+        type="text" defaultValue={this.props.title} autoFocus={true}
         onBlur={this.onExit.bind(this)} onKeyUp={this.onKeyUp.bind(this)} onFocus={this.onFocus} />
     </form>;
   }

server/src/pages/shot/view.js

@@ -356,68 +356,53 @@ class Body extends React.Component {
     let favoriteShotButton = null;
     let trashOrFlagButton = null;
     let editButton = null;
-    const highlight = this.state.highlightEditButton
-      ? <div className="edit-highlight"
-          onClick={this.onClickEdit.bind(this)}
-          onMouseOver={this.onMouseOverHighlight.bind(this)}
-          onMouseOut={this.onMouseOutHighlight.bind(this)}></div>
-      : null;
-    const activeFavClass = this.props.expireTime ? "" : "is-fav";
-    const inactive = this.props.isFxaAuthenticated ? "" : "inactive";
-
-    favoriteShotButton = <div className="favorite-shot-button">
-      <Localized id="shotPagefavoriteButton" attrs={{title: true}}>
-        <button className={`nav-button ${inactive}`}
-          disabled={!this.props.isFxaAuthenticated}
-          onClick={this.onClickFavorite.bind(this)}>
-          <span className={`icon-favorite favorite ${activeFavClass}`} ></span>
-          <Localized id="shotPageFavorite">
-            <span className={`favorite-text favorite ${activeFavClass} `}>Favorite</span>
-          </Localized>
-        </button></Localized></div>;
-
-    const downloadButton = <div className="download-shot-button">
-      <Localized id="shotPageDownloadShot" attrs={{title: true}}>
-        <button className="nav-button icon-download" onClick={this.onClickDownload.bind(this)}
-          title="Download the shot image">
-          <Localized id="shotPageDownload">
-            <span>Download</span>
-          </Localized>
-        </button>
-      </Localized></div>;
-
-    const copyButton = <div className="copy-img-button" hidden={!this.state.canCopy}>
-      <Localized id="shotPageCopyButton" attrs={{title: true}}>
-        <button className="nav-button icon-copy transparent copy"
-          title="Copy image to clipboard"
-          onClick={this.onClickCopy.bind(this)}>
-          <Localized id="shotPageCopy">
-            <span>Copy Image</span>
-          </Localized>
-        </button>
-      </Localized>
-    </div>;
+    let downloadButton = null;
+    let copyButton = null;
 
     if (this.props.isOwner) {
+      const highlight = this.state.highlightEditButton
+        ? <div className="edit-highlight"
+            onClick={this.onClickEdit.bind(this)}
+            onMouseOver={this.onMouseOverHighlight.bind(this)}
+            onMouseOut={this.onMouseOutHighlight.bind(this)}></div>
+        : null;
+      const activeFavClass = this.props.expireTime ? "" : "is-fav";
+      const inactive = this.props.isFxaAuthenticated ? "" : "inactive";
+
+      favoriteShotButton = <div className="favorite-shot-button">
+        <Localized id="shotPagefavoriteButton" attrs={{title: true}}>
+          <button className={`button transparent nav-button ${inactive} icon-favorite ${activeFavClass}`}
+            disabled={!this.props.isFxaAuthenticated} onClick={this.onClickFavorite.bind(this)} />
+        </Localized></div>;
+
       trashOrFlagButton = <DeleteShotButton
         clickDeleteHandler={ this.clickDeleteHandler.bind(this) }
         confirmDeleteHandler={ this.confirmDeleteHandler.bind(this) }
         cancelDeleteHandler={ this.cancelDeleteHandler.bind(this) } />;
 
       editButton = this.props.enableAnnotations ? <div className="edit-shot-button">
         <Localized id="shotPageEditButton" attrs={{title: true}}>
-          <button className="nav-button icon-edit transparent edit"
+          <button className="button transparent nav-button icon-edit edit"
             title="Edit this image"
             onClick={this.onClickEdit.bind(this)}
-            ref={(edit) => { this.editButton = edit; }}>
-            <Localized id="shotPageDraw">
-              <span>Draw</span>
-            </Localized>
-          </button>
+            ref={(edit) => { this.editButton = edit; }} />
         </Localized>
         <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
         { highlight }
         </div> : null;
+
+      downloadButton = <div className="download-shot-button">
+        <Localized id="shotPageDownloadShot" attrs={{title: true}}>
+          <button className={`button transparent nav-button icon-download`} onClick={this.onClickDownload.bind(this)}
+            title="Download the shot image" />
+        </Localized></div>;
+
+      copyButton = <div className="copy-img-button" hidden={!this.state.canCopy}>
+        <Localized id="shotPageCopyButton" attrs={{title: true}}>
+          <button className="button nav-button icon-copy transparent copy"
+            title="Copy image to clipboard"
+            onClick={this.onClickCopy.bind(this)} />
+        </Localized></div>;
     }
 
     let clip;

server/src/pages/shotindex/view.js

@@ -322,7 +322,7 @@ class Card extends React.Component {
         </Localized>;
     } else if (this.props.hasFxa) {
       favoriteIndicator = <Localized id="shotIndexNonFavoriteIcon" attrs={{title: true}}>
-          <div className="non-fav-shot" title=""></div>
+          <div className="indicator non-fav-shot" title=""></div>
         </Localized>;
     }
 

server/src/signin-button.js

@@ -18,21 +18,13 @@ exports.SignInButton = class SignInButton extends React.Component {
   render() {
     if (this.state.displaySettings) {
       return <Localized id="buttonSettings" attrs={{title: true}}>
-        <a className="nav-button icon-settings" tabIndex="0" href="/settings" title="Settings">
-          <Localized id="gSettings">
-            <span>Settings</span>
-          </Localized>
-        </a>
-      </Localized>;
+          <a className="transparent nav-button icon-settings" tabIndex="0" href="/settings" title="Settings" />
+        </Localized>;
     }
 
     const logInURI = "/api/fxa-oauth/login/" + this.props.initialPage;
     return <Localized id="buttonSignIn" attrs={{title: true}}>
-        <a className="nav-button icon-settings" tabIndex="0" href={logInURI} title="SignIn" onClick={this.clickHandler.bind(this)}>
-          <Localized id="gSignIn">
-            <span>Sign In</span>
-          </Localized>
-        </a>
+        <a className="transparent nav-button icon-settings" tabIndex="0" href={logInURI} title="SignIn" onClick={this.clickHandler.bind(this)} />
       </Localized>;
   }