feat: Add deactivate event for dev tools tabs (#17618)

Author: Artur-

flow-tests/test-dev-mode/frontend/devtools-plugin.ts

@@ -11,7 +11,6 @@ let devTools: DevToolsInterface;
 
 @customElement('my-tool')
 export class MyTool extends LitElement implements MessageHandler {
-
   @property({ type: Array })
   messages: string[] = [];
 
@@ -45,6 +44,12 @@ export class MyTool extends LitElement implements MessageHandler {
       text: 'Hello from dev tools plugin'
     });
   }
+  activate() {
+    this.messages.push('activate called');
+  }
+  deactivate() {
+    this.messages.push('deactivate called');
+  }
 }
 
 const plugin: DevToolsPlugin = {

flow-tests/test-dev-mode/src/test/java/com/vaadin/flow/uitest/ui/DevToolsPluginIT.java

@@ -36,14 +36,21 @@ public void devToolsPluginWorks() {
         devTools.showTab("Hello");
         TestBenchElement myTool = devTools.$("my-tool").first();
 
-        assertMessages(myTool, "plugin-init");
+        assertMessages(myTool, "plugin-init", "activate called");
         myTool.$(NativeButtonElement.class).first().click();
-        assertMessages(myTool, "plugin-init",
+        assertMessages(myTool, "plugin-init", "activate called",
                 "Response for Hello from dev tools plugin");
 
         $(NativeButtonElement.class).id("refresh").click();
         Assert.assertEquals("Hello from dev tools plugin",
                 $("div").id("injected").getText());
+
+        devTools.showTab("code");
+        devTools.showTab("Hello");
+        assertMessages(myTool, "plugin-init", "activate called",
+                "Response for Hello from dev tools plugin", "deactivate called",
+                "activate called");
+
     }
 
     private void assertMessages(TestBenchElement myTool, String... expected) {

vaadin-dev-server/frontend/vaadin-dev-tools.ts

@@ -1371,6 +1371,13 @@ export class VaadinDevTools extends LitElement {
                 })}
                 id="${tab.id}"
                 @click=${() => {
+                  const currentTab = this.tabs.find((tab) => tab.id === this.activeTab);
+                  if (currentTab && currentTab.element) {
+                    const deactivateMethod = (currentTab.element as any)?.deactivate;
+                    if (deactivateMethod) {
+                      deactivateMethod.call(currentTab.element);
+                    }
+                  }
                   this.activeTab = tab.id;
                   const activateMethod = (tab.element as any).activate;
                   if (activateMethod) {