Merge pull request #2141 from hypothesis/remove-icomoon

Remove icomoon font and associated infrastructure

gulpfile.js

@@ -155,7 +155,6 @@ const cssBundles = [
   './src/styles/sidebar/sidebar.scss',
 
   // Vendor
-  './src/styles/vendor/icomoon.css',
   './node_modules/katex/dist/katex.min.css',
 ];
 

scripts/update-icon-font.py

-#!/usr/bin/env python
-
-import argparse
-import os
-from base64 import b64encode
-from zipfile import ZipFile
-
-
-def main():
-    parser = argparse.ArgumentParser('Update the icomoon icon font from the provided archive')
-    parser.add_argument('archive', help='Path to .zip file generated by icomoon')
-    args = parser.parse_args()
-
-    script_dir = os.path.dirname(os.path.abspath(__file__))
-    vendor_style_dir = script_dir + '/../src/styles/vendor'
-
-    icon_font_archive = ZipFile(args.archive)
-    icon_font_archive.extract('selection.json', vendor_style_dir + '/fonts')
-    icon_font_archive.extract('fonts/h.woff', vendor_style_dir)
-    css_input_file = icon_font_archive.open('style.css')
-
-    css_output_file = open(vendor_style_dir + '/icomoon.css', 'w')
-
-    for line in css_input_file:
-        if "format('woff')" in line:
-            # Rewrite the H font URL
-            css_output_file.write("  src: url('../fonts/h.woff') format('woff');\n")
-        elif "url(" in line:
-            # skip non-WOFF format fonts
-            pass
-        else:
-            css_output_file.write(line)
-
-
-if __name__ == '__main__':
-    main()

src/annotator/util/shadow-root.js

@@ -2,11 +2,9 @@
  * Load stylesheets for annotator UI components into the shadow DOM root.
  */
 function loadStyles(shadowRoot) {
-  // nb. When we stop using the icon font in the "annotator" part of the client,
-  // we can remove "icomoon" here.
   const adderStyles = Array.from(document.styleSheets)
     .map(sheet => sheet.href)
-    .filter(url => (url || '').match(/(icomoon|annotator)\.css/));
+    .filter(url => (url || '').match(/annotator\.css/));
 
   // Stylesheet <link> elements are inert inside shadow roots [1]. Until
   // Shadow DOM implementations support external stylesheets [2], grab the

src/annotator/util/test/shadow-root-test.js

@@ -28,7 +28,6 @@ describe('annotator/util/shadow-root', () => {
       const styleEl = container.shadowRoot.querySelector('style');
       assert.ok(styleEl);
       assert.match(styleEl.textContent, /@import ".*annotator\.css.*"/);
-      assert.match(styleEl.textContent, /@import ".*icomoon\.css.*"/);
     });
   });
 });

src/boot/boot.js

@@ -84,7 +84,6 @@ function bootHypothesisClient(doc, config) {
     // Main entry point for the client
     'scripts/annotator.bundle.js',
 
-    'styles/icomoon.css',
     'styles/annotator.css',
     'styles/pdfjs-overrides.css',
   ]);

src/boot/test/boot-test.js

@@ -36,7 +36,6 @@ describe('bootstrap', function () {
       'scripts/jquery.bundle.js',
       'scripts/annotator.bundle.js',
       'styles/annotator.css',
-      'styles/icomoon.css',
       'styles/pdfjs-overrides.css',
 
       // Sidebar app
@@ -85,7 +84,6 @@ describe('bootstrap', function () {
         'scripts/annotator.bundle.1234.js',
         'scripts/jquery.bundle.1234.js',
         'styles/annotator.1234.css',
-        'styles/icomoon.1234.css',
         'styles/pdfjs-overrides.1234.css',
       ].map(assetUrl);
 

src/karma.config.js

@@ -100,7 +100,7 @@ module.exports = function (config) {
       // CSS bundles, relied upon by accessibility tests (eg. for color-contrast
       // checks).
       {
-        pattern: '../build/styles/{annotator,icomoon,sidebar}.css',
+        pattern: '../build/styles/{annotator,sidebar}.css',
         watched: false,
       },
     ],

src/styles/annotator/annotator.scss

 @use "sass:meta";
 @use '../variables' as var;
-@use '../mixins/icons';
 @use '../mixins/focus';
 @use '../mixins/reset';
 @use '../mixins/shadow';
@@ -69,10 +68,6 @@ $sidebar-collapse-transition-time: 150ms;
     position: relative;
   }
 
-  @include icons.icons {
-    font-family: 'h';
-  }
-
   // the vertical toolbar at the left-edge of the sidebar
   // which provides controls for toggling the sidebar,
   // toggling highlights etc.

src/styles/mixins/icons.scss

-// Mixin for targeting icomoon fonts. This keeps the class namespace in one
-// place rather than spreading it through individual files.
-// NOTE: If you want to target a specific icon in a component give it a
-// distinct class name rather than using the icon class.
-//
-// Usage:
-//
-//  .my-element {
-//    @include icons {
-//      color: red; // Make any icon red.
-//    }
-//  }
-@mixin icons {
-  [class^='h-icon-'],
-  [class*=' h-icon-'] {
-    @content;
-  }
-}

src/styles/sidebar/components/annotation.scss

-@use "../../mixins/forms";
-@use "../../mixins/icons";
 @use "../../variables" as var;
 
 // FIXME These hover-related rules should live elsewhere

src/styles/vendor/ICOMOON.md

-# Icon Fonts
-
-The icon fonts for H were created with [icomoon](https://icomoon.io/app). The source file which contains the SVG definitions of the icons is `fonts/selection.json`.
-
-The icons used are from the _Icomoon Free_ and [_Material Icons_](https://www.google.com/design/icons/) libraries which are both pre-installed in the icomoon app.
-
-## Adding New Icons
-
-To add new icons, you'll need to load `selection.json` into the icomoon app,
-add the relevant icons and then use the app's _Generate Font_ facility.
-
- 1. Go to the [icomoon app](https://icomoon.io/app) and import `selection.json`
-    as a new project.
- 2. Search for icons or import the ones you want to add from another source and
-    add them to the 'h' set.
- 3. Select the 'Edit' tool, click on the new icon and enter a name for use in the generated
-    `h-icon-<name>` class name.
- 4. Ensure all icons in the 'h' set are selected, then go to the 'Generate Font' tab in icomoon
-    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

-@font-face {
-  font-family: 'h';
-  src: url('../fonts/h.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="h-icon-"], [class*=" h-icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'h' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.h-icon-arrow-right:before {
-  content: "\e61d";
-}
-.h-icon-arrow-drop-down:before {
-  content: "\e629";
-}
-.h-icon-link:before {
-  content: "\e628";
-}
-.h-icon-create:before {
-  content: "\e627";
-}
-.h-icon-delete:before {
-  content: "\e624";
-}
-.h-icon-remove:before {
-  content: "\e625";
-}
-.h-icon-edit:before {
-  content: "\e626";
-}
-.h-icon-bookmark:before {
-  content: "\e600";
-}
-.h-icon-done:before {
-  content: "\e601";
-}
-.h-icon-lock:before {
-  content: "\e602";
-}
-.h-icon-search:before {
-  content: "\e603";
-}
-.h-icon-settings:before {
-  content: "\e604";
-}
-.h-icon-visibility:before {
-  content: "\e605";
-}
-.h-icon-visibility-off:before {
-  content: "\e606";
-}
-.h-icon-add:before {
-  content: "\e608";
-}
-.h-icon-clear:before {
-  content: "\e609";
-}
-.h-icon-content-copy:before {
-  content: "\e60a";
-}
-.h-icon-flag:before {
-  content: "\e60c";
-}
-.h-icon-reply:before {
-  content: "\e60d";
-}
-.h-icon-border-color:before {
-  content: "\e60e";
-}
-.h-icon-format-bold:before {
-  content: "\e60f";
-}
-.h-icon-format-italic:before {
-  content: "\e610";
-}
-.h-icon-format-list-bulleted:before {
-  content: "\e611";
-}
-.h-icon-format-list-numbered:before {
-  content: "\e612";
-}
-.h-icon-format-quote:before {
-  content: "\e613";
-}
-.h-icon-functions:before {
-  content: "\e614";
-}
-.h-icon-insert-comment:before {
-  content: "\e617";
-}
-.h-icon-insert-link:before {
-  content: "\e615";
-}
-.h-icon-insert-photo:before {
-  content: "\e616";
-}
-.h-icon-cancel:before {
-  content: "\e61a";
-}
-.h-icon-check:before {
-  content: "\e61b";
-}
-.h-icon-chevron-left:before {
-  content: "\e607";
-}
-.h-icon-chevron-right:before {
-  content: "\e618";
-}
-.h-icon-close:before {
-  content: "\e61c";
-}
-.h-icon-public:before {
-  content: "\e622";
-}
-.h-icon-share:before {
-  content: "\e623";
-}
-.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";
-}