Use Matplotlib's tool icons in WebAgg backend.

This is one step to removing dependence on jQuery-UI.
Doeme · Apr 27, 2020 · 4b182e2 · 4b182e2
1 parent 002b27e
commit 4b182e2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/examples/user_interfaces/embedding_webagg_sgskip.py b/examples/user_interfaces/embedding_webagg_sgskip.py
@@ -12,7 +12,9 @@
 """
 
 import io
+import json
 import mimetypes
+from pathlib import Path
 
 try:
     import tornado
@@ -24,14 +26,13 @@
 import tornado.websocket
 
 
+import matplotlib as mpl
 from matplotlib.backends.backend_webagg_core import (
     FigureManagerWebAgg, new_figure_manager_given_figure)
 from matplotlib.figure import Figure
 
 import numpy as np
 
-import json
-
 
 def create_figure():
     """
@@ -219,6 +220,11 @@ def __init__(self, figure):
              tornado.web.StaticFileHandler,
              {'path': FigureManagerWebAgg.get_static_file_path()}),
 
+            # Static images for the toolbar
+            (r'/_images/(.*)',
+             tornado.web.StaticFileHandler,
+             {'path': Path(mpl.get_data_path(), 'images')}),
+
             # The page that contains all of the pieces
             ('/', self.MainPage),
 

diff --git a/lib/matplotlib/backends/backend_webagg.py b/lib/matplotlib/backends/backend_webagg.py
@@ -33,7 +33,6 @@
 import tornado.websocket
 
 import matplotlib as mpl
-from matplotlib import cbook
 from matplotlib.backend_bases import _Backend
 from matplotlib._pylab_helpers import Gcf
 from . import backend_webagg_core as core
@@ -64,8 +63,8 @@ class WebAggApplication(tornado.web.Application):
     class FavIcon(tornado.web.RequestHandler):
         def get(self):
             self.set_header('Content-Type', 'image/png')
-            self.write(
-                cbook._get_data_path('images/matplotlib.png').read_bytes())
+            self.write(Path(mpl.get_data_path(),
+                            'images/matplotlib.png').read_bytes())
 
     class SingleFigurePage(tornado.web.RequestHandler):
         def __init__(self, application, request, *, url_prefix='', **kwargs):
@@ -170,6 +169,11 @@ def __init__(self, url_prefix=''):
                  tornado.web.StaticFileHandler,
                  {'path': core.FigureManagerWebAgg.get_static_file_path()}),
 
+                # Static images for the toolbar
+                (url_prefix + r'/_images/(.*)',
+                 tornado.web.StaticFileHandler,
+                 {'path': Path(mpl.get_data_path(), 'images')}),
+
                 # A Matplotlib favicon
                 (url_prefix + r'/favicon.ico', self.FavIcon),
 

diff --git a/lib/matplotlib/backends/backend_webagg_core.py b/lib/matplotlib/backends/backend_webagg_core.py
@@ -345,26 +345,27 @@ def send_event(self, event_type, **kwargs):
             self.manager._send_event(event_type, **kwargs)
 
 
-_JQUERY_ICON_CLASSES = {
-    'home': 'ui-icon ui-icon-home',
-    'back': 'ui-icon ui-icon-circle-arrow-w',
-    'forward': 'ui-icon ui-icon-circle-arrow-e',
-    'zoom_to_rect': 'ui-icon ui-icon-search',
-    'move': 'ui-icon ui-icon-arrow-4',
-    'download': 'ui-icon ui-icon-disk',
-    None: None,
+_ALLOWED_TOOL_ITEMS = {
+    'home',
+    'back',
+    'forward',
+    'pan',
+    'zoom',
+    'download',
+    None,
 }
 
 
 class NavigationToolbar2WebAgg(backend_bases.NavigationToolbar2):
 
     # Use the standard toolbar items + download button
-    toolitems = [(text, tooltip_text, _JQUERY_ICON_CLASSES[image_file],
-                  name_of_method)
-                 for text, tooltip_text, image_file, name_of_method
-                 in (backend_bases.NavigationToolbar2.toolitems +
-                     (('Download', 'Download plot', 'download', 'download'),))
-                 if image_file in _JQUERY_ICON_CLASSES]
+    toolitems = [
+        (text, tooltip_text, image_file, name_of_method)
+        for text, tooltip_text, image_file, name_of_method
+        in (*backend_bases.NavigationToolbar2.toolitems,
+            ('Download', 'Download plot', 'filesave', 'download'))
+        if name_of_method in _ALLOWED_TOOL_ITEMS
+    ]
 
     def _init_toolbar(self):
         self.message = ''

diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -283,23 +283,18 @@ mpl.figure.prototype._init_toolbar = function () {
             continue;
         }
         var button = document.createElement('button');
-        button.classList =
-            'ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only';
+        button.classList = 'ui-button ui-widget ui-state-default ui-corner-all';
         button.setAttribute('role', 'button');
         button.setAttribute('aria-disabled', 'false');
         button.addEventListener('click', on_click_closure(method_name));
         button.addEventListener('mouseover', on_mouseover_closure(tooltip));
 
-        var icon_img = document.createElement('span');
-        icon_img.classList =
-            'ui-button-icon-primary ui-icon ' + image + ' ui-corner-all';
-
-        var tooltip_span = document.createElement('span');
-        tooltip_span.classList = 'ui-button-text';
-        tooltip_span.innerHTML = tooltip;
+        var icon_img = document.createElement('img');
+        icon_img.src = '_images/' + image + '.png';
+        icon_img.srcset = '_images/' + image + '_large.png 2x';
+        icon_img.alt = tooltip;
 
         button.appendChild(icon_img);
-        button.appendChild(tooltip_span);
 
         toolbar.appendChild(button);
     }