Implement set_history_buttons for nbAgg/WebAgg.

lib/matplotlib/backends/backend_webagg_core.py

@@ -308,6 +308,10 @@ def handle_refresh(self, event):
             figure_label = "Figure {0}".format(self.manager.num)
         self.send_event('figure_label', label=figure_label)
         self._force_full = True
+        if self.toolbar:
+            # Normal toolbar init would refresh this, but it happens before the
+            # browser canvas is set up.
+            self.toolbar.set_history_buttons()
         self.draw_idle()
 
     def handle_resize(self, event):
@@ -394,6 +398,12 @@ def save_figure(self, *args):
         """Save the current figure"""
         self.canvas.send_event('save')
 
+    def set_history_buttons(self):
+        can_backward = self._nav_stack._pos > 0
+        can_forward = self._nav_stack._pos < len(self._nav_stack._elements) - 1
+        self.canvas.send_event('history_buttons',
+                               Back=can_backward, Forward=can_forward)
+
 
 class FigureManagerWebAgg(backend_bases.FigureManagerBase):
     ToolbarCls = NavigationToolbar2WebAgg

lib/matplotlib/backends/web_backend/css/mpl.css

@@ -21,6 +21,19 @@
   vertical-align: middle;
 }
 
+.mpl-widget:disabled,
+.mpl-widget[disabled] {
+  background-color: #ddd;
+  border-color: #ddd !important;
+  cursor: not-allowed;
+}
+
+.mpl-widget:disabled img,
+.mpl-widget[disabled] img {
+  /* Convert black to grey */
+  filter: contrast(0%);
+}
+
 button.mpl-widget:focus,
 button.mpl-widget:hover {
   background-color: #ddd;

lib/matplotlib/backends/web_backend/js/mpl.js

@@ -267,11 +267,14 @@ mpl.figure.prototype._init_toolbar = function () {
     }
 
     function on_mouseover_closure(tooltip) {
-        return function (_event) {
-            return fig.toolbar_button_onmouseover(tooltip);
+        return function (event) {
+            if (!event.currentTarget.disabled) {
+                return fig.toolbar_button_onmouseover(tooltip);
+            }
         };
     }
 
+    fig.buttons = {};
     var buttonGroup = document.createElement('div');
     buttonGroup.classList = 'mpl-button-group';
     for (var toolbar_ind in mpl.toolbar_items) {
@@ -290,7 +293,7 @@ mpl.figure.prototype._init_toolbar = function () {
             continue;
         }
 
-        var button = document.createElement('button');
+        var button = (fig.buttons[name] = document.createElement('button'));
         button.classList = 'mpl-widget';
         button.setAttribute('role', 'button');
         button.setAttribute('aria-disabled', 'false');
@@ -423,6 +426,16 @@ mpl.figure.prototype.handle_image_mode = function (fig, msg) {
     fig.image_mode = msg['mode'];
 };
 
+mpl.figure.prototype.handle_history_buttons = function (fig, msg) {
+    for (var key in msg) {
+        if (!(key in fig.buttons)) {
+            continue;
+        }
+        fig.buttons[key].disabled = !msg[key];
+        fig.buttons[key].setAttribute('aria-disabled', !msg[key]);
+    }
+};
+
 mpl.figure.prototype.updated_canvas_event = function () {
     // Called whenever the canvas gets updated.
     this.send_message('ack', {});

lib/matplotlib/backends/web_backend/js/nbagg_mpl.js

@@ -104,11 +104,14 @@ mpl.figure.prototype._init_toolbar = function () {
     }
 
     function on_mouseover_closure(tooltip) {
-        return function (_event) {
-            return fig.toolbar_button_onmouseover(tooltip);
+        return function (event) {
+            if (!event.currentTarget.disabled) {
+                return fig.toolbar_button_onmouseover(tooltip);
+            }
         };
     }
 
+    fig.buttons = {};
     var buttonGroup = document.createElement('div');
     buttonGroup.classList = 'btn-group';
     var button;
@@ -128,7 +131,7 @@ mpl.figure.prototype._init_toolbar = function () {
             continue;
         }
 
-        button = document.createElement('button');
+        button = fig.buttons[name] = document.createElement('button');
         button.classList = 'btn btn-default';
         button.href = '#';
         button.title = name;