feat: pull/push cloud sketch from the tab toolbar

Closes #1899

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/arduino-icons.json

@@ -740,6 +740,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, ValidateSketch);
   Contribution.configure(bind, RenameCloudSketch);
   Contribution.configure(bind, Account);
+  Contribution.configure(bind, CloudSketchbookContribution);
 
   bindContributionProvider(bind, StartupTaskProvider);
   bind(StartupTaskProvider).toService(BoardsServiceProvider); // to reuse the boards config in another window
@@ -918,8 +919,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(CreateFsProvider).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(CreateFsProvider);
   bind(FileServiceContribution).toService(CreateFsProvider);
-  bind(CloudSketchbookContribution).toSelf().inSingletonScope();
-  bind(CommandContribution).toService(CloudSketchbookContribution);
   bind(LocalCacheFsProvider).toSelf().inSingletonScope();
   bind(FileServiceContribution).toService(LocalCacheFsProvider);
   bind(CloudSketchbookCompositeWidget).toSelf();

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -83,7 +83,10 @@ export class CreateFeatures implements FrontendApplicationContribution {
       );
       return undefined;
     }
-    return dataDirUri.isEqualOrParent(new URI(sketch.uri));
+    return dataDirUri
+      .resolve('RemoteSketchbook')
+      .resolve('ArduinoCloud')
+      .isEqualOrParent(new URI(sketch.uri));
   }
 
   cloudUri(sketch: Sketch): URI | undefined {

Diff for: arduino-ide-extension/src/browser/create/create-features.ts

@@ -15,7 +15,7 @@
 
 .p-TabBar-tabIcon.cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(../icons/cloud.svg);
+    -webkit-mask: url(../icons/arduino-cloud.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
     width: 19px !important;
@@ -26,7 +26,7 @@
 .p-mod-current
 .cloud-sketchbook-tree-icon {
     background-color: var(--theia-foreground);
-    -webkit-mask: url(../icons/cloud-filled.svg);
+    -webkit-mask: url(../icons/arduino-cloud-filled.svg);
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
@@ -99,24 +99,6 @@
     color: var(--theia-textLink-foreground);
 }
 
-.pull-sketch-icon {
-    background-color: var(--theia-foreground);
-    -webkit-mask: url(./pull-sketch-icon.svg);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-}
-
-.push-sketch-icon {
-    background-color: var(--theia-foreground);
-    -webkit-mask: url(./push-sketch-icon.svg);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-}
-
 .account-icon {
     width: var(--theia-private-sidebar-icon-size);
     height: var(--theia-private-sidebar-icon-size);
@@ -199,38 +181,11 @@
     width: 100%;
 }
 
-.theia-file-icons-js.file-icon > .sketch-folder-icon {
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 100%;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background-color: var(--theia-foreground);
-}
-
-.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud {
-    -webkit-mask: url('../icons/cloud.svg');
-}
-
-.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.offline {
-    -webkit-mask: url('../icons/cloud-offline.svg');
-    background-color: var(--theia-activityBar-inactiveForeground);
-}
-
-.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced {
-    -webkit-mask: url('../icons/cloud-filled.svg');
+.actions.item.flex-line .fa,
+.theia-file-icons-js.file-icon .fa {
+    font-size: var(--theia-icon-size);
 }
 
-.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced.offline {
-    -webkit-mask: url('../icons/cloud-filled-offline.svg');
-}
-
-.sketch-folder-icon.cloud.offline.action {
-    -webkit-mask: url('../icons/cloud-offline.svg');
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 100%;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background-color: var(--theia-foreground);
+.theia-file-icons-js.file-icon.not-in-sync-offline .fa {
+    color: var(--theia-activityBar-inactiveForeground);
 }

Diff for: arduino-ide-extension/src/browser/style/pull-sketch-icon.svg renamed to arduino-ide-extension/src/browser/icons/arduino-cloud-download.svg

@@ -6,9 +6,9 @@
 @font-face {
   font-family: 'FontAwesome';
   src:
-    url('fonts/FontAwesome.ttf?2jhpmq') format('truetype'),
-    url('fonts/FontAwesome.woff?2jhpmq') format('woff'),
-    url('fonts/FontAwesome.svg?2jhpmq#FontAwesome') format('svg');
+    url('fonts/FontAwesome.ttf?h959em') format('truetype'),
+    url('fonts/FontAwesome.woff?h959em') format('woff'),
+    url('fonts/FontAwesome.svg?h959em#FontAwesome') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -674,3 +674,21 @@
 .fa-microchip:before {
   content: "\f2db";
 }
+.fa-arduino-cloud-download:before {
+  content: "\e910";
+}
+.fa-arduino-cloud-upload:before {
+  content: "\e914";
+}
+.fa-arduino-cloud:before {
+  content: "\e915";
+}
+.fa-arduino-cloud-filled:before {
+  content: "\e912";
+}
+.fa-arduino-cloud-offline:before {
+  content: "\e913";
+}
+.fa-arduino-cloud-filled-offline:before {
+  content: "\e911";
+}

Diff for: arduino-ide-extension/src/browser/icons/cloud-filled-offline.svg renamed to arduino-ide-extension/src/browser/icons/arduino-cloud-filled-offline.svg

@@ -77,7 +77,7 @@
 
 .arduino-upload-sketch--toolbar-icon {
     -webkit-mask: url(../icons/upload.svg) center no-repeat;
-    background-color: var(--theia-titleBar-activeBackground);   
+    background-color: var(--theia-titleBar-activeBackground);
 }
 
 .toggle-serial-monitor-icon {
@@ -114,6 +114,10 @@
     z-index: 0;
 }
 
+.p-TabBar-toolbar .item > div {
+    text-align: center;
+}
+
 :root {
     --theia-private-menubar-height: 40px; /* set the topbar height */
 }