Fix Firefox about:blank iframe braindeath

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
-    "build": "ng build --prod --aot --build-optimizer",
+    "build": "ng build --prod --aot --build-optimizer"
-    "lint": "ng lint --fix"
   },
   "private": true,
   "dependencies": {

src/app/app.module.ts

@@ -17,7 +17,7 @@ import { TerminalComponent } from './terminal/terminal.component';
 import { AppRoutingModule } from './app-routing.module';
 import { TestmessengerComponent } from './testmessenger/testmessenger.component';
 import { DeploymentNotificationService } from './services/deployment-notification.service';
-import { SafePipe, SafeHtmlPipe } from './pipes/safe.pipe';
+import { SafePipe } from './pipes/safe.pipe';
 import { ConsoleComponent } from './console/console.component';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import {
@@ -41,7 +41,6 @@ import { LoaderComponent } from './loader/loader.component';
     DashboardComponent,
     TestmessengerComponent,
     SafePipe,
-    SafeHtmlPipe,
     ConsoleComponent,
     LoaderComponent
   ],

src/app/dashboard/dashboard.component.html

@@ -1,11 +1,13 @@
 <div [attr.class]="layout | async">
   <div class="tfw-grid-main-components">
     <div class="tfw-header"><app-header></app-header></div>
-    <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
+    <div [ngClass]="{'hide-attribute': hideMessages | async}"
-      <app-messages></app-messages>
+         class="tfw-messages"
+         #tfwmessages>
+      <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
     </div>
     <div class="tfw-web tao-grid-top-left"
-         [ngClass]="{'deploy-blur': deploying || (iframeReloadPoller.isPolling | async)}">
+         [ngClass]="{'deploy-blur': deploying || (polling | async)}">
         <div *ngIf="iframeUrl | async" class="iframe-container">
           <div *ngIf="showUrlBar | async" class="urlbar-container">
             <button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>
@@ -18,7 +20,6 @@
           </div>
           <iframe class="iframe"
                   #webiframe
-                  name="webiframe"
                   scrolling="yes"
                   frameborder="0"
                   (load)="iframeLoad()"

src/app/dashboard/dashboard.component.ts

@@ -1,13 +1,12 @@
 import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
 import { DeploymentNotificationService } from '../services/deployment-notification.service';
-import { Subscription } from 'rxjs';
+import { Subscription, BehaviorSubject } from 'rxjs';
 import { WebSocketService } from '../services/websocket.service';
 import { WebSocketMessage } from '../message-types/websocket-message';
-import { DashboardConfigService, ConfigReadyService } from '../services/config.service';
+import { DashboardConfigService } from '../services/config.service';
 import { HttpClient } from '@angular/common/http';
+import { delay, retryWhen, tap } from 'rxjs/operators';
 import { FSMUpdateService } from '../services/fsmupdate.service';
-import { MessagesComponent } from '../messages/messages.component';
-import { StatusCodePoller } from './statuscodepoller';
 
 @Component({
   selector: 'app-dashboard',
@@ -16,9 +15,10 @@ import { StatusCodePoller } from './statuscodepoller';
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
+  polling = new BehaviorSubject<boolean>(false);
   deploymentNotificationSubscription: Subscription;
   @ViewChild('webiframe', {static: false}) webiframe: ElementRef;
-  @ViewChild(MessagesComponent, {static: false}) messages: MessagesComponent;
+  @ViewChild('tfwmessages', {static: false}) messages: ElementRef;
   @ViewChild('urlbar', {static: false}) urlbar: ElementRef;
 
   layout = this.configService.layout;
@@ -27,7 +27,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   iframeUrl = this.configService.iframeUrl;
   actualIframeUrl = this.iframeUrl.value;
   terminalMenuItem = this.configService.terminalMenuItem;
-  iframeReloadPoller: StatusCodePoller;
+  iframeReloadSubscription: Subscription;
 
   command_handlers = {
     'dashboard.reloadFrontend':   this.reloadFrontendHandlder.bind(this),
@@ -38,7 +38,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
               private webSocketService: WebSocketService,
               private changeDetectorRef: ChangeDetectorRef,
               private http: HttpClient,
-              private configReadyService: ConfigReadyService,
               private configService: DashboardConfigService,
               private fsmUpdateService: FSMUpdateService) {}
 
@@ -46,7 +45,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.webSocketService.connect();
     this.configService.init();
     this.subscribeCheckSolution();
-    this.iframeReloadPoller = new StatusCodePoller(this.iframeUrl, this.http);
     this.hideIframeUntilResponseOk();
     this.subscribeResizeOnLayoutChange();
     this.initCommandHandling();
@@ -64,16 +62,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   hideIframeUntilResponseOk() {
-    this.iframeReloadPoller.ok.subscribe(() => this.reloadIframe());
+    // TODO: hide iframe and show it after this whole deal...
-    this.configReadyService.configDone.subscribe(() =>
+    this.reloadIframeWhenResponseOk();
-      this.iframeReloadPoller.start()
-    );
   }
 
   subscribeResizeOnLayoutChange() {
     this.configService.layout.subscribe(() => {
       this.emitResizeEvent();
-      setTimeout(() => this.messages.scrollToBottom(), 0);
+      setTimeout(() => this.scrollMessagesToBottom(), 0);
     });
   }
 
@@ -89,7 +85,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       (deploying) => {
         this.deploying = deploying;
         if (!deploying && this.configService.reloadIframeOnDeploy.value) {
-          this.iframeReloadPoller.start();
+          this.reloadIframeWhenResponseOk();
         }
       });
   }
@@ -103,7 +99,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   reloadIframeHandler(message: WebSocketMessage) {
-    setTimeout(() => this.reloadIframe(), 200);
+    setTimeout(() => this.reloadIframeNoSubmit(), 200);
   }
 
   setLayout(layout: string) {
@@ -118,7 +114,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   reloadIframe() {
     setTimeout(() => {
-      this.webiframe.nativeElement.contentWindow.frames.location.href = this.iframeUrl.value;
+      this.webiframe.nativeElement.contentWindow.location.reload(true);
+    });
+  }
+
+  reloadIframeNoSubmit() {
+    // Sometimes it is needed to reload the iframe without resending the previous form data
+    setTimeout(() => {
+      this.webiframe.nativeElement.contentWindow.location = this.webiframe.nativeElement.contentWindow.location.href;
     });
   }
 
@@ -129,16 +132,22 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.terminalMenuItem.next(item);
   }
 
+  scrollMessagesToBottom() {
+    const element = this.messages.nativeElement;
+    // This must be done in the Angular event loop to avoid messing up
+    // change detection (not in the template like ConsoleComponent does)
+    element.scrollTop = element.scrollHeight;
+  }
+
   iframeLoad() {
     if (this.webiframe && this.iframeUrl.value) {
-      const href = this.webiframe.nativeElement.contentWindow.frames.location.href;
+      // This hack deals with Firefox iframes having a valid src,
-      const match = href.match(/.*?\/\/.*?(\/.*)/);
+      // but 'about:blank' contentWindow on (load) events
-      if (match !== null) {
+      setTimeout(() => {
-        // iframes on Firefox can have an about:blank
+        const href = this.webiframe.nativeElement.contentWindow.frames.location.href;
-        // contentWindow after firing a (load) event
+        const niceURL = href.match(/.*?\/\/.*?(\/.*)/)[1];
-        const niceURL = match[1];
         this.actualIframeUrl = niceURL;
-      }
+      }, 0);
     }
   }
 
@@ -151,13 +160,35 @@ export class DashboardComponent implements OnInit, OnDestroy {
     ) {
       return;
     }
-    this.iframeUrl.next(this.urlbar.nativeElement.value);
+    this.webiframe.nativeElement.contentWindow.frames.location.href = this.urlbar.nativeElement.value;
+  }
+
+  reloadIframeWhenResponseOk() {
+    if (this.polling.value) {
+      this.iframeReloadSubscription.unsubscribe();
+    }
+    this.polling.next(true);
+    this.iframeReloadSubscription = this.http.get(this.actualIframeUrl, {observe: 'response'}).pipe(
+      retryWhen(errors =>
+        errors.pipe(
+          tap(
+            response => {
+              if (response.status === 200) {
+                this.iframeReloadSubscription.unsubscribe();
+                this.polling.next(false);
+                this.reloadIframe();
+          }}),
+          delay(1000)
+    ))).subscribe();
   }
 
   ngOnDestroy() {
     if (this.deploymentNotificationSubscription) {
       this.deploymentNotificationSubscription.unsubscribe();
     }
-    this.iframeReloadPoller.stop();
+
+    if (this.iframeReloadSubscription) {
+      this.iframeReloadSubscription.unsubscribe();
+    }
   }
 }

src/app/dashboard/statuscodepoller.ts

@@ -1,63 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Subject, Subscription, BehaviorSubject } from 'rxjs';
-import { retryWhen, delay, tap, skip } from 'rxjs/operators';
-
-export class StatusCodePoller {
-  http: HttpClient;
-  url: BehaviorSubject<string>;
-  pollFreq: number;
-  okCode: number;
-  stopOnOk: boolean;
-
-  pollSubscription: Subscription;
-  urlSubscription: Subscription;
-  poll = new Subject<any>();
-  ok = new Subject<any>();
-  isPolling = new BehaviorSubject<boolean>(false);
-
-  constructor(
-      url: BehaviorSubject<string>, http: HttpClient,
-      pollFreq = 1000, okCode = 200,
-      stopOnOk = true
-    ) {
-    this.url = url;
-    this.http = http;
-    this.pollFreq = pollFreq;
-    this.okCode = okCode;
-    this.stopOnOk = stopOnOk;
-  }
-
-  start() {
-    this.stop();
-    if (this.url.value === '') {
-      return;
-    }
-    this.urlSubscription = this.url.pipe(skip(1)).subscribe(() => this.stop());
-    this.isPolling.next(true);
-    this.pollSubscription = this.http.get(this.url.value, {observe: 'response'}).pipe(
-      retryWhen(errors =>
-        errors.pipe(
-          tap(
-            response => {
-              this.poll.next(response);
-              if (response.status === this.okCode) {
-                if (this.stopOnOk) {
-                  this.stop();
-                }
-                this.ok.next(response);
-              }
-          }),
-          delay(this.pollFreq)
-    ))).subscribe();
-  }
-
-  stop() {
-    this.isPolling.next(false);
-    if (this.pollSubscription) {
-      this.pollSubscription.unsubscribe();
-    }
-    if (this.urlSubscription) {
-      this.urlSubscription.unsubscribe();
-    }
-  }
-}

src/app/ide/ide.component.scss

@@ -75,8 +75,7 @@
 
     .loader {
       border-radius: 50%;
-      border: 2px solid $tao-warm-yellow-600;
+      border: 2px solid;
-      border-top: 2px solid $tao-warm-yellow-200;
       width: 15px;
       height: 15px;
       animation: spin 2s linear infinite;

src/app/ide/language-map.ts

@@ -30,7 +30,5 @@ export const LanguageMap: { [extension: string]: string; } = {
     css: 'css',
     less: 'less',
     scss: 'scss',
-    sh: 'shell',
+    sh: 'shell'
-    kt: 'kotlin',
-    kts: 'kotlin'
 };

src/app/message-types/bot-messages.ts

@@ -1,10 +1,13 @@
 import { WebSocketMessage } from './websocket-message';
 
+export interface MessageConfig extends WebSocketMessage {
+  originator?: string;
+}
+
 export interface MessageData {
   originator?: string;
   timestamp?: Date;
   typing?: boolean;
-  command?: any;
   message: string;
 }
 

src/app/messages/messages.component.html

@@ -1,20 +1,17 @@
 <div class="tfw-messages-main">
   <div class="tfw-grid-message"
        *ngFor="let message of messages.slice(); let last = last"
-       [class.highlighted-message]="last"
+       [class.highlighted-message]="last">
-       (click)="sendMessageCommand(message)">
     <div class="tfw-grid-message-header">
       <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
     </div>
-    <div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div>
+    <div class="tfw-grid-message-body" [innerHtml]="message.message"></div>
-  </div>
-  <div *ngIf="showTypingIndicator" 
-        class="tfw-grid-message jumping-circle-container"
-        (click)="drainMessageQueue()">
-    <div class="jumping-circle" id="jc1"></div>
-    <div class="jumping-circle" id="jc2"></div>
-    <div class="jumping-circle" id="jc3"></div>
   </div>
+  <div *ngIf="showTypingIndicator" class="tfw-grid-message jumping-circle-container">
+      <div class="jumping-circle" id="jc1"></div>
+      <div class="jumping-circle" id="jc2"></div>
+      <div class="jumping-circle" id="jc3"></div>
+    </div>
 </div>

src/app/messages/messages.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core';
 import { MessageData, Message } from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
@@ -19,8 +19,7 @@ export class MessagesComponent implements OnInit {
   constructor(
     private markdownService: MarkdownService,
     private websocketService: WebSocketService,
-    private changeDetectorRef: ChangeDetectorRef,
+    private changeDetectorRef: ChangeDetectorRef
-    private ref: ElementRef
   ) {}
 
   ngOnInit() {
@@ -28,7 +27,6 @@ export class MessagesComponent implements OnInit {
       message => {
         this.writeMessage(message);
         this.newMessageEvent.emit();
-        this.scrollToBottom();
     });
 
     this.websocketService.connect();
@@ -43,11 +41,6 @@ export class MessagesComponent implements OnInit {
     this.changeDetectorRef.detectChanges();
   }
 
-  scrollToBottom() {
-    const element = this.ref.nativeElement.parentElement;
-    element.scrollTop = element.scrollHeight;
-  }
-
   transformMessage(message: MessageData) {
     message.message = this.convertMarkdownToHTML(message.message);
     if (!message.timestamp) {
@@ -59,16 +52,4 @@ export class MessagesComponent implements OnInit {
   convertMarkdownToHTML(text: string) {
     return this.markdownService.convertToHtml(text);
   }
-
-  drainMessageQueue() {
-    this.websocketService.send({
-      'key': 'message.queue.drain'
-    });
-  }
-
-  sendMessageCommand(message: MessageData) {
-    if ('command' in message) {
-      this.websocketService.send(message.command);
-    }
-  }
 }

src/app/pipes/safe.pipe.ts

@@ -11,14 +11,3 @@ export class SafePipe implements PipeTransform {
     return this.sanitizer.bypassSecurityTrustResourceUrl(value);
   }
 }
-
-@Pipe({
-  name: 'safeHtml'
-})
-export class SafeHtmlPipe implements PipeTransform  {
-  constructor(private sanitized: DomSanitizer) {}
-
-  transform(value) {
-    return this.sanitized.bypassSecurityTrustHtml(value);
-  }
-}

src/app/services/config.service.ts

@@ -9,7 +9,7 @@ export class DashboardConfigService extends ConfigServiceBase {
 
   layout = new BehaviorSubject<string>('terminal-ide-web');
   hideMessages = new BehaviorSubject<boolean>(false);
-  iframeUrl = new BehaviorSubject<string>('');
+  iframeUrl = new BehaviorSubject<string>('/webservice');
   showUrlBar = new BehaviorSubject<boolean>(false);
   terminalMenuItem = new BehaviorSubject<string>('terminal');
   reloadIframeOnDeploy = new BehaviorSubject<boolean>(false);

src/app/services/terminado.service.ts

@@ -8,16 +8,11 @@ export class TerminadoService {
   xterm: Terminal;
   ws: WebSocket;
   attached = false;
-  private dataListener: any;
-  private resizeListener: any;
 
   constructor() {
     Terminal.applyAddon(fit);
-    this.xterm = this.createTerminal();
+    Terminal.applyAddon(terminado);
-  }
+    this.xterm = new Terminal({
-
-  createTerminal() {
-    return new Terminal({
       theme: {
         foreground: '#ffffff',
         background: '#0C0C0C',                  // $tao-gray-800
@@ -42,52 +37,26 @@ export class TerminadoService {
       },
       fontSize: 14
     });
-  }
-
-  attach(element: HTMLElement) {
-    if (this.attached) {
-      return;
-    }
 
     const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
     this.ws = new WebSocket(wsproto + window.location.host + '/terminal');
+  }
 
+  attach(element: HTMLElement) {
     this.ws.onopen = () => {
-      this.attached = true;
+      (<any>this.xterm).terminadoAttach(this.ws);
-      this.xterm = this.createTerminal();
       this.xterm.open(element);
       this.fit();
-      // In order to reset the terminal state after a broken socket, we need to register the listeners manually.
+      this.xterm.blur();
-      (<any>this.xterm)._core.register(this.dataListener = this.xterm.onData(data => {
+      this.attached = true;
-        this.ws.send(JSON.stringify(['stdin', data]));
-      }));
-      (<any>this.xterm)._core.register(this.resizeListener = this.xterm.onResize((size: { rows: number, cols: number }) => {
-        this.ws.send(JSON.stringify(['set_size', size.rows, size.cols]));
-      }));
-    };
-
-    this.ws.onclose = () => {
-      this.detach();
-      this.xterm.destroy();
-      this.attach(element);
-    };
-
-    this.ws.onmessage = msg => {
-      const data = JSON.parse(msg.data);
-      if (data[0] === 'stdout') {
-        this.xterm.write(data[1]);
-      }
     };
   }
 
   detach() {
-    if (!this.attached) {
+    (<any>this.xterm).terminadoDetach(this.ws);
-      return;
+    this.xterm.destroy();
-    }
+    this.ws.close();
-
     this.attached = false;
-    this.dataListener.dispose();
-    this.resizeListener.dispose();
   }
 
   fit() {

src/app/services/websocket.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { filter, map } from 'rxjs/operators';
 import { WebSocketMessage } from '../message-types/websocket-message';
@@ -17,28 +17,14 @@ export enum Intent {
 @Injectable()
 export class WebSocketService {
   private ws: WebSocketSubject<WebSocketMessage>;
-  private subject: Subject<WebSocketMessage> = new Subject<WebSocketMessage>();
-  private subscription: Subscription;
 
   constructor() {}
 
   public connect() {
     if (!this.ws) {
-      if (this.subscription) {
-        this.subscription.unsubscribe();
-      }
       const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
       const connAddr = wsproto + window.location.host + '/ws';
-      this.ws = webSocket<WebSocketMessage>({
+      this.ws = webSocket<WebSocketMessage>(connAddr);
-        url: connAddr,
-        closeObserver: {
-            next: closeEvent => {
-                this.ws = null;
-                this.connect();
-            }
-          }
-      });
-      this.subscription = this.ws.subscribe(msg => this.subject.next(msg));
     }
   }
 
@@ -49,7 +35,7 @@ export class WebSocketService {
   }
 
   public observeAll<T extends WebSocketMessage>(key: string): Observable<T> {
-    return this.subject.pipe(
+    return this.ws.pipe(
       filter(message => message.key.startsWith(key)),
       map(message => <T> message)
     );