Remove Google Plus share options from the client (#940)

* Remove Google Plus share options from the client

- Google Plus is shutting down, so remove share icons for it from the
  client
- Add padding around remaining icons in annotation share dialog and
  spacer after "Share" label to avoid having too much space between
  icons

Fixes https://github.com/hypothesis/product-backlog/issues/947

* Update icon font to remove Google+ icons

Remove the Google+ icons and regenerate the icon font using the Icomoon
app, following the process described in src/styles/vendor/ICOMOON.md.

In the process I had to select the option in the Icomoon UI to remove
custom colors from many of the icons. In the client the
`h-icon-*::before` selectors should specify only the font to use and
content to show but not a color. The color is inherited from the parent
elements. I believe this is necessary because it has been a long time
since the icon font was last updated and the Icomoon app has evolved
since then.

* Add notes about how to update or remove icons from the icon font

src/sidebar/components/test/annotation-share-dialog-test.js

@@ -62,10 +62,8 @@ describe('annotationShareDialog', function() {
       assert.equal(fakeAnalytics.track.args[0][1], 'twitter');
       clickShareIcon('h-icon-facebook');
       assert.equal(fakeAnalytics.track.args[1][1], 'facebook');
-      clickShareIcon('h-icon-google-plus');
-      assert.equal(fakeAnalytics.track.args[2][1], 'googlePlus');
       clickShareIcon('h-icon-mail');
-      assert.equal(fakeAnalytics.track.args[3][1], 'email');
+      assert.equal(fakeAnalytics.track.args[2][1], 'email');
     });
 
     it('focuses and selects the link when the dialog is opened', function(done) {

src/sidebar/components/test/share-dialog-test.js

@@ -47,9 +47,7 @@ describe('shareDialog', function() {
     assert.equal(fakeAnalytics.track.args[0][1], 'twitter');
     clickShareIcon('h-icon-facebook');
     assert.equal(fakeAnalytics.track.args[1][1], 'facebook');
-    clickShareIcon('h-icon-google-plus');
-    assert.equal(fakeAnalytics.track.args[2][1], 'googlePlus');
     clickShareIcon('h-icon-mail');
-    assert.equal(fakeAnalytics.track.args[3][1], 'email');
+    assert.equal(fakeAnalytics.track.args[2][1], 'email');
   });
 });

src/sidebar/templates/annotation-share-dialog.html

@@ -3,7 +3,7 @@
      ng-click="vm.onClose()"></div>
 <div class="annotation-share-dialog" ng-class="{'is-open': vm.isOpen}">
   <div class="annotation-share-dialog-target">
-    <span class="annotation-share-dialog-target__label">Share:</span>
+    <span class="annotation-share-dialog-target__label u-stretch">Share:</span>
     <a href="https://twitter.com/intent/tweet?url={{vm.uri | urlEncode}}&hashtags=annotated"
       target="_blank"
       title="Tweet link"
@@ -14,11 +14,6 @@
       title="Share on Facebook"
       class="annotation-share-dialog-target__icon h-icon-facebook"
       ng-click="vm.onShareClick('facebook')"></a>
-    <a href="https://plus.google.com/share?url={{vm.uri | urlEncode}}"
-      target="_blank"
-      title="Post on Google Plus"
-      class="annotation-share-dialog-target__icon h-icon-google-plus"
-      ng-click="vm.onShareClick('googlePlus')"></a>
     <a href="mailto:?subject=Let's%20Annotate&amp;body={{vm.uri}}"
       target="_blank"
       title="Share via email"

src/sidebar/templates/share-dialog.html

@@ -24,11 +24,6 @@
          title="Share on Facebook"
          class="share-link-icon h-icon-facebook"
          ng-click="onShareClick('facebook')"></a>
-      <a href="https://plus.google.com/share?url={{vm.sharePageLink | urlEncode}}"
-         target="_blank"
-         title="Post on Google Plus"
-         class="share-link-icon h-icon-google-plus"
-         ng-click="onShareClick('googlePlus')"></a>
       <a href="mailto:?subject=Let's%20Annotate&amp;body={{vm.sharePageLink}}"
          target="_blank"
          title="Share via email"

src/styles/sidebar/components/annotation-share-dialog.scss

@@ -125,6 +125,8 @@
   text-decoration: none;
   font-size: 20px;
   cursor: pointer;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .annotation-share-dialog-target__icon:hover {

src/styles/vendor/ICOMOON.md

@@ -19,3 +19,10 @@ add the relevant icons and then use the app's _Generate Font_ facility.
     and click the 'Download' button which appears _within_ the tab.
  5. Run `scripts/update-icon-font.py <icomoon zip archive>` to update the icon font
  6. Commit the updated files to the repository.
+
+## Updating or removing icons
+
+To update or remove icons, follow the initial steps for adding icons above, but
+instead of adding an icon use the Icomoon UI tools to edit icons in the set or
+remove them before exporting the updated font and running the
+`update-icon-font.py` script.

src/styles/vendor/icomoon.css

@@ -20,81 +20,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.h-icon-annotation-flag:before {
-  content: "\e90d";
-}
-.h-icon-clipboard:before {
-  content: "\e90c";
-}
-.h-icon-hypothesis-logo:before {
-  content: "\e90b";
-}
-.h-icon-annotation-edit:before {
-  content: "\e907";
-}
-.h-icon-annotation-reply:before {
-  content: "\e90a";
-}
-.h-icon-annotation-delete:before {
-  content: "\e908";
-}
-.h-icon-annotation-share:before {
-  content: "\e909";
-}
-.h-icon-google-plus:before {
-  content: "\e906";
-}
-.h-icon-annotate:before {
-  content: "\e903";
-}
-.h-icon-highlight:before {
-  content: "\e904";
-}
-.h-icon-note:before {
-  content: "\e905";
-}
-.h-icon-account:before {
-  content: "\e800";
-}
-.h-icon-sort:before {
-  content: "\e801";
-}
-.h-icon-group:before {
-  content: "\e61e";
-}
-.h-icon-cancel-outline:before {
-  content: "\e619";
-}
-.h-icon-google-plus-old:before {
-  content: "\ea88";
-}
-.h-icon-facebook:before {
-  content: "\ea8d";
-}
-.h-icon-twitter:before {
-  content: "\ea91";
-}
-.h-icon-github:before {
-  content: "\e900";
-}
-.h-icon-feed:before {
-  content: "\e901";
-}
-.h-icon-cc-by:before {
-  content: "\e61f";
-}
-.h-icon-cc-logo:before {
-  content: "\e620";
-}
-.h-icon-cc-zero:before {
-  content: "\e621";
-}
-.h-icon-markdown:before {
-  content: "\e60b";
-}
-.h-icon-move:before {
-  content: "\e902";
-}
 .h-icon-arrow-right:before {
   content: "\e61d";
 }
@@ -206,4 +131,72 @@
 .h-icon-mail:before {
   content: "\e62a";
 }
-
+.h-icon-annotation-flag:before {
+  content: "\e90d";
+}
+.h-icon-clipboard:before {
+  content: "\e90c";
+}
+.h-icon-hypothesis-logo:before {
+  content: "\e90b";
+}
+.h-icon-annotation-edit:before {
+  content: "\e907";
+}
+.h-icon-annotation-reply:before {
+  content: "\e90a";
+}
+.h-icon-annotation-delete:before {
+  content: "\e908";
+}
+.h-icon-annotation-share:before {
+  content: "\e909";
+}
+.h-icon-annotate:before {
+  content: "\e903";
+}
+.h-icon-highlight:before {
+  content: "\e904";
+}
+.h-icon-note:before {
+  content: "\e905";
+}
+.h-icon-account:before {
+  content: "\e800";
+}
+.h-icon-sort:before {
+  content: "\e801";
+}
+.h-icon-group:before {
+  content: "\e61e";
+}
+.h-icon-cancel-outline:before {
+  content: "\e619";
+}
+.h-icon-facebook:before {
+  content: "\ea8d";
+}
+.h-icon-twitter:before {
+  content: "\ea91";
+}
+.h-icon-github:before {
+  content: "\e900";
+}
+.h-icon-feed:before {
+  content: "\e901";
+}
+.h-icon-cc-by:before {
+  content: "\e61f";
+}
+.h-icon-cc-logo:before {
+  content: "\e620";
+}
+.h-icon-cc-zero:before {
+  content: "\e621";
+}
+.h-icon-markdown:before {
+  content: "\e60b";
+}
+.h-icon-move:before {
+  content: "\e902";
+}