add tool in breakpoints remove all

src/breakpoints/body.tsx

@@ -4,6 +4,7 @@
 import React, { useState } from 'react';
 import { Breakpoints } from '.';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { ArrayExt } from '@phosphor/algorithm';
 
 export class Body extends ReactWidget {
   constructor(model: Breakpoints.IModel) {
@@ -20,7 +21,7 @@ export class Body extends ReactWidget {
 }
 
 const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
-  const [breakpoints] = useState(model.breakpoints);
+  const [breakpoints, setBreakpoints] = useState(model.breakpoints);
   const [active, setActive] = useState(model.isActive);
 
   model.activesChange.connect((_: Breakpoints.IModel, update: boolean) => {
@@ -28,6 +29,15 @@ const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
     setActive(update);
   });
 
+  model.breakpointsChanged.connect(
+    (_: Breakpoints.IModel, updates: Breakpoints.IBreakpoint[]) => {
+      if (ArrayExt.shallowEqual(breakpoints, updates)) {
+        return;
+      }
+      setBreakpoints(updates);
+    }
+  );
+
   return (
     <div>
       {breakpoints.map((breakpoint: any) => (

src/breakpoints/index.ts

@@ -32,6 +32,17 @@ export class Breakpoints extends Panel {
         tooltip: 'Deactivate Breakpoints'
       })
     );
+
+    header.toolbar.addItem(
+      'closeAll',
+      new ToolbarButton({
+        iconClassName: 'jp-CloseAllIcon',
+        onClick: () => {
+          this.model.breakpoints = [];
+        },
+        tooltip: 'Remove All Breakpoints'
+      })
+    );
   }
 
   readonly body: Widget;

style/icons.css

@@ -54,3 +54,7 @@
 .jp-VariableIcon {
   background-image: url('icons/variable.svg');
 }
+
+.jp-CloseAllIcon {
+  background-image: url('icons/close-all.svg');
+}

style/icons/close-all.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.62132 8.0858L7.91421 7.37869L6.5 8.7929L5.08579 7.37869L4.37868 8.0858L5.79289 9.50001L4.37868 10.9142L5.08579 11.6213L6.5 10.2071L7.91421 11.6213L8.62132 10.9142L7.20711 9.50001L8.62132 8.0858Z" fill="#424242"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3L6 2H13L14 3V10L13 11H11V13L10 14H3L2 13V6L3 5H5V3ZM6 5H10L11 6V10H13V3H6V5ZM10 6H3V13H10V6Z" fill="#424242"/>
+</svg>