feat: add donate footer to updater dialog

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx

@@ -165,6 +165,50 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
     goToDownloadPageButton.focus();
   }
 
+  private appendDonateFooter() {
+    const footer = document.createElement('div');
+    footer.classList.add('ide-updater-dialog--footer');
+    const footerContent = document.createElement('div');
+    footerContent.classList.add('ide-updater-dialog--footer-content');
+    footer.appendChild(footerContent);
+
+    const footerLink = document.createElement('a');
+    footerLink.innerText = nls.localize(
+      'arduino/ide-updater/donateLinkText',
+      'donate to support us'
+    );
+    footerLink.classList.add('ide-updater-dialog--footer-link');
+    footerLink.onclick = () =>
+      this.openExternal('https://www.arduino.cc/en/donate');
+
+    const footerLinkIcon = document.createElement('span');
+    footerLinkIcon.title = nls.localize(
+      'arduino/ide-updater/donateLinkIconTitle',
+      'open donation page'
+    );
+    footerLinkIcon.classList.add('ide-updater-dialog--footer-link-icon');
+    footerLink.appendChild(footerLinkIcon);
+
+    const placeholderKey = '%%link%%';
+    const footerText = nls.localize(
+      'arduino/ide-updater/donateText',
+      'Open source is love, {0}',
+      placeholderKey
+    );
+    const placeholder = footerText.indexOf(placeholderKey);
+    if (placeholder !== -1) {
+      const parts = footerText.split(placeholderKey);
+      footerContent.appendChild(document.createTextNode(parts[0]));
+      footerContent.appendChild(footerLink);
+      footerContent.appendChild(document.createTextNode(parts[1]));
+    } else {
+      footerContent.appendChild(document.createTextNode(footerText));
+      footerContent.appendChild(footerLink);
+    }
+
+    this.controlPanel.insertAdjacentElement('afterend', footer);
+  }
+
   private openDownloadPage(): void {
     this.openExternal('https://www.arduino.cc/en/software');
     this.close();
@@ -187,6 +231,7 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
       downloadStarted: true,
     });
     this.clearButtons();
+    this.appendDonateFooter();
     this.updater.downloadUpdate();
   }
 

arduino-ide-extension/src/browser/icons/link-open-icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.878141 10.6219C0.960188 10.7039 1.07147 10.75 1.1875 10.75H10.8125C10.9285 10.75 11.0398 10.7039 11.1219 10.6219C11.2039 10.5398 11.25 10.4285 11.25 10.3125V6.81252C11.25 6.69648 11.2039 6.5852 11.1219 6.50316C11.0398 6.42111 10.9285 6.37502 10.8125 6.37502C10.6965 6.37502 10.5852 6.42111 10.5031 6.50316C10.4211 6.5852 10.375 6.69648 10.375 6.81252V9.87502H1.625V1.12502H4.6875C4.80353 1.12502 4.91481 1.07892 4.99686 0.996874C5.07891 0.914827 5.125 0.803548 5.125 0.687515C5.125 0.571483 5.07891 0.460203 4.99686 0.378156C4.91481 0.296109 4.80353 0.250015 4.6875 0.250015H1.1875C1.07147 0.250015 0.960188 0.296109 0.878141 0.378156C0.796094 0.460203 0.75 0.571483 0.75 0.687515V10.3125C0.75 10.4285 0.796094 10.5398 0.878141 10.6219ZM11.25 4.62502V0.687515C11.25 0.571483 11.2039 0.460203 11.1219 0.378156C11.0398 0.296109 10.9285 0.250015 10.8125 0.250015H6.875C6.75897 0.250015 6.64769 0.296109 6.56564 0.378156C6.48359 0.460203 6.4375 0.571483 6.4375 0.687515C6.4375 0.803548 6.48359 0.914827 6.56564 0.996874C6.64769 1.07892 6.75897 1.12502 6.875 1.12502H9.75375L5.68937 5.18939C5.64837 5.23006 5.61582 5.27845 5.59361 5.33176C5.5714 5.38508 5.55996 5.44226 5.55996 5.50002C5.55996 5.55777 5.5714 5.61495 5.59361 5.66827C5.61582 5.72158 5.64837 5.76997 5.68937 5.81064C5.73005 5.85165 5.77843 5.88419 5.83175 5.90641C5.88506 5.92862 5.94224 5.94005 6 5.94005C6.05776 5.94005 6.11494 5.92862 6.16825 5.90641C6.22157 5.88419 6.26995 5.85165 6.31062 5.81064L10.375 1.74627V4.62502C10.375 4.74105 10.4211 4.85233 10.5031 4.93437C10.5852 5.01642 10.6965 5.06252 10.8125 5.06252C10.9285 5.06252 11.0398 5.01642 11.1219 4.93437C11.2039 4.85233 11.25 4.74105 11.25 4.62502Z" fill="#008184"/>
+</svg>

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -34,6 +34,37 @@
     min-width: 0;
 }
 
+.ide-updater-dialog--footer {
+    display: inline-block;
+    margin-top: -16px;
+    padding: 12px 0 24px 0;
+    border-top: 1px solid var(--theia-editorWidget-border);
+}
+.ide-updater-dialog--footer-content {
+    float: right;
+}
+
+.ide-updater-dialog--footer-link {
+    display: inline-block;
+    color: var(--theia-textLink-foreground);
+    font-weight: 500;
+    line-height: 13px;
+}
+.ide-updater-dialog--footer-link:hover {
+    color: var(--theia-textLink-foreground);
+    cursor: pointer;
+}
+.ide-updater-dialog--footer-link-icon {
+    display: inline-block;
+    -webkit-mask: url(../icons/link-open-icon.svg) center no-repeat;
+    background-color: var(--theia-textLink-foreground);
+    height: 12px;
+    width: 12px;
+    cursor: pointer;
+    transform: translateY(2px);
+    margin-left: 4px;
+}
+
 .ide-updater-dialog .changelog {
     color: var(--theia-editor-foreground);
     background-color: var(--theia-editor-background);
@@ -109,6 +140,7 @@
     max-height: 100%;
     overflow: hidden;
     display: flex;
+    padding-bottom: 20px !important;
 }
 
 #ide-updater-dialog-container .skip-version-button {

i18n/en.json

@@ -275,6 +275,9 @@
       "checkForUpdates": "Check for Arduino IDE Updates",
       "closeAndInstallButton": "Close and Install",
       "closeToInstallNotice": "Close the software and install the update on your machine.",
+      "donateLinkIconTitle": "open donation page",
+      "donateLinkText": "donate to support us",
+      "donateText": "Open source is love, {0}",
       "downloadButton": "Download",
       "downloadingNotice": "Downloading the latest version of the Arduino IDE.",
       "errorCheckingForUpdates": "Error while checking for Arduino IDE updates.\n{0}",