enable support for per-account custom css injection, closes #355

package.json

@@ -1,7 +1,7 @@
 {
  "name": "electron-mail",
  "description": "Unofficial ProtonMail Desktop App",
- "version": "4.9.3",
+ "version": "4.10.0",
  "author": "Vladimir Yakovlev <[email protected]>",
  "license": "MIT",
  "homepage": "https:/vladimiry/ElectronMail",

src/electron-main/api/endpoints-builders/account.ts

@@ -33,8 +33,8 @@ export async function buildEndpoints(
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  async addAccount(
  {
-
  login,
+ customCSS,
  title,
  entryUrl,
  blockNonEntryUrlBasedRequests,
@@ -54,6 +54,7 @@ export async function buildEndpoints(
 
  const account: AccountConfig = {
  login,
+ customCSS,
  title,
  entryUrl,
  blockNonEntryUrlBasedRequests,
@@ -82,6 +83,7 @@ export async function buildEndpoints(
  async updateAccount(
  {
  login,
+ customCSS,
  title,
  entryUrl,
  blockNonEntryUrlBasedRequests,
@@ -120,6 +122,7 @@ export async function buildEndpoints(
  );
  logger.verbose(JSON.stringify({shouldConfigureSession}));
 
+ account.customCSS = customCSS;
  account.title = title;
  account.database = database;
  account.persistentSession = persistentSession;

src/shared/model/account.ts

@@ -19,6 +19,7 @@ export type AccountConfig = NoExtraProps<{
  persistentSession?: boolean;
  rotateUserAgent?: boolean;
  disabled?: boolean;
+ customCSS?: string;
 }>;
 
 export type AccountPersistentSession = NoExtraProps<{

src/shared/model/container.ts

@@ -21,6 +21,7 @@ export interface NewPasswordFieldContainer {
 export interface PasswordChangeContainer extends PasswordFieldContainer, NewPasswordFieldContainer {}
 
 export type AccountConfigCreateUpdatePatch = NoExtraProps<Pick<AccountConfig,
+ | "customCSS"
  | "credentials"
  | "database"
  | "entryUrl"

src/web/browser-window/app/_accounts/account-view-abstract.component.ts

@@ -1,5 +1,5 @@
 import {Directive, ElementRef, EventEmitter, Injector, Input, OnDestroy, Output, ViewChild} from "@angular/core";
-import {Observable, Subscription, race} from "rxjs";
+import {Observable, Subscription, combineLatest, race} from "rxjs";
 import {distinctUntilChanged, filter, map, take} from "rxjs/operators";
 import {pick} from "remeda";
 
@@ -103,6 +103,37 @@ export abstract class AccountViewAbstractComponent extends NgChangesObservableCo
  })(),
  );
 
+ {
+ let customCssKey: string | undefined;
+
+ this.subscription.add(
+ combineLatest([
+ this.filterDomReadyEvent(),
+ this.account$.pipe(
+ map(({accountConfig: {customCSS}}) => customCSS),
+ distinctUntilChanged(),
+ ),
+ ]).subscribe(async ([{webView}, customCSS]) => {
+ if (customCssKey) {
+ this.event.emit({type: "log", data: ["verbose", "removing custom css"]});
+ await webView.removeInsertedCSS(customCssKey);
+ customCssKey = undefined;
+ }
+
+ if (
+ !customCSS
+ ||
+ !customCSS.trim()
+ ) {
+ return;
+ }
+
+ this.event.emit({type: "log", data: ["verbose", "inserting custom css"]});
+ customCssKey = await webView.insertCSS(customCSS);
+ }),
+ );
+ }
+
  // this.subscription.add(
  // this.filterDomReadyEvent()
  // .pipe(take(1))
@@ -116,7 +147,7 @@ export abstract class AccountViewAbstractComponent extends NgChangesObservableCo
 
  ngOnDestroy(): void {
  super.ngOnDestroy();
- this.event.emit({type: "log", data: ["info", `ngOnDestroy()`, ""]});
+ this.event.emit({type: "log", data: ["info", "ngOnDestroy()", ""]});
  this.subscription.unsubscribe();
  this.event.emit({
  type: "action",
@@ -137,8 +168,7 @@ export abstract class AccountViewAbstractComponent extends NgChangesObservableCo
 
  protected async filterDomReadyOrDestroyedPromise(): Promise<void> {
  return race([
- this.filterDomReadyEvent()
- .pipe(take(1)),
+ this.filterDomReadyEvent().pipe(take(1)),
  this.ngOnDestroy$,
  ]).toPromise().then(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
  }

src/web/browser-window/app/_options/account-edit.component.html

@@ -142,8 +142,11 @@
  </label>
  </div>
  </div>
- <accordion class="mb-3">
- <accordion-group [isOpen]="false" heading="Extended Options">
+ <accordion [closeOthers]="true" class="mb-3">
+ <accordion-group [isOpen]="false" heading="Custom CSS">
+ <textarea class="form-control" rows="10" formControlName="customCSS"></textarea>
+ </accordion-group>
+ <accordion-group [isOpen]="false" heading="Advanced Options">
  <div class="form-group">
  <label class="d-block pull-left">
  Handle button alias

src/web/browser-window/app/_options/account-edit.component.ts

@@ -24,6 +24,7 @@ import {validateExternalContentProxyUrlPattern, validateLoginDelaySecondsRange}
 export class AccountEditComponent implements OnInit, OnDestroy {
  entryUrlItems = [...PROTON_API_ENTRY_RECORDS];
  controls: Record<keyof Pick<AccountConfig,
+ | "customCSS"
  | "login"
  | "title"
  | "database"
@@ -38,6 +39,7 @@ export class AccountEditComponent implements OnInit, OnDestroy {
  | keyof Pick<Required<Required<AccountConfig>["proxy"]>, "proxyRules" | "proxyBypassRules">
  | keyof AccountConfig["credentials"],
  AbstractControl> = {
+ customCSS: new FormControl(null),
  blockNonEntryUrlBasedRequests: new FormControl(null),
  externalContentProxyUrlPattern: new FormControl(
  null,
@@ -149,6 +151,7 @@ export class AccountEditComponent implements OnInit, OnDestroy {
 
  this.form.removeControl(((name: keyof Pick<typeof AccountEditComponent.prototype.controls, "login">) => name)("login"));
 
+ controls.customCSS.patchValue(account.customCSS);
  controls.title.patchValue(account.title);
  controls.database.patchValue(account.database);
  controls.persistentSession.patchValue(account.persistentSession);
@@ -213,6 +216,7 @@ export class AccountEditComponent implements OnInit, OnDestroy {
  ? account.login :
  controls.login.value,
  title: controls.title.value, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+ customCSS: controls.customCSS.value, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
  entryUrl: controls.entryUrl.value, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  blockNonEntryUrlBasedRequests: Boolean(controls.blockNonEntryUrlBasedRequests.value),

src/web/browser-window/app/_options/storage.component.html

@@ -42,7 +42,7 @@
  <accordion-group heading="Encryption">
  <form [formGroup]="encryptionPresetForm" (ngSubmit)="submitPresets()" novalidate>
  <div class="form-group required">
- <label>Current Password</label>
+ <label>Current Master Password</label>
  <input type="password" class="form-control" formControlName="password"
  [ngClass]="encryptionPresetForm.controls.password?.dirty ? {
  'is-invalid': encryptionPresetForm.controls.password?.invalid,