#5498 Upgrade to puppeteer v22

.github/dependabot.yml

@@ -28,8 +28,6 @@ updates:
         versions: [ ">=1.0.1" ]
       - dependency-name: "openpgp"
         update-types: ["version-update:semver-major"]
-      - dependency-name: "puppeteer"
-        update-types: ["version-update:semver-major"]
       - dependency-name: "web-ext"
         update-types: ["version-update:semver-major"]
       - dependency-name: "@openpgp/web-stream-tools"

.semaphore/semaphore.yml

@@ -53,7 +53,7 @@ blocks:
               shopt -s nullglob
               for file in build/test/test/debugArtifacts/debugHtmlAttachment-*.html; do
                 echo "Uploading debug file $file as job artifact..."
-                artifact push job "$file"
+                artifact push job "$file" --force
               done
 
   - name: Live UI Gmail tests
@@ -89,7 +89,7 @@ blocks:
               shopt -s nullglob
               for file in build/test/test/debugArtifacts/debugHtmlAttachment-*.html; do
                 echo "Uploading debug file $file as job artifact..."
-                artifact push job "$file"
+                artifact push job "$file" --force
               done
 
   - name: Other tests

conf/tsconfig.content_scripts.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "module": "es6",
     "forceConsistentCasingInFileNames": true,
     "noImplicitReturns": true,

conf/tsconfig.streams.json

@@ -1,10 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "target": "ES2022",
+    "lib": ["es6", "dom"],
     "allowJs": true,
     "alwaysStrict": true,
     "noImplicitAny": true,
@@ -16,7 +13,5 @@
     "outDir": "../build/streams",
     "skipLibCheck": true
   },
-  "include": [
-    "../node_modules/@openpgp/web-stream-tools/lib/*.js"
-  ]
-}
+  "include": ["../node_modules/@openpgp/web-stream-tools/lib/*.js"]
+}

conf/tsconfig.tooling.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "lib": ["es6", "dom"],
     "alwaysStrict": true,
     "noImplicitAny": true,

extension/chrome/elements/compose-modules/compose-recipients-module.ts

@@ -201,7 +201,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
         this.view.errModule.debug(`parseRenderRecipients(force: ${force}).4`);
       } else {
         this.view.sizeModule.setInputTextHeightManuallyIfNeeded();
-        $('body').attr('data-test-state', 'ready');
+        document.querySelector('body')?.setAttribute('data-test-state', 'ready');
       }
     }
   };
@@ -282,7 +282,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
 
   public evaluateRecipients = async (recipientEls: ValidRecipientElement[], triggerCallback = true) => {
     this.view.errModule.debug(`evaluateRecipients`);
-    $('body').attr('data-test-state', 'working');
+    document.querySelector('body')?.setAttribute('data-test-state', 'working');
     for (const recipientEl of recipientEls) {
       this.view.S.now('send_btn_text').text(this.BTN_LOADING);
       this.view.sizeModule.setInputTextHeightManuallyIfNeeded();
@@ -307,7 +307,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
       }
     }
     this.setEmailsPreview();
-    $('body').attr('data-test-state', 'ready');
+    document.querySelector('body')?.setAttribute('data-test-state', 'ready');
     this.view.sizeModule.setInputTextHeightManuallyIfNeeded();
   };
 

extension/chrome/elements/compose-modules/compose-render-module.ts

@@ -193,7 +193,7 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
   };
 
   public closeMsg = () => {
-    $('body').attr('data-test-state', 'closed'); // used by automated tests
+    document.querySelector('body')?.setAttribute('data-test-state', 'closed'); // used by automated tests
     if (this.view.isReplyBox) {
       BrowserMsg.send.closeReplyMessage(this.view.parentTabId, { frameId: this.view.frameId });
     } else {
@@ -472,7 +472,7 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
         .filter(r => r.evaluating)
         .map(r => r.evaluating)
     );
-    $('body').attr('data-test-state', 'ready'); // set as ready so that automated tests can evaluate results
+    document.querySelector('body')?.setAttribute('data-test-state', 'ready'); // set as ready so that automated tests can evaluate results
   };
 
   private renderReplySuccessAttachments = (attachments: Attachment[], msgId: string, isEncrypted: boolean) => {

extension/chrome/elements/compose-modules/formatters/base-mail-formatter.ts

@@ -15,7 +15,10 @@ export class BaseMailFormatter {
   protected richtext: boolean;
   protected acctEmail: string;
 
-  public constructor(view: ComposeView, protected isDraft = false) {
+  public constructor(
+    view: ComposeView,
+    protected isDraft = false
+  ) {
     this.view = view;
     this.richtext = view.sendBtnModule.popover.choices.richtext;
     this.acctEmail = this.view.acctEmail;

extension/chrome/settings/modules/contacts.htm

@@ -53,7 +53,7 @@ <h1></h1>
           proceeding.
         </div>
         <div class="line" id="file_import">
-          <a id="fineuploader_button" href="#">Select a file</a> or paste public key(s) below:
+          <a id="fineuploader_button" href="#" data-test="action-upload-key">Select a file</a> or paste public key(s) below:
           <div id="fineuploader" class="display_none"></div>
         </div>
         <div id="processed" class="mt-20"></div>

extension/css/fine-uploader-new.css

@@ -19,7 +19,10 @@
 /* Buttons
 ------------------------------------------ */
 .qq-btn {
-  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset, 1px 0 1px rgba(255, 255, 255, 0.07) inset, 0 1px 0 rgba(0, 0, 0, 0.36),
+  box-shadow:
+    0 1px 1px rgba(255, 255, 255, 0.37) inset,
+    1px 0 1px rgba(255, 255, 255, 0.07) inset,
+    0 1px 0 rgba(0, 0, 0, 0.36),
     0 -2px 12px rgba(0, 0, 0, 0.08) inset;
   padding: 3px 4px;
   border: 1px solid #ccc;

extension/css/open-sans.css

@@ -7,7 +7,10 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('/fonts/open-sans/open-sans-v15-light.woff2') format('woff2'),
+  src:
+    local('Open Sans Light'),
+    local('OpenSans-Light'),
+    url('/fonts/open-sans/open-sans-v15-light.woff2') format('woff2'),
     /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans/open-sans-v15-light.woff') format('woff');
 
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
@@ -18,7 +21,10 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/open-sans/open-sans-v15-regular.woff2') format('woff2'),
+  src:
+    local('Open Sans Regular'),
+    local('OpenSans-Regular'),
+    url('/fonts/open-sans/open-sans-v15-regular.woff2') format('woff2'),
     /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans/open-sans-v15-regular.woff') format('woff');
 
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
@@ -29,7 +35,10 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('/fonts/open-sans/open-sans-v15-semibold.woff2') format('woff2'),
+  src:
+    local('Open Sans SemiBold'),
+    local('OpenSans-SemiBold'),
+    url('/fonts/open-sans/open-sans-v15-semibold.woff2') format('woff2'),
     /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/fonts/open-sans/open-sans-v15-semibold.woff') format('woff');
 
   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

extension/js/common/browser/ui.ts

@@ -502,7 +502,7 @@ export class Ui {
   };
 
   public static setTestState = (state: 'ready' | 'working' | 'waiting') => {
-    $('body').attr('data-test-state', state); // for automated tests
+    document.querySelector('body')?.setAttribute('data-test-state', state); // for automated tests
   };
 
   public static buildJquerySels = (sels: Dict<string>): SelCache => {

extension/js/common/core/crypto/pgp/msg-util.ts

@@ -335,7 +335,7 @@ export class MsgUtil {
       // todo - the `ki.passphrase || ''` used to be `ki.passphrase!` which could have actually allowed an undefined to be passed
       // as fixed currently it appears better, but it may be best to instead check `ki.passphrase && await MsgUtil.decryptKeyFor(...)`
       // but that is a larger change that would require separate PR and testing
-      if ((await MsgUtil.isKeyDecryptedFor(parsed, matchingKeyids)) || await MsgUtil.decryptKeyFor(parsed, ki.passphrase || '', matchingKeyids)) {
+      if ((await MsgUtil.isKeyDecryptedFor(parsed, matchingKeyids)) || (await MsgUtil.decryptKeyFor(parsed, ki.passphrase || '', matchingKeyids))) {
         KeyCache.setDecrypted(parsed);
         keys.prvForDecryptDecrypted.push({ ki, decrypted: parsed });
       } else {
@@ -369,7 +369,7 @@ export class MsgUtil {
         continue;
       }
       const parsed = await KeyUtil.parse(ki.private);
-      if (parsed.fullyDecrypted || (ki.passphrase && await SmimeKey.decryptKey(parsed, ki.passphrase))) {
+      if (parsed.fullyDecrypted || (ki.passphrase && (await SmimeKey.decryptKey(parsed, ki.passphrase)))) {
         KeyCache.setDecrypted(parsed);
         keys.prvForDecryptDecrypted.push({ ki, decrypted: parsed });
       } else {

extension/js/common/ui/key-import-ui.ts

@@ -231,11 +231,7 @@ export class KeyImportUi {
     return normalized;
   };
 
-  public renderPassPhraseStrengthValidationInput = (
-    input: JQuery,
-    submitButton?: JQuery,
-    type: 'passphrase' | 'pwd' = 'passphrase'
-  ) => {
+  public renderPassPhraseStrengthValidationInput = (input: JQuery, submitButton?: JQuery, type: 'passphrase' | 'pwd' = 'passphrase') => {
     const validationElements = this.getPPValidationElements();
     const setBtnColor = (type: 'gray' | 'green') => {
       if (submitButton) {

extension/js/common/view.ts

@@ -26,7 +26,7 @@ export abstract class View {
   }
 
   private static setTestViewStateLoaded = () => {
-    $('body').attr('data-test-view-state', 'loaded');
+    document.querySelector('body')?.setAttribute('data-test-view-state', 'loaded');
   };
 
   private static reportAndRenderErr = (e: unknown) => {

extension/js/content_scripts/webmail/gmail/gmail-element-replacer.ts

@@ -506,7 +506,7 @@ export class GmailElementReplacer extends WebmailElementReplacer {
     attachmentsContainerInner = $(attachmentsContainerInner);
     attachmentsContainerInner.parent().find(this.sel.numberOfAttachments).hide();
     let nRenderedAttachments = attachments.length;
-    for (const a of attachments) {
+    for (const a of attachments.reverse()) {
       const attachmentSel = this.filterAttachments(
         attachmentsContainerInner.children().not('.attachment_processed'),
         new RegExp(`^${Str.regexEscape(a.name || 'noname')}$`)