From ff4f78382e8747ded66e77030cb4a106a0dfd999 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 4 Aug 2022 18:37:16 +0200
Subject: [PATCH 1/8] make dialogs scroll when scaling up the UI

---
 arduino-ide-extension/src/browser/style/dialogs.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/arduino-ide-extension/src/browser/style/dialogs.css b/arduino-ide-extension/src/browser/style/dialogs.css
index 3c2b209b2..aa5ef3fe1 100644
--- a/arduino-ide-extension/src/browser/style/dialogs.css
+++ b/arduino-ide-extension/src/browser/style/dialogs.css
@@ -9,11 +9,13 @@
        total = padding + margin = 96px
     */
     max-width: calc(100% - 96px) !important;
+    min-width: unset;
+    max-height: 560px;
     padding: 0 28px;
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogTitle {
-    padding: 36px 0 28px;
+    padding: 20px 0;
     font-weight: 500;
     background-color: transparent;
     font-size: var(--theia-ui-font-size2);
@@ -28,6 +30,7 @@
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent {
     padding: 0;
+    overflow: auto;
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
@@ -75,3 +78,10 @@
 .fa.disabled {
     opacity: .4;
 }
+
+
+@media only screen and (max-height: 560px) {
+    .p-Widget.dialogOverlay .dialogBlock {
+        max-height: 400px;
+    }
+}

From ba43cfa8266b7f0a4aee467a2b5a25a4307936c7 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 4 Aug 2022 18:38:06 +0200
Subject: [PATCH 2/8] add unit of measure to settings step input

---
 .../dialogs/settings/settings-component.tsx   | 20 ++++++++++---------
 .../dialogs/settings/settings-step-input.tsx  | 13 ++++++++++--
 .../src/browser/style/settings-step-input.css |  2 +-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
index dc3d00252..cb0fb5a40 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx
@@ -188,15 +188,17 @@ export class SettingsComponent extends React.Component<
                 />
                 {nls.localize('arduino/preferences/automatic', 'Automatic')}
               </label>
-              <SettingsStepInput
-                value={scalePercentage}
-                setSettingsStateValue={this.setInterfaceScale}
-                step={scaleStep}
-                maxValue={maxScale}
-                minValue={minScale}
-                classNames={{ input: 'theia-input small with-margin' }}
-              />
-              %
+              <div>
+                <SettingsStepInput
+                  value={scalePercentage}
+                  setSettingsStateValue={this.setInterfaceScale}
+                  step={scaleStep}
+                  maxValue={maxScale}
+                  minValue={minScale}
+                  unitOfMeasure="%"
+                  classNames={{ input: 'theia-input small with-margin' }}
+                />
+              </div>
             </div>
             <div className="flex-line">
               <select
diff --git a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
index 8f2fd3a3c..e6eef4b9c 100644
--- a/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx
@@ -7,14 +7,22 @@ interface SettingsStepInputProps {
   step: number;
   maxValue: number;
   minValue: number;
+  unitOfMeasure?: string;
   classNames?: { [key: string]: string };
 }
 
 const SettingsStepInput: React.FC<SettingsStepInputProps> = (
   props: SettingsStepInputProps
 ) => {
-  const { value, setSettingsStateValue, step, maxValue, minValue, classNames } =
-    props;
+  const {
+    value,
+    setSettingsStateValue,
+    step,
+    maxValue,
+    minValue,
+    unitOfMeasure,
+    classNames,
+  } = props;
 
   const clamp = (value: number, min: number, max: number): number => {
     return Math.min(Math.max(value, min), max);
@@ -86,6 +94,7 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
           &#9662;
         </button>
       </div>
+      {unitOfMeasure && `${unitOfMeasure}`}
     </div>
   );
 };
diff --git a/arduino-ide-extension/src/browser/style/settings-step-input.css b/arduino-ide-extension/src/browser/style/settings-step-input.css
index 646b514c0..d2a5ce7db 100644
--- a/arduino-ide-extension/src/browser/style/settings-step-input.css
+++ b/arduino-ide-extension/src/browser/style/settings-step-input.css
@@ -12,7 +12,7 @@
     display: none;
     flex-direction: column;
     position: absolute;
-    right: 0px;
+    right: 14px;
     top: 50%;
     transform: translate(0px, -50%);
     height: calc(100% - 4px);

From 19c8a0761ec5f304a97801448e399c906a6cac93 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 4 Aug 2022 18:41:35 +0200
Subject: [PATCH 3/8] wrap settings dialog items when scaling up the UI

---
 arduino-ide-extension/src/browser/style/settings-dialog.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/arduino-ide-extension/src/browser/style/settings-dialog.css b/arduino-ide-extension/src/browser/style/settings-dialog.css
index d42393ffc..10ddfd0a0 100644
--- a/arduino-ide-extension/src/browser/style/settings-dialog.css
+++ b/arduino-ide-extension/src/browser/style/settings-dialog.css
@@ -21,6 +21,7 @@
     display: flex;
     align-items: center;
     white-space: nowrap;
+    flex-wrap: wrap;
 }
 
 .arduino-settings-dialog .with-margin {

From 7a1215954d3fe368a4a328c8fe99dfbb8c7d91b5 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 4 Aug 2022 18:42:45 +0200
Subject: [PATCH 4/8] fix dialogs width when scaling up the UI

---
 .../certificate-uploader/certificate-uploader-dialog.tsx   | 7 ++++++-
 .../dialogs/firmware-uploader/firmware-uploader-dialog.tsx | 1 +
 .../src/browser/dialogs/ide-updater/ide-updater-dialog.tsx | 1 +
 .../src/browser/style/certificate-uploader-dialog.css      | 2 +-
 .../src/browser/style/firmware-uploader-dialog.css         | 3 +--
 .../src/browser/style/ide-updater-dialog.css               | 4 +++-
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx
index 21ec1586b..336a7b657 100644
--- a/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx
@@ -1,5 +1,9 @@
 import * as React from '@theia/core/shared/react';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { DialogProps } from '@theia/core/lib/browser/dialogs';
 import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
@@ -153,6 +157,7 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
         'Upload SSL Root Certificates'
       ),
     });
+    this.node.id = 'certificate-uploader-dialog-container';
     this.contentNode.classList.add('certificate-uploader-dialog');
     this.acceptButton = undefined;
   }
diff --git a/arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx
index ff65b71a9..6273d321f 100644
--- a/arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx
@@ -101,6 +101,7 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
     protected override readonly props: UploadFirmwareDialogProps
   ) {
     super({ title: UploadFirmware.Commands.OPEN.label || '' });
+    this.node.id = 'firmware-uploader-dialog-container';
     this.contentNode.classList.add('firmware-uploader-dialog');
     this.acceptButton = undefined;
   }
diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
index 231687873..4752de332 100644
--- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
@@ -130,6 +130,7 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
         'Software Update'
       ),
     });
+    this.node.id = 'ide-updater-dialog-container';
     this.contentNode.classList.add('ide-updater-dialog');
     this.acceptButton = undefined;
   }
diff --git a/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css b/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css
index 58baca1be..18216a78a 100644
--- a/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css
+++ b/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css
@@ -1,4 +1,4 @@
-.certificate-uploader-dialog {
+#certificate-uploader-dialog-container > .dialogBlock {
   width: 600px;
 }
 
diff --git a/arduino-ide-extension/src/browser/style/firmware-uploader-dialog.css b/arduino-ide-extension/src/browser/style/firmware-uploader-dialog.css
index d10a387df..3143d02a8 100644
--- a/arduino-ide-extension/src/browser/style/firmware-uploader-dialog.css
+++ b/arduino-ide-extension/src/browser/style/firmware-uploader-dialog.css
@@ -1,4 +1,4 @@
-.firmware-uploader-dialog {
+#firmware-uploader-dialog-container > .dialogBlock {
   width: 600px;
 }
 
@@ -11,7 +11,6 @@
 }
 
 .firmware-uploader-dialog .dialogRow > button{
-  width: 33%;
   margin-right: 3px;
 }
 
diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
index 4fe01fed8..7171fd13c 100644
--- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
+++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
@@ -1,4 +1,4 @@
-.ide-updater-dialog {
+#ide-updater-dialog-container > .dialogBlock {
   width: 546px;
 }
 
@@ -24,6 +24,8 @@
   .ide-updater-dialog--content
   .ide-updater-dialog--new-version-text.dialogSection {
   margin-top: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .ide-updater-dialog .changelog-container {

From 7bb8ab4807bfb81a4485e659ff4eef84fb271dda Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 4 Aug 2022 18:43:58 +0200
Subject: [PATCH 5/8] rework board config UI to make it scale up better

---
 .../browser/arduino-ide-frontend-module.ts    |  5 +-
 .../browser/boards/boards-config-dialog.ts    | 16 ++--
 .../src/browser/boards/boards-config.tsx      |  4 +-
 .../browser/boards/boards-toolbar-item.tsx    |  2 +-
 .../browser/style/boards-config-dialog.css    | 81 +++++++++++--------
 i18n/en.json                                  |  3 +-
 6 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
index 1e9a82099..3cfc39573 100644
--- a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
+++ b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
@@ -453,7 +453,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
   bind(BoardsConfigDialog).toSelf().inSingletonScope();
   bind(BoardsConfigDialogProps).toConstantValue({
-    title: nls.localize('arduino/common/selectBoard', 'Select Board'),
+    title: nls.localize(
+      'arduino/board/boardConfigDialogTitle',
+      'Select other board and port'
+    ),
   });
 
   // Core service
diff --git a/arduino-ide-extension/src/browser/boards/boards-config-dialog.ts b/arduino-ide-extension/src/browser/boards/boards-config-dialog.ts
index d5db717c8..ffec830d1 100644
--- a/arduino-ide-extension/src/browser/boards/boards-config-dialog.ts
+++ b/arduino-ide-extension/src/browser/boards/boards-config-dialog.ts
@@ -1,4 +1,8 @@
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
 import { AbstractDialog } from '../theia/dialogs/dialogs';
@@ -28,7 +32,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     @inject(BoardsConfigDialogProps)
     protected override readonly props: BoardsConfigDialogProps
   ) {
-    super(props);
+    super({ ...props, maxWidth: 500 });
 
     this.contentNode.classList.add('select-board-dialog');
     this.contentNode.appendChild(this.createDescription());
@@ -65,14 +69,6 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     const head = document.createElement('div');
     head.classList.add('head');
 
-    const title = document.createElement('div');
-    title.textContent = nls.localize(
-      'arduino/board/configDialogTitle',
-      'Select Other Board & Port'
-    );
-    title.classList.add('title');
-    head.appendChild(title);
-
     const text = document.createElement('div');
     text.classList.add('text');
     head.appendChild(text);
diff --git a/arduino-ide-extension/src/browser/boards/boards-config.tsx b/arduino-ide-extension/src/browser/boards/boards-config.tsx
index 4449c5cf1..d32094705 100644
--- a/arduino-ide-extension/src/browser/boards/boards-config.tsx
+++ b/arduino-ide-extension/src/browser/boards/boards-config.tsx
@@ -258,14 +258,14 @@ export class BoardsConfig extends React.Component<
 
   override render(): React.ReactNode {
     return (
-      <div className="body">
+      <>
         {this.renderContainer('boards', this.renderBoards.bind(this))}
         {this.renderContainer(
           'ports',
           this.renderPorts.bind(this),
           this.renderPortsFooter.bind(this)
         )}
-      </div>
+      </>
     );
   }
 
diff --git a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
index a1ddb7749..771787b9d 100644
--- a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
+++ b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
@@ -89,7 +89,7 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
           className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
           onClick={() => this.props.openBoardsConfig()}
         >
-          <div>{footerLabel}</div>
+          <div>{footerLabel}...</div>
         </div>
       </div>
     );
diff --git a/arduino-ide-extension/src/browser/style/boards-config-dialog.css b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
index 4b7d65ebd..1beb7c4f9 100644
--- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css
+++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css
@@ -2,9 +2,11 @@ div#select-board-dialog {
   margin: 5px;
 }
 
-div#select-board-dialog .selectBoardContainer .body {
+div#select-board-dialog .selectBoardContainer {
   display: flex;
+  gap: 10px;
   overflow: hidden;
+  max-height: 100%;
 }
 
 .select-board-dialog .head {
@@ -19,12 +21,13 @@ div.dialogContent.select-board-dialog > div.head .title {
   margin-bottom: 10px;
 }
 
-div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+
+div#select-board-dialog .selectBoardContainer .list .item.selected {
   background: var(--theia-secondaryButton-hoverBackground);
 }
 
-div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
-  color: var(--theia-list-activeSelectionIconForeground);
+div#select-board-dialog .selectBoardContainer .list .item.selected i {
+  color: var(--theia-arduino-branding-primary);
 }
 
 #select-board-dialog .selectBoardContainer .search,
@@ -34,7 +37,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   background: var(--theia-editor-background);
 }
 
-#select-board-dialog .selectBoardContainer .body .search input {
+#select-board-dialog .selectBoardContainer .search input {
   border: none;
   width: 100%;
   height: auto;
@@ -46,58 +49,63 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   color: var(--theia-input-foreground);
 }
 
-#select-board-dialog .selectBoardContainer .body .search input:focus {
+#select-board-dialog .selectBoardContainer .search input:focus {
   box-shadow: none;
 }
 
-#select-board-dialog .selectBoardContainer .body .container {
+#select-board-dialog .selectBoardContainer .container {
   flex: 1;
-  padding: 0px 10px 0px 0px;
-  min-width: 240px;
-  max-width: 240px;
+  overflow: hidden;
+  max-height: 100%;
+}
+
+#select-board-dialog .selectBoardContainer .container .content {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
 }
 
-#select-board-dialog .selectBoardContainer .body .left.container .content {
+#select-board-dialog .selectBoardContainer .left.container .content {
   margin: 0 5px 0 0;
 }
 
-#select-board-dialog .selectBoardContainer .body .right.container .content {
+#select-board-dialog .selectBoardContainer .right.container .content {
   margin: 0 0 0 5px;
 }
 
-#select-board-dialog .selectBoardContainer .body .container .content .title {
+#select-board-dialog .selectBoardContainer .container .content .title {
   color: var(--theia-editorWidget-foreground);
   padding: 0px 0px 10px 0px;
   text-transform: uppercase;
 }
 
-#select-board-dialog .selectBoardContainer .body .container .content .footer {
+#select-board-dialog .selectBoardContainer .container .content .footer {
   padding: 10px 5px 10px 0px;
 }
 
-#select-board-dialog .selectBoardContainer .body .container .content .loading {
+#select-board-dialog .selectBoardContainer .container .content .loading {
   font-size: var(--theia-ui-font-size1);
   color: var(--theia-editorWidget-foreground);
   padding: 10px 5px 10px 10px;
   text-transform: uppercase;
-  /* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
+  /* The max, min-height comes from `.list` 200px + 47px top padding - 2 * 10px top padding */
   max-height: 227px;
   min-height: 227px;
 }
 
-#select-board-dialog .selectBoardContainer .body .list .item {
+#select-board-dialog .selectBoardContainer .list .item {
   padding: 10px 5px 10px 10px;
   display: flex;
-  justify-content: end;
   white-space: nowrap;
   overflow-x: hidden;
+  flex: 1 0;
 }
 
-#select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
+#select-board-dialog .selectBoardContainer .list .item .selected-icon {
   margin-left: auto;
 }
 
-#select-board-dialog .selectBoardContainer .body .list .item .details {
+#select-board-dialog .selectBoardContainer .list .item .details {
   font-size: var(--theia-ui-font-size1);
   opacity: var(--theia-mod-disabled-opacity);
   width: 155px; /* used heuristics for the calculation */
@@ -106,43 +114,36 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   text-overflow: ellipsis;
 }
 
-#select-board-dialog .selectBoardContainer .body .list .item.missing {
+#select-board-dialog .selectBoardContainer .list .item.missing {
   opacity: var(--theia-mod-disabled-opacity);
 }
 
-#select-board-dialog .selectBoardContainer .body .list .item:hover {
+#select-board-dialog .selectBoardContainer .list .item:hover {
   background: var(--theia-secondaryButton-hoverBackground);
 }
 
-#select-board-dialog .selectBoardContainer .body .list .label {
-  max-width: 215px;
-  width: 215px;
+#select-board-dialog .selectBoardContainer .list .label {
   white-space: pre;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-#select-board-dialog .selectBoardContainer .body .list {
+#select-board-dialog .selectBoardContainer .list {
   max-height: 200px;
-  min-height: 200px;
   overflow-y: auto;
 }
 
-#select-board-dialog .selectBoardContainer .body .ports.list {
+#select-board-dialog .selectBoardContainer .ports.list {
   margin: 47px 0px 0px 0px; /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
 }
 
-#select-board-dialog .selectBoardContainer .body .search {
+#select-board-dialog .selectBoardContainer .search {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   padding-right: 5px;
 }
 
-.p-Widget.dialogOverlay .dialogContent.select-board-dialog {
-  width: 500px;
-}
-
 .arduino-boards-toolbar-item-container {
   align-items: center;
   background: var(--theia-arduino-toolbar-dropdown-background);
@@ -264,10 +265,20 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 
 /* High Contrast Theme rules */
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
-.hc-black.hc-theia.theia-hc #select-board-dialog .selectBoardContainer .body .list .item:hover {
+.hc-black.hc-theia.theia-hc #select-board-dialog .selectBoardContainer .list .item:hover {
   outline: 1px dashed var(--theia-focusBorder);
 }
 
-.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .list .item.selected {
   outline: 1px solid var(--theia-focusBorder);
 }
+
+@media only screen and (max-height: 400px) {
+  div.dialogContent.select-board-dialog > div.head {
+    display: none;
+  }
+
+  #select-board-dialog .selectBoardContainer .container .content .title {
+    display: none;
+  }
+}
diff --git a/i18n/en.json b/i18n/en.json
index 88c997c90..a1686b47a 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -6,10 +6,10 @@
     },
     "board": {
       "board": "Board{0}",
+      "boardConfigDialogTitle": "Select other board and port",
       "boardInfo": "Board Info",
       "configDialog1": "Select both a Board and a Port if you want to upload a sketch.",
       "configDialog2": "If you only select a Board you will be able to compile, but not to upload your sketch.",
-      "configDialogTitle": "Select Other Board & Port",
       "couldNotFindPreviouslySelected": "Could not find previously selected board '{0}' in installed platform '{1}'. Please manually reselect the board you want to use. Do you want to reselect it now?",
       "disconnected": "Disconnected",
       "getBoardInfo": "Get Board Info",
@@ -107,7 +107,6 @@
       "offlineIndicator": "You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.",
       "oldFormat": "The '{0}' still uses the old `.pde` format. Do you want to switch to the new `.ino` extension?",
       "processing": "Processing",
-      "selectBoard": "Select Board",
       "selectedOn": "on {0}",
       "serialMonitor": "Serial Monitor",
       "unknown": "Unknown"

From bfecd888fb16711f788bf7d547ef8a72c0bfb105 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Fri, 5 Aug 2022 18:06:39 +0200
Subject: [PATCH 6/8] refactor ide updater dialog: move buttons outside the
 dialog content

---
 .../ide-updater/ide-updater-component.tsx     | 112 ++------
 .../ide-updater/ide-updater-dialog.tsx        | 263 ++++++++++++------
 .../src/browser/style/ide-updater-dialog.css  |  43 ++-
 3 files changed, 229 insertions(+), 189 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
index 262aea518..8c07ff699 100644
--- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
@@ -1,4 +1,3 @@
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { nls } from '@theia/core/lib/common';
 import { shell } from 'electron';
 import * as React from '@theia/core/shared/react';
@@ -7,36 +6,32 @@ import ReactMarkdown from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
-export type IDEUpdaterComponentProps = {
-  updateInfo: UpdateInfo;
-  windowService: WindowService;
+export type UpdateProgress = {
+  progressInfo?: ProgressInfo | undefined;
   downloadFinished?: boolean;
   downloadStarted?: boolean;
-  progress?: ProgressInfo;
   error?: Error;
-  onDownload: () => void;
-  onClose: () => void;
-  onSkipVersion: () => void;
-  onCloseAndInstall: () => void;
+};
+
+export type IDEUpdaterComponentProps = {
+  updateInfo: UpdateInfo;
+  updateProgress: UpdateProgress;
 };
 
 export const IDEUpdaterComponent = ({
-  updateInfo: { version, releaseNotes },
-  downloadStarted = false,
-  downloadFinished = false,
-  windowService,
-  progress,
-  error,
-  onDownload,
-  onClose,
-  onSkipVersion,
-  onCloseAndInstall,
+  updateInfo,
+  updateProgress: {
+    downloadStarted = false,
+    downloadFinished = false,
+    progressInfo,
+    error,
+  },
 }: IDEUpdaterComponentProps): React.ReactElement => {
-  const changelogDivRef = React.useRef() as React.MutableRefObject<
-    HTMLDivElement
-  >;
+  const { version, releaseNotes } = updateInfo;
+  const changelogDivRef =
+    React.useRef() as React.MutableRefObject<HTMLDivElement>;
   React.useEffect(() => {
-    if (!!releaseNotes) {
+    if (!!releaseNotes && changelogDivRef.current) {
       let changelog: string;
       if (typeof releaseNotes === 'string') changelog = releaseNotes;
       else
@@ -58,12 +53,7 @@ export const IDEUpdaterComponent = ({
         changelogDivRef.current
       );
     }
-  }, [releaseNotes]);
-  const closeButton = (
-    <button onClick={onClose} type="button" className="theia-button secondary">
-      {nls.localize('arduino/ide-updater/notNowButton', 'Not now')}
-    </button>
-  );
+  }, [updateInfo]);
 
   const DownloadCompleted: () => React.ReactElement = () => (
     <div className="ide-updater-dialog--downloaded">
@@ -80,19 +70,6 @@ export const IDEUpdaterComponent = ({
           'Close the software and install the update on your machine.'
         )}
       </div>
-      <div className="buttons-container">
-        {closeButton}
-        <button
-          onClick={onCloseAndInstall}
-          type="button"
-          className="theia-button close-and-install"
-        >
-          {nls.localize(
-            'arduino/ide-updater/closeAndInstallButton',
-            'Close and Install'
-          )}
-        </button>
-      </div>
     </div>
   );
 
@@ -104,7 +81,7 @@ export const IDEUpdaterComponent = ({
           'Downloading the latest version of the Arduino IDE.'
         )}
       </div>
-      <ProgressBar percent={progress?.percent} showPercentage />
+      <ProgressBar percent={progressInfo?.percent} showPercentage />
     </div>
   );
 
@@ -130,46 +107,14 @@ export const IDEUpdaterComponent = ({
           )}
         </div>
         {releaseNotes && (
-          <div className="dialogRow">
-            <div className="changelog-container" ref={changelogDivRef} />
+          <div className="dialogRow changelog-container">
+            <div className="changelog" ref={changelogDivRef} />
           </div>
         )}
-        <div className="buttons-container">
-          <button
-            onClick={onSkipVersion}
-            type="button"
-            className="theia-button secondary skip-version"
-          >
-            {nls.localize(
-              'arduino/ide-updater/skipVersionButton',
-              'Skip Version'
-            )}
-          </button>
-          <div className="push"></div>
-          {closeButton}
-          <button
-            onClick={onDownload}
-            type="button"
-            className="theia-button primary"
-          >
-            {nls.localize('arduino/ide-updater/downloadButton', 'Download')}
-          </button>
-        </div>
       </div>
     </div>
   );
 
-  const onGoToDownloadClick = (
-    event: React.SyntheticEvent<HTMLAnchorElement, Event>
-  ) => {
-    const { target } = event.nativeEvent;
-    if (target instanceof HTMLAnchorElement) {
-      event.nativeEvent.preventDefault();
-      windowService.openNewWindow(target.href, { external: true });
-      onClose();
-    }
-  };
-
   const GoToDownloadPage: () => React.ReactElement = () => (
     <div className="ide-updater-dialog--go-to-download-page">
       <div>
@@ -178,19 +123,6 @@ export const IDEUpdaterComponent = ({
           "An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there."
         )}
       </div>
-      <div className="buttons-container">
-        {closeButton}
-        <a
-          className="theia-button primary"
-          href="https://www.arduino.cc/en/software#experimental-software"
-          onClick={onGoToDownloadClick}
-        >
-          {nls.localize(
-            'arduino/ide-updater/goToDownloadButton',
-            'Go To Download'
-          )}
-        </a>
-      </div>
     </div>
   );
 
diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
index 4752de332..872dd4095 100644
--- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
@@ -5,109 +5,49 @@ import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { nls } from '@theia/core';
-import { IDEUpdaterComponent } from './ide-updater-component';
-
+import { Disposable, nls } from '@theia/core';
+import { IDEUpdaterComponent, UpdateProgress } from './ide-updater-component';
 import {
   IDEUpdater,
   IDEUpdaterClient,
-  ProgressInfo,
   SKIP_IDE_VERSION,
   UpdateInfo,
 } from '../../../common/protocol/ide-updater';
 import { LocalStorageService } from '@theia/core/lib/browser';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 
+const DOWNLOAD_PAGE_URL =
+  'https://www.arduino.cc/en/software#experimental-software';
+
 @injectable()
 export class IDEUpdaterDialogWidget extends ReactWidget {
-  protected isOpen = new Object();
-  updateInfo: UpdateInfo;
-  progressInfo: ProgressInfo | undefined;
-  error: Error | undefined;
-  downloadFinished: boolean;
-  downloadStarted: boolean;
-  onClose: () => void;
-
-  @inject(IDEUpdater)
-  protected readonly updater: IDEUpdater;
-
-  @inject(IDEUpdaterClient)
-  protected readonly updaterClient: IDEUpdaterClient;
-
-  @inject(LocalStorageService)
-  protected readonly localStorageService: LocalStorageService;
-
-  @inject(WindowService)
-  protected windowService: WindowService;
-
-  init(updateInfo: UpdateInfo, onClose: () => void): void {
-    this.updateInfo = updateInfo;
-    this.progressInfo = undefined;
-    this.error = undefined;
-    this.downloadStarted = false;
-    this.downloadFinished = false;
-    this.onClose = onClose;
-
-    this.updaterClient.onError((e) => {
-      this.error = e;
-      this.update();
-    });
-    this.updaterClient.onDownloadProgressChanged((e) => {
-      this.progressInfo = e;
-      this.update();
-    });
-    this.updaterClient.onDownloadFinished((e) => {
-      this.downloadFinished = true;
-      this.update();
-    });
-  }
+  private _updateInfo: UpdateInfo;
+  private _updateProgress: UpdateProgress = {};
 
-  async onSkipVersion(): Promise<void> {
-    this.localStorageService.setData<string>(
-      SKIP_IDE_VERSION,
-      this.updateInfo.version
-    );
-    this.close();
-  }
-
-  override close(): void {
-    super.close();
-    this.onClose();
+  setUpdateInfo(updateInfo: UpdateInfo): void {
+    this._updateInfo = updateInfo;
+    this.update();
   }
 
-  onDispose(): void {
-    if (this.downloadStarted && !this.downloadFinished)
-      this.updater.stopDownload();
+  setUpdateProgress(updateProgress: UpdateProgress): void {
+    this._updateProgress = { ...this._updateProgress, ...updateProgress };
+    this.update();
   }
 
-  async onDownload(): Promise<void> {
-    this.progressInfo = undefined;
-    this.downloadStarted = true;
-    this.error = undefined;
-    this.updater.downloadUpdate();
-    this.update();
+  get updateInfo(): UpdateInfo {
+    return this._updateInfo;
   }
 
-  onCloseAndInstall(): void {
-    this.updater.quitAndInstall();
+  get updateProgress(): UpdateProgress {
+    return this._updateProgress;
   }
 
   protected render(): React.ReactNode {
-    return !!this.updateInfo ? (
-      <form>
-        <IDEUpdaterComponent
-          updateInfo={this.updateInfo}
-          windowService={this.windowService}
-          downloadStarted={this.downloadStarted}
-          downloadFinished={this.downloadFinished}
-          progress={this.progressInfo}
-          error={this.error}
-          onClose={this.close.bind(this)}
-          onSkipVersion={this.onSkipVersion.bind(this)}
-          onDownload={this.onDownload.bind(this)}
-          onCloseAndInstall={this.onCloseAndInstall.bind(this)}
-        />
-      </form>
+    return !!this._updateInfo ? (
+      <IDEUpdaterComponent
+        updateInfo={this._updateInfo}
+        updateProgress={this._updateProgress}
+      />
     ) : null;
   }
 }
@@ -117,8 +57,23 @@ export class IDEUpdaterDialogProps extends DialogProps {}
 
 @injectable()
 export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
+  private onError: Disposable;
+  private onDownloadProgressChanged: Disposable;
+  onDownloadFinished: Disposable;
   @inject(IDEUpdaterDialogWidget)
-  protected readonly widget: IDEUpdaterDialogWidget;
+  private readonly widget: IDEUpdaterDialogWidget;
+
+  @inject(IDEUpdater)
+  private readonly updater: IDEUpdater;
+
+  @inject(IDEUpdaterClient)
+  private readonly updaterClient: IDEUpdaterClient;
+
+  @inject(LocalStorageService)
+  private readonly localStorageService: LocalStorageService;
+
+  @inject(WindowService)
+  private readonly windowService: WindowService;
 
   constructor(
     @inject(IDEUpdaterDialogProps)
@@ -135,6 +90,34 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
     this.acceptButton = undefined;
   }
 
+  private init(): void {
+    this.widget.setUpdateProgress({
+      progressInfo: undefined,
+      downloadStarted: false,
+      downloadFinished: false,
+      error: undefined,
+    });
+    if (!this.onError) {
+      this.onError = this.updaterClient.onError((error) => {
+        this.appendErrorButtons();
+        this.widget.setUpdateProgress({ error });
+      });
+    }
+    if (!this.onDownloadProgressChanged) {
+      this.onDownloadProgressChanged =
+        this.updaterClient.onDownloadProgressChanged((progressInfo) => {
+          this.widget.setUpdateProgress({ progressInfo });
+        });
+    }
+    if (!this.onDownloadFinished) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.onDownloadFinished = this.updaterClient.onDownloadFinished((_) => {
+        this.appendInstallButtons();
+        this.widget.setUpdateProgress({ downloadFinished: true });
+      });
+    }
+  }
+
   get value(): UpdateInfo {
     return this.widget.updateInfo;
   }
@@ -144,24 +127,118 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
       Widget.detach(this.widget);
     }
     Widget.attach(this.widget, this.contentNode);
+    this.appendInitialButtons();
     super.onAfterAttach(msg);
-    this.update();
+  }
+
+  private clearButtons(): void {
+    while (this.controlPanel.firstChild) {
+      this.controlPanel.removeChild(this.controlPanel.firstChild);
+    }
+    this.closeButton = undefined;
+  }
+
+  private appendNotNowButton(): void {
+    this.appendCloseButton(
+      nls.localize('arduino/ide-updater/notNowButton', 'Not now')
+    );
+    if (this.closeButton) {
+      this.addCloseAction(this.closeButton, 'click');
+    }
+  }
+
+  private appendInitialButtons(): void {
+    this.clearButtons();
+
+    const skipVersionButton = this.createButton(
+      nls.localize('arduino/ide-updater/skipVersionButton', 'Skip Version')
+    );
+    skipVersionButton.classList.add('secondary');
+    skipVersionButton.classList.add('skip-version-button');
+    this.addAction(skipVersionButton, this.skipVersion.bind(this), 'click');
+    this.controlPanel.appendChild(skipVersionButton);
+
+    this.appendNotNowButton();
+
+    const downloadButton = this.createButton(
+      nls.localize('arduino/ide-updater/downloadButton', 'Download')
+    );
+    this.addAction(downloadButton, this.startDownload.bind(this), 'click');
+    this.controlPanel.appendChild(downloadButton);
+    downloadButton.focus();
+  }
+
+  private appendInstallButtons(): void {
+    this.clearButtons();
+    this.appendNotNowButton();
+
+    const closeAndInstallButton = this.createButton(
+      nls.localize(
+        'arduino/ide-updater/closeAndInstallButton',
+        'Close and Install'
+      )
+    );
+    this.addAction(
+      closeAndInstallButton,
+      this.closeAndInstall.bind(this),
+      'click'
+    );
+    this.controlPanel.appendChild(closeAndInstallButton);
+    closeAndInstallButton.focus();
+  }
+
+  private appendErrorButtons(): void {
+    this.clearButtons();
+    this.appendNotNowButton();
+
+    const goToDownloadPageButton = this.createButton(
+      nls.localize('arduino/ide-updater/goToDownloadButton', 'Go To Download')
+    );
+    this.addAction(
+      goToDownloadPageButton,
+      this.openDownloadPage.bind(this),
+      'click'
+    );
+    this.controlPanel.appendChild(goToDownloadPageButton);
+    goToDownloadPageButton.focus();
+  }
+
+  private openDownloadPage(): void {
+    this.windowService.openNewWindow(DOWNLOAD_PAGE_URL, { external: true });
+    this.close();
+  }
+
+  private skipVersion(): void {
+    this.localStorageService.setData<string>(
+      SKIP_IDE_VERSION,
+      this.widget.updateInfo.version
+    );
+    this.close();
+  }
+
+  private startDownload(): void {
+    this.widget.setUpdateProgress({
+      downloadStarted: true,
+    });
+    this.clearButtons();
+    this.updater.downloadUpdate();
+  }
+
+  private closeAndInstall() {
+    this.updater.quitAndInstall.bind(this);
+    this.close();
   }
 
   override async open(
     data: UpdateInfo | undefined = undefined
   ): Promise<UpdateInfo | undefined> {
     if (data && data.version) {
-      this.widget.init(data, this.close.bind(this));
+      this.init();
+      this.widget.setUpdateInfo(data);
       return super.open();
     }
   }
 
-  protected override onUpdateRequest(msg: Message): void {
-    super.onUpdateRequest(msg);
-    this.widget.update();
-  }
-
   protected override onActivateRequest(msg: Message): void {
     super.onActivateRequest(msg);
     this.widget.activate();
@@ -169,6 +246,12 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
 
   override close(): void {
     this.widget.dispose();
+    if (
+      this.widget.updateProgress?.downloadStarted &&
+      !this.widget.updateProgress?.downloadFinished
+    ) {
+      this.updater.stopDownload();
+    }
     super.close();
   }
 }
diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
index 7171fd13c..abdf2eec6 100644
--- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
+++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css
@@ -10,6 +10,10 @@
   display: flex;
 }
 
+.ide-updater-dialog--downloading {
+  flex: 1;
+}
+
 .ide-updater-dialog--logo-container {
   margin-right: 28px;
 }
@@ -23,39 +27,49 @@
 .dialogContent.ide-updater-dialog
   .ide-updater-dialog--content
   .ide-updater-dialog--new-version-text.dialogSection {
-  margin-top: 0;
+  display: flex;
   flex: 1;
+  flex-direction: column;
+  margin-top: 0;
   min-width: 0;
 }
 
-.ide-updater-dialog .changelog-container {
+.ide-updater-dialog .changelog {
   color: var(--theia-editor-foreground);
   background-color: var(--theia-editor-background);
-  border: 1px solid var(--theia-editorWidget-border);
-  border-radius: 2px;
   font-size: 12px;
-  height: 180px;
   overflow: auto;
   padding: 0 12px;
   cursor: text;
 }
 
-.ide-updater-dialog .changelog-container a {
+.dialogContent.ide-updater-dialog
+  .ide-updater-dialog--content
+  .ide-updater-dialog--new-version-text
+  .dialogRow.changelog-container {
+  align-items: flex-start;
+  border: 1px solid var(--theia-editorWidget-border);
+  border-radius: 2px;
+  overflow: auto;
+  max-height: 180px;
+}
+
+.ide-updater-dialog .changelog a {
   color: var(--theia-textLink-foreground);
 }
 
-.ide-updater-dialog .changelog-container a:hover {
+.ide-updater-dialog .changelog a:hover {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.ide-updater-dialog .changelog-container code {
+.ide-updater-dialog .changelog code {
   background: var(--theia-textBlockQuote-background);
   border-radius: 2px;
   padding: 0 2px;
 }
 
-.ide-updater-dialog .changelog-container a code {
+.ide-updater-dialog .changelog a code {
   color: var(--theia-textLink-foreground);
 }
 
@@ -79,3 +93,14 @@
 .ide-updater-dialog .buttons-container .push {
   margin-right: auto;
 }
+
+.ide-updater-dialog--content {
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+#ide-updater-dialog-container .skip-version-button {
+  margin-left: 79px;
+  margin-right: auto;
+}

From 87f54f2d94615413c17c9875975e8ab5a328a7e6 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 11 Aug 2022 15:33:26 +0200
Subject: [PATCH 7/8] refactor ide updater dialog: clean-up code and rename
 events

---
 .../ide-updater/ide-updater-component.tsx     |  8 +--
 .../ide-updater/ide-updater-dialog.tsx        | 61 ++++++++-----------
 .../ide-updater/ide-updater-client-impl.ts    | 51 +++++++++-------
 .../src/common/protocol/ide-updater.ts        | 20 +++---
 .../ide-updater/ide-updater-impl.ts           | 16 +++--
 5 files changed, 77 insertions(+), 79 deletions(-)

diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
index 8c07ff699..93da416e5 100644
--- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx
@@ -6,17 +6,17 @@ import ReactMarkdown from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
-export type UpdateProgress = {
+export interface UpdateProgress {
   progressInfo?: ProgressInfo | undefined;
   downloadFinished?: boolean;
   downloadStarted?: boolean;
   error?: Error;
-};
+}
 
-export type IDEUpdaterComponentProps = {
+export interface IDEUpdaterComponentProps {
   updateInfo: UpdateInfo;
   updateProgress: UpdateProgress;
-};
+}
 
 export const IDEUpdaterComponent = ({
   updateInfo,
diff --git a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
index 872dd4095..06e357e8c 100644
--- a/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
+++ b/arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx
@@ -1,11 +1,15 @@
 import * as React from '@theia/core/shared/react';
-import { inject, injectable } from '@theia/core/shared/inversify';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { DialogProps } from '@theia/core/lib/browser/dialogs';
 import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { Disposable, nls } from '@theia/core';
+import { nls } from '@theia/core';
 import { IDEUpdaterComponent, UpdateProgress } from './ide-updater-component';
 import {
   IDEUpdater,
@@ -29,7 +33,7 @@ export class IDEUpdaterDialogWidget extends ReactWidget {
     this.update();
   }
 
-  setUpdateProgress(updateProgress: UpdateProgress): void {
+  mergeUpdateProgress(updateProgress: UpdateProgress): void {
     this._updateProgress = { ...this._updateProgress, ...updateProgress };
     this.update();
   }
@@ -57,9 +61,6 @@ export class IDEUpdaterDialogProps extends DialogProps {}
 
 @injectable()
 export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
-  private onError: Disposable;
-  private onDownloadProgressChanged: Disposable;
-  onDownloadFinished: Disposable;
   @inject(IDEUpdaterDialogWidget)
   private readonly widget: IDEUpdaterDialogWidget;
 
@@ -90,32 +91,19 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
     this.acceptButton = undefined;
   }
 
-  private init(): void {
-    this.widget.setUpdateProgress({
-      progressInfo: undefined,
-      downloadStarted: false,
-      downloadFinished: false,
-      error: undefined,
+  @postConstruct()
+  protected init(): void {
+    this.updaterClient.onUpdaterDidFail((error) => {
+      this.appendErrorButtons();
+      this.widget.mergeUpdateProgress({ error });
+    });
+    this.updaterClient.onDownloadProgressDidChange((progressInfo) => {
+      this.widget.mergeUpdateProgress({ progressInfo });
+    });
+    this.updaterClient.onDownloadDidFinish(() => {
+      this.appendInstallButtons();
+      this.widget.mergeUpdateProgress({ downloadFinished: true });
     });
-    if (!this.onError) {
-      this.onError = this.updaterClient.onError((error) => {
-        this.appendErrorButtons();
-        this.widget.setUpdateProgress({ error });
-      });
-    }
-    if (!this.onDownloadProgressChanged) {
-      this.onDownloadProgressChanged =
-        this.updaterClient.onDownloadProgressChanged((progressInfo) => {
-          this.widget.setUpdateProgress({ progressInfo });
-        });
-    }
-    if (!this.onDownloadFinished) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      this.onDownloadFinished = this.updaterClient.onDownloadFinished((_) => {
-        this.appendInstallButtons();
-        this.widget.setUpdateProgress({ downloadFinished: true });
-      });
-    }
   }
 
   get value(): UpdateInfo {
@@ -217,7 +205,7 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
   }
 
   private startDownload(): void {
-    this.widget.setUpdateProgress({
+    this.widget.mergeUpdateProgress({
       downloadStarted: true,
     });
     this.clearButtons();
@@ -225,7 +213,7 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
   }
 
   private closeAndInstall() {
-    this.updater.quitAndInstall.bind(this);
+    this.updater.quitAndInstall();
     this.close();
   }
 
@@ -233,7 +221,12 @@ export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
     data: UpdateInfo | undefined = undefined
   ): Promise<UpdateInfo | undefined> {
     if (data && data.version) {
-      this.init();
+      this.widget.mergeUpdateProgress({
+        progressInfo: undefined,
+        downloadStarted: false,
+        downloadFinished: false,
+        error: undefined,
+      });
       this.widget.setUpdateInfo(data);
       return super.open();
     }
diff --git a/arduino-ide-extension/src/browser/ide-updater/ide-updater-client-impl.ts b/arduino-ide-extension/src/browser/ide-updater/ide-updater-client-impl.ts
index 8f4df3d6e..772e66669 100644
--- a/arduino-ide-extension/src/browser/ide-updater/ide-updater-client-impl.ts
+++ b/arduino-ide-extension/src/browser/ide-updater/ide-updater-client-impl.ts
@@ -5,36 +5,43 @@ import { IDEUpdaterClient } from '../../common/protocol/ide-updater';
 
 @injectable()
 export class IDEUpdaterClientImpl implements IDEUpdaterClient {
-  protected readonly onErrorEmitter = new Emitter<Error>();
-  protected readonly onCheckingForUpdateEmitter = new Emitter<void>();
-  protected readonly onUpdateAvailableEmitter = new Emitter<UpdateInfo>();
-  protected readonly onUpdateNotAvailableEmitter = new Emitter<UpdateInfo>();
-  protected readonly onDownloadProgressEmitter = new Emitter<ProgressInfo>();
-  protected readonly onDownloadFinishedEmitter = new Emitter<UpdateInfo>();
+  protected readonly onUpdaterDidFailEmitter = new Emitter<Error>();
+  protected readonly onUpdaterDidCheckForUpdateEmitter = new Emitter<void>();
+  protected readonly onUpdaterDidFindUpdateAvailableEmitter =
+    new Emitter<UpdateInfo>();
+  protected readonly onUpdaterDidNotFindUpdateAvailableEmitter =
+    new Emitter<UpdateInfo>();
+  protected readonly onDownloadProgressDidChangeEmitter =
+    new Emitter<ProgressInfo>();
+  protected readonly onDownloadDidFinishEmitter = new Emitter<UpdateInfo>();
 
-  readonly onError = this.onErrorEmitter.event;
-  readonly onCheckingForUpdate = this.onCheckingForUpdateEmitter.event;
-  readonly onUpdateAvailable = this.onUpdateAvailableEmitter.event;
-  readonly onUpdateNotAvailable = this.onUpdateNotAvailableEmitter.event;
-  readonly onDownloadProgressChanged = this.onDownloadProgressEmitter.event;
-  readonly onDownloadFinished = this.onDownloadFinishedEmitter.event;
+  readonly onUpdaterDidFail = this.onUpdaterDidFailEmitter.event;
+  readonly onUpdaterDidCheckForUpdate =
+    this.onUpdaterDidCheckForUpdateEmitter.event;
+  readonly onUpdaterDidFindUpdateAvailable =
+    this.onUpdaterDidFindUpdateAvailableEmitter.event;
+  readonly onUpdaterDidNotFindUpdateAvailable =
+    this.onUpdaterDidNotFindUpdateAvailableEmitter.event;
+  readonly onDownloadProgressDidChange =
+    this.onDownloadProgressDidChangeEmitter.event;
+  readonly onDownloadDidFinish = this.onDownloadDidFinishEmitter.event;
 
-  notifyError(message: Error): void {
-    this.onErrorEmitter.fire(message);
+  notifyUpdaterFailed(message: Error): void {
+    this.onUpdaterDidFailEmitter.fire(message);
   }
-  notifyCheckingForUpdate(message: void): void {
-    this.onCheckingForUpdateEmitter.fire(message);
+  notifyCheckedForUpdate(message: void): void {
+    this.onUpdaterDidCheckForUpdateEmitter.fire(message);
   }
-  notifyUpdateAvailable(message: UpdateInfo): void {
-    this.onUpdateAvailableEmitter.fire(message);
+  notifyUpdateAvailableFound(message: UpdateInfo): void {
+    this.onUpdaterDidFindUpdateAvailableEmitter.fire(message);
   }
-  notifyUpdateNotAvailable(message: UpdateInfo): void {
-    this.onUpdateNotAvailableEmitter.fire(message);
+  notifyUpdateAvailableNotFound(message: UpdateInfo): void {
+    this.onUpdaterDidNotFindUpdateAvailableEmitter.fire(message);
   }
   notifyDownloadProgressChanged(message: ProgressInfo): void {
-    this.onDownloadProgressEmitter.fire(message);
+    this.onDownloadProgressDidChangeEmitter.fire(message);
   }
   notifyDownloadFinished(message: UpdateInfo): void {
-    this.onDownloadFinishedEmitter.fire(message);
+    this.onDownloadDidFinishEmitter.fire(message);
   }
 }
diff --git a/arduino-ide-extension/src/common/protocol/ide-updater.ts b/arduino-ide-extension/src/common/protocol/ide-updater.ts
index e1c79b188..5608e63be 100644
--- a/arduino-ide-extension/src/common/protocol/ide-updater.ts
+++ b/arduino-ide-extension/src/common/protocol/ide-updater.ts
@@ -56,16 +56,16 @@ export interface IDEUpdater extends JsonRpcServer<IDEUpdaterClient> {
 
 export const IDEUpdaterClient = Symbol('IDEUpdaterClient');
 export interface IDEUpdaterClient {
-  onError: Event<Error>;
-  onCheckingForUpdate: Event<void>;
-  onUpdateAvailable: Event<UpdateInfo>;
-  onUpdateNotAvailable: Event<UpdateInfo>;
-  onDownloadProgressChanged: Event<ProgressInfo>;
-  onDownloadFinished: Event<UpdateInfo>;
-  notifyError(message: Error): void;
-  notifyCheckingForUpdate(message: void): void;
-  notifyUpdateAvailable(message: UpdateInfo): void;
-  notifyUpdateNotAvailable(message: UpdateInfo): void;
+  onUpdaterDidFail: Event<Error>;
+  onUpdaterDidCheckForUpdate: Event<void>;
+  onUpdaterDidFindUpdateAvailable: Event<UpdateInfo>;
+  onUpdaterDidNotFindUpdateAvailable: Event<UpdateInfo>;
+  onDownloadProgressDidChange: Event<ProgressInfo>;
+  onDownloadDidFinish: Event<UpdateInfo>;
+  notifyUpdaterFailed(message: Error): void;
+  notifyCheckedForUpdate(message: void): void;
+  notifyUpdateAvailableFound(message: UpdateInfo): void;
+  notifyUpdateAvailableNotFound(message: UpdateInfo): void;
   notifyDownloadProgressChanged(message: ProgressInfo): void;
   notifyDownloadFinished(message: UpdateInfo): void;
 }
diff --git a/arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts b/arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts
index 67c65f525..8d51a64c2 100644
--- a/arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts
+++ b/arduino-ide-extension/src/electron-main/ide-updater/ide-updater-impl.ts
@@ -19,13 +19,13 @@ export class IDEUpdaterImpl implements IDEUpdater {
 
   constructor() {
     this.updater.on('checking-for-update', (e) => {
-      this.clients.forEach((c) => c.notifyCheckingForUpdate(e));
+      this.clients.forEach((c) => c.notifyCheckedForUpdate(e));
     });
     this.updater.on('update-available', (e) => {
-      this.clients.forEach((c) => c.notifyUpdateAvailable(e));
+      this.clients.forEach((c) => c.notifyUpdateAvailableFound(e));
     });
     this.updater.on('update-not-available', (e) => {
-      this.clients.forEach((c) => c.notifyUpdateNotAvailable(e));
+      this.clients.forEach((c) => c.notifyUpdateAvailableNotFound(e));
     });
     this.updater.on('download-progress', (e) => {
       this.clients.forEach((c) => c.notifyDownloadProgressChanged(e));
@@ -34,7 +34,7 @@ export class IDEUpdaterImpl implements IDEUpdater {
       this.clients.forEach((c) => c.notifyDownloadFinished(e));
     });
     this.updater.on('error', (e) => {
-      this.clients.forEach((c) => c.notifyError(e));
+      this.clients.forEach((c) => c.notifyUpdaterFailed(e));
     });
   }
 
@@ -58,10 +58,8 @@ export class IDEUpdaterImpl implements IDEUpdater {
       this.isAlreadyChecked = true;
     }
 
-    const {
-      updateInfo,
-      cancellationToken,
-    } = await this.updater.checkForUpdates();
+    const { updateInfo, cancellationToken } =
+      await this.updater.checkForUpdates();
 
     this.cancellationToken = cancellationToken;
     if (this.updater.currentVersion.compare(updateInfo.version) === -1) {
@@ -104,7 +102,7 @@ export class IDEUpdaterImpl implements IDEUpdater {
       await this.updater.downloadUpdate(this.cancellationToken);
     } catch (e) {
       if (e.message === 'cancelled') return;
-      this.clients.forEach((c) => c.notifyError(e));
+      this.clients.forEach((c) => c.notifyUpdaterFailed(e));
     }
   }
 

From e2c74addcc738ce81b42b1ba166dca0f19f5cb72 Mon Sep 17 00:00:00 2001
From: Alberto Iannaccone <a.iannaccone@arduino.cc>
Date: Thu, 18 Aug 2022 11:47:03 +0200
Subject: [PATCH 8/8] fix board config dialog title case and and remove double
 ellipsis

---
 .../src/browser/arduino-ide-frontend-module.ts                  | 2 +-
 .../src/browser/boards/boards-toolbar-item.tsx                  | 2 +-
 i18n/en.json                                                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
index 3cfc39573..622819e67 100644
--- a/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
+++ b/arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts
@@ -455,7 +455,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(BoardsConfigDialogProps).toConstantValue({
     title: nls.localize(
       'arduino/board/boardConfigDialogTitle',
-      'Select other board and port'
+      'Select Other Board and Port'
     ),
   });
 
diff --git a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
index 771787b9d..a1ddb7749 100644
--- a/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
+++ b/arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx
@@ -89,7 +89,7 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
           className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
           onClick={() => this.props.openBoardsConfig()}
         >
-          <div>{footerLabel}...</div>
+          <div>{footerLabel}</div>
         </div>
       </div>
     );
diff --git a/i18n/en.json b/i18n/en.json
index a1686b47a..09aeb2aea 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -6,7 +6,7 @@
     },
     "board": {
       "board": "Board{0}",
-      "boardConfigDialogTitle": "Select other board and port",
+      "boardConfigDialogTitle": "Select Other Board and Port",
       "boardInfo": "Board Info",
       "configDialog1": "Select both a Board and a Port if you want to upload a sketch.",
       "configDialog2": "If you only select a Board you will be able to compile, but not to upload your sketch.",