Restore the debug button in toolbar (#1215)

Author: francescospissu

arduino-ide-extension/src/browser/contributions/debug.ts

@@ -10,6 +10,7 @@ import {
   Command,
   CommandRegistry,
   SketchContribution,
+  TabBarToolbarRegistry,
 } from './contribution';
 import { MaybePromise, MenuModelRegistry, nls } from '@theia/core/lib/common';
 import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
@@ -113,6 +114,10 @@ export class Debug extends SketchContribution {
     });
   }
 
+  override registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem(this.debugToolbarItem);
+  }
+
   override registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
       commandId: Debug.Commands.TOGGLE_OPTIMIZE_FOR_DEBUG.id,

arduino-ide-extension/src/browser/style/main.css

@@ -23,7 +23,8 @@
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item .arduino-upload-sketch--toolbar,
-.p-TabBar-toolbar .item.arduino-tool-item .arduino-verify-sketch--toolbar {
+.p-TabBar-toolbar .item.arduino-tool-item .arduino-verify-sketch--toolbar,
+.p-TabBar-toolbar .item.arduino-tool-item .arduino-start-debug {
     background: var(--theia-arduino-toolbar-button-background);
 }
 
@@ -38,7 +39,8 @@
 }
 
 .arduino-verify-sketch--toolbar,
-.arduino-upload-sketch--toolbar {
+.arduino-upload-sketch--toolbar,
+.arduino-start-debug {
     border-radius: 14px;
 }
 
@@ -79,20 +81,14 @@
 }
 
 .arduino-start-debug-icon {
-    -webkit-mask: url('../icons/debug-dark.svg') 50%;
-    mask: url('../icons/debug-dark.svg') 50%;
+    -webkit-mask: url('../icons/debug-dark.svg') 50% 60%;
     -webkit-mask-size: 70%;
-    mask-size: 70%;
     -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: var(--theia-ui-button-font-color);
-}
+    background-color: var(--theia-titleBar-activeBackground);   
 
-.arduino-start-debug {
-    border-radius: 12px;
 }
 
 #arduino-toolbar-container {