@eclipse-scout/core 22.0.0-beta.1 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.0-beta.1",
+  "version": "22.0.0",
   "description": "Eclipse Scout runtime",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,7 +26,7 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "22.0.0-beta.1",
+    "@eclipse-scout/cli": "22.0.0",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/App.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -38,6 +38,7 @@ export default class App {
     this.events = this._createEventSupport();
     this.initialized = false;
     this.sessions = [];
+    this._loadingTimeoutId = null;
 
     // register the listeners which were added to scout before the app is created
     listeners.forEach(function(listener) {
@@ -195,8 +196,11 @@ export default class App {
    */
   _init(options) {
     options = options || {};
-    if (!this._checkBrowserCompatibility(options)) {
-      return;
+    this.setLoading(true);
+    let compatibilityPromise = this._checkBrowserCompatibility(options);
+    if (compatibilityPromise) {
+      this.setLoading(false);
+      return compatibilityPromise.then(newOptions => this._init(newOptions));
     }
 
     this._initVersion(options);
@@ -220,27 +224,82 @@ export default class App {
 
   _checkBrowserCompatibility(options) {
     let device = Device.get();
-    let app = this;
     $.log.isInfoEnabled() && $.log.info('Detected browser ' + device.browser + ' version ' + device.browserVersion);
     if (!scout.nvl(options.checkBrowserCompatibility, true) || device.isSupportedBrowser()) {
       // No check requested or browser is supported
-      return true;
+      return;
     }
 
+    let deferred = $.Deferred();
+    let newOptions = objects.valueCopy(options);
+    newOptions.checkBrowserCompatibility = false;
     $('.scout').each(function() {
-      let $entryPoint = $(this),
-        $box = $entryPoint.appendDiv(),
-        newOptions = objects.valueCopy(options);
+      let $entryPoint = $(this);
+      let $box = $entryPoint.appendDiv();
 
-      newOptions.checkBrowserCompatibility = false;
       $box.load('unsupported-browser.html', () => {
         $box.find('button').on('click', () => {
           $box.remove();
-          app._init(newOptions);
+          deferred.resolve(newOptions);
         });
       });
     });
-    return false;
+    return deferred.promise();
+  }
+
+  setLoading(loading) {
+    if (loading) {
+      this._loadingTimeoutId = setTimeout(() => {
+        // Don't start loading if a desktop is already rendered to prevent flickering when the loading will be set to false after app initialization finishes
+        if (!this.sessions.some(session => session.desktop && session.desktop.rendered)) {
+          this._renderLoading();
+        }
+      }, 200);
+    } else {
+      clearTimeout(this._loadingTimeoutId);
+      this._loadingTimeoutId = null;
+      this._removeLoading();
+    }
+  }
+
+  _renderLoading() {
+    let $body = $('body'),
+      $loadingRoot = $body.children('.application-loading-root');
+    if (!$loadingRoot.length) {
+      $loadingRoot = $body.appendDiv('application-loading-root')
+        .addClass('application-loading-root')
+        .fadeIn();
+    }
+    this._renderLoadingElement($loadingRoot, 'application-loading01');
+    this._renderLoadingElement($loadingRoot, 'application-loading02');
+    this._renderLoadingElement($loadingRoot, 'application-loading03');
+  }
+
+  _renderLoadingElement($loadingRoot, cssClass) {
+    if ($loadingRoot.children('.' + cssClass).length) {
+      return;
+    }
+    // noinspection JSValidateTypes
+    $loadingRoot.appendDiv(cssClass).hide()
+      .fadeIn();
+  }
+
+  _removeLoading() {
+    let $loadingRoot = $('body').children('.application-loading-root');
+    // the fadeout animation only contains a to-value and no from-value
+    // therefore set the current value to the elements style
+    $loadingRoot.css('opacity', $loadingRoot.css('opacity'));
+    // Add animation listener before adding the classes to ensure the listener will always be triggered even while debugging
+    $loadingRoot.oneAnimationEnd(() => $loadingRoot.remove());
+    if ($loadingRoot.css('opacity') == 1) {
+      $loadingRoot.addClass('fadeout and-more');
+    } else {
+      $loadingRoot.addClass('fadeout');
+    }
+    if (!Device.get().supportsCssAnimation()) {
+      // fallback for old browsers that do not support the animation-end event
+      $loadingRoot.remove();
+    }
   }
 
   _initVersion(options) {
@@ -340,9 +399,7 @@ export default class App {
 
     // TODO [7.0] cgu improve this, start must not be executed because it currently does a server request
     let desktop = this._createDesktop(session.root);
-    this.trigger('desktopReady', {
-      desktop: desktop
-    });
+    this._triggerDesktopReady(desktop);
     session.render(() => {
       session._renderDesktop();
 
@@ -351,14 +408,24 @@ export default class App {
       session.focusManager.validateFocus();
 
       session.ready = true;
-      this.trigger('sessionReady', {
-        session: session
-      });
+      this._triggerSessionReady(session);
       $.log.isInfoEnabled() && $.log.info('Session initialized. Detected ' + Device.get());
     });
     return $.resolvedPromise();
   }
 
+  _triggerDesktopReady(desktop) {
+    this.trigger('desktopReady', {
+      desktop: desktop
+    });
+  }
+
+  _triggerSessionReady(session) {
+    this.trigger('sessionReady', {
+      session: session
+    });
+  }
+
   _createSession(options) {
     return scout.create('Session', options, {
       ensureUniqueId: false
@@ -380,6 +447,7 @@ export default class App {
 
   _initDone(options) {
     this.initialized = true;
+    this.setLoading(false);
     this.trigger('init', {
       options: options
     });
@@ -388,6 +456,7 @@ export default class App {
 
   _fail(options, error, ...args) {
     $.log.error('App initialization failed.');
+    this.setLoading(false);
 
     return this.errorHandler.handle(error, ...args)
       .then(errorInfo => {

package/src/RemoteApp.js

@@ -50,6 +50,7 @@ export default class RemoteApp extends App {
 
   _fail(options, error, ...args) {
     $.log.error('App initialization failed', error);
+    this.setLoading(false);
     // Session.js already handled the error -> don't show a message here
     // Reject with original rejection arguments
     return $.rejectedPromise(error, ...args);

package/src/desktop/Desktop.js

@@ -895,11 +895,11 @@ export default class Desktop extends Widget {
   }
 
   /**
-   * Destroys every popup which is a descendant of the given widget.
+   * Removes every popup which is a descendant of the given widget.
    */
-  destroyPopupsFor(widget) {
+  removePopupsFor(widget) {
     this.getPopupsFor(widget).forEach(popup => {
-      popup.destroy();
+      popup.remove();
     });
   }
 

package/src/desktop/desktoptab/DesktopTab.less

@@ -85,6 +85,20 @@
     }
   }
 
+  &.glasspane-parent {
+    // Modality highlight does not work with pointer-events: none because mouse down is ignored on the glass pane completely by the browser
+    // -> we need to disable the hover effect manually
+    pointer-events: unset;
+
+    &:not(.disabled):not(.selected):hover {
+      background-color: @desktop-tab-background-color;
+    }
+
+    &:not(.selected):hover > .closer {
+      display: none;
+    }
+  }
+
   &.disabled {
     background-color: transparent;
 

package/src/desktop/notification/DesktopNotification.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Device, Notification as ScoutNotification, strings} from '../../index';
+import {Device, Notification as ScoutNotification, scout, Status, strings} from '../../index';
 
 export default class DesktopNotification extends ScoutNotification {
 
@@ -20,7 +20,7 @@ export default class DesktopNotification extends ScoutNotification {
     this._removing = false;
     this.nativeOnly = false;
     this.nativeNotificationTitle = null;
-    this.nativeNotificationIconId = null;
+    this.nativeNotificationStatus = null; // holds native message & native icon
     this.nativeNotificationVisibility = DesktopNotification.NativeNotificationVisibility.NONE;
     this.nativeNotification = null;
     this.nativeNotificationShown = false;
@@ -58,7 +58,13 @@ export default class DesktopNotification extends ScoutNotification {
     let defaults = this.session.desktop.nativeNotificationDefaults;
     if (defaults) {
       this.nativeNotificationTitle = model.nativeNotificationTitle !== undefined ? model.nativeNotificationTitle : defaults.title;
-      this.nativeNotificationIconId = model.nativeNotificationIconId !== undefined ? model.nativeNotificationIconId : defaults.iconId;
+      if (this.nativeNotificationStatus) {
+        this.nativeNotificationStatus.iconId = this.nativeNotificationStatus.iconId !== undefined ? this.nativeNotificationStatus.iconId : defaults.iconId;
+      } else {
+        this.nativeNotificationStatus = new Status({
+          iconId: defaults.iconId
+        });
+      }
       this.nativeNotificationVisibility = scout.nvl(model.nativeNotificationVisibility !== undefined ? model.nativeNotificationVisibility : defaults.visibility, DesktopNotification.NativeNotificationVisibility.NONE);
     }
     this.resolveTextKeys(['nativeNotificationTitle']);
@@ -108,10 +114,24 @@ export default class DesktopNotification extends ScoutNotification {
       return;
     }
     let title = scout.nvl(this.nativeNotificationTitle, '');
-    let body = scout.nvl(strings.nl2br(this.status.message), '');
+    let body = (this.nativeNotificationStatus || {}).message;
+    if (strings.empty(body)) {
+      body = (this.status || {}).message;
+    }
+    if (!body) {
+      body = '';
+    }
+    if (this.htmlEnabled) {
+      body = strings.plainText(body, {removeFontIcons: true});
+    }
+    let iconId = (this.nativeNotificationStatus || {}).iconId;
+    if (strings.empty(iconId)) {
+      // icon must not be null or empty. If no icon it must be undefined
+      iconId = undefined;
+    }
     this.nativeNotification = new Notification(title, {
       body: body,
-      icon: this.nativeNotificationIconId
+      icon: iconId
     });
 
     this.nativeNotification.addEventListener('show', event => {
@@ -240,8 +260,13 @@ export default class DesktopNotification extends ScoutNotification {
     this.setProperty('nativeNotificationTitle', title);
   }
 
-  setNativeNotificationIconId(iconId) {
-    this.setProperty('nativeNotificationIconId', iconId);
+  setNativeNotificationStatus(status) {
+    this.setProperty('nativeNotificationStatus', status);
+  }
+
+  _setNativeNotificationStatus(status) {
+    status = Status.ensure(status);
+    this._setProperty('nativeNotificationStatus', status);
   }
 
   setNativeNotificationVisibility(visibility) {

package/src/desktop/outline/Outline.js

@@ -1064,10 +1064,10 @@ export default class Outline extends Tree {
     this.setProperty('nodeMenuBarVisible', visible);
   }
 
-  glassPaneTargets() {
+  glassPaneTargets(element) {
     // MessageBoxes are often created with Outlines as displayParent. The default implementation of this function
     // would not render any glass panes when the outline is collapsed, thus we need to override this behavior.
-    return this._glassPaneTargets();
+    return this._glassPaneTargets(element);
   }
 
   _glassPaneTargets(element) {
@@ -1076,42 +1076,12 @@ export default class Outline extends Tree {
     if (desktop.navigation) {
       $elements.push(desktop.navigation.$body);
     }
-    if (desktop.bench && element instanceof Form && element.displayHint === Form.DisplayHint.VIEW) {
-      arrays.pushAll($elements, this._getBenchGlassPaneTargetsForView(element));
-    }
     if (desktop.bench && desktop.bench.outlineContent) {
       arrays.pushAll($elements, desktop.bench.outlineContent.glassPaneTargets(element));
     }
     return $elements;
   }
 
-  _getBenchGlassPaneTargetsForView(view) {
-    let $glassPanes = [];
-    $glassPanes = $glassPanes.concat(this._getTabGlassPaneTargetsForView(view, this.session.desktop.header));
-    this.session.desktop.bench.visibleTabBoxes().forEach(function(tabBox) {
-      if (tabBox.hasView(view)) {
-        arrays.pushAll($glassPanes, this._getTabGlassPaneTargetsForView(view, tabBox));
-      } else if (tabBox.$container) {
-        $glassPanes.push(tabBox.$container);
-      }
-    }, this);
-    return $glassPanes;
-  }
-
-  _getTabGlassPaneTargetsForView(view, tabBox) {
-    let $glassPanes = [];
-    tabBox.tabArea.tabs.forEach(tab => {
-      if (tab.view !== view && tab.view.displayParent === this) {
-        $glassPanes.push(tab.$container);
-        // Workaround for javascript not being able to prevent hover event propagation:
-        // In case of tabs, the hover selector is defined on the element that is the direct parent
-        // of the glass pane. Under these circumstances, the hover style isn't be prevented by the glass pane.
-        tab.$container.addClass('glasspane-parent');
-      }
-    });
-    return $glassPanes;
-  }
-
   _onGlassPaneMouseDown(glassPaneOwner, $glassPane) {
     let desktop = this.session.desktop;
     if (desktop.navigation) {

package/src/desktop/outline/Outline.less

@@ -9,12 +9,6 @@
  *     BSI Business Systems Integration AG - initial API and implementation
  */
 .outline.tree {
-
-  &.in-background > .tree-data > .tree-node.selected {
-    background-color: @outline-in-background-selection-background-color;
-    color: @outline-in-background-selection-color;
-  }
-
   & > .tree-data {
     padding-top: @outline-data-padding-top;
 
@@ -91,6 +85,20 @@
       }
     }
   }
+
+  &.in-background > .tree-data {
+    & > .tree-node,
+    & > .animation-wrapper > .tree-node {
+      &.group {
+        background-color: @outline-in-background-group-background-color;
+      }
+
+      &.selected {
+        background-color: @outline-in-background-selection-background-color;
+        color: @outline-in-background-selection-color;
+      }
+    }
+  }
 }
 
 .outline-title {

package/src/desktop/outline/OutlineViewButton.js

@@ -14,6 +14,7 @@ export default class OutlineViewButton extends ViewButton {
 
   constructor() {
     super();
+    this.outline = null;
     this._addWidgetProperties('outline');
     this._addPreserveOnPropertyChangeProperties(['outline']);
     this._addCloneProperties(['outline']);

package/src/desktop/viewbutton/ViewButtonBox.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Desktop, HtmlComponent, OutlineViewButton, scout, Widget, widgets} from '../../index';
+import {HtmlComponent, OutlineViewButton, scout, Widget, widgets} from '../../index';
 
 export default class ViewButtonBox extends Widget {
 

package/src/filechooser/FileChooser.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -21,6 +21,7 @@ export default class FileChooser extends Widget {
     this.boxButtons = null;
     this.uploadButton = null;
     this.cancelButton = null;
+    this.inheritAccessibility = false; // inherit not necessary. if the FileChooser can be opened, it must be editable. Opening a disabled chooser makes no sense.
     this._addWidgetProperties(['boxButtons', 'uploadButton', 'cancelButton']);
   }
 

package/src/form/Form.js

@@ -294,7 +294,9 @@ export default class Form extends Widget {
   }
 
   /**
-   * Method may be implemented to load the data. By default, the provided this.data is returned.
+   * Method may be implemented to load the data. <br>
+   * By default, a resolved promise containing the provided this.data is returned.
+   * @returns {Promise}
    */
   _load() {
     return $.resolvedPromise().then(() => {
@@ -319,6 +321,9 @@ export default class Form extends Widget {
     return $.resolvedPromise();
   }
 
+  /**
+   * @param {any} data
+   */
   setData(data) {
     this.setProperty('data', data);
   }
@@ -327,8 +332,11 @@ export default class Form extends Widget {
     // NOP
   }
 
+  /**
+   * @returns {any}
+   */
   exportData() {
-    // NOP
+    return null;
   }
 
   /**
@@ -382,7 +390,7 @@ export default class Form extends Widget {
 
   /**
    * This function is called by the lifecycle, when the 'save' function is called.<p>
-   * The data given to this function is the result of 'exportData' which was called in advance.
+   * The data given to this function is the result of {@link exportData} which was called in advance.
    *
    * @returns {Promise} promise which may contain a Status specifying if the save operation was successful. The promise may be empty which means the save operation was successful.
    */

package/src/form/fields/groupbox/GroupBox.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -119,6 +119,7 @@
     display: inline-block;
     vertical-align: middle;
     padding: @group-box-title-padding-top 0 @group-box-title-padding-bottom 0;
+    max-width: 100%;
 
     .group-box.has-sub-label > & {
       padding-bottom: @group-box-title-with-sub-label-padding-bottom;
@@ -135,6 +136,7 @@
       font-size: @sub-title-font-size;
       letter-spacing: @sub-title-letter-spacing;
       color: @sub-title-color;
+      #scout.overflow-ellipsis();
     }
   }
 

package/src/glasspane/DeferredGlassPaneTarget.js

@@ -14,8 +14,8 @@
  */
 export default class DeferredGlassPaneTarget {
   constructor() {
-    this.$glassPaneTargets;
-    this.glassPaneRenderer;
+    this.$glassPaneTargets = null;
+    this.glassPaneRenderer = null;
   }
 
   ready($glassPaneTargets) {

package/src/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -605,6 +605,7 @@ export {default as FormFieldTile} from './tile/fields/FormFieldTile';
 export {default as FormFieldTileAdapter} from './tile/fields/FormFieldTileAdapter';
 export {default as ButtonTile} from './tile/fields/button/ButtonTile';
 export {default as TileButton} from './tile/fields/button/TileButton';
+export {default as TileHtmlField} from './tile/fields/htmlfield/TileHtmlField';
 export {default as TileTableField} from './tile/fields/tablefield/TileTableField';
 export {default as SimpleTab} from './tabbox/SimpleTab';
 export {default as SimpleTabArea} from './tabbox/SimpleTabArea';

package/src/login/LoginBox.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -84,3 +84,10 @@
   height: 18px;
   vertical-align: middle;
 }
+
+.login-body,
+.logout-body {
+  & > .box-background-elements.box-background-elements-fadeout {
+    #scout.animation(nop 0.05s);
+  }
+}

package/src/main.less

@@ -408,7 +408,7 @@ button::-moz-focus-inner {
   pointer-events: none;
 
   &.fadeout {
-    #scout.animation(application-loading-fade-out @loading-fade-duration linear 1);
+    #scout.animation(application-loading-fade-out @loading-fade-duration linear 1 forwards);
   }
 }
 

package/src/menu/ComboMenu.js

@@ -8,21 +8,13 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {HtmlComponent, Menu} from '../index';
+import {HtmlComponent, Menu, widgets} from '../index';
 
 export default class ComboMenu extends Menu {
 
   constructor() {
     super();
-    this.childSelected = false;
-    this._childSelectedHandler = this._onChildSelected.bind(this);
-  }
-
-  _setChildActions(childActions) {
-    this.childActions.forEach(child => child.off('propertyChange:selected', this._childSelectedHandler));
-    super._setChildActions(childActions);
-    this.childActions.forEach(child => child.on('propertyChange:selected', this._childSelectedHandler));
-    this._updateChildSelected();
+    this._childVisibleChangeHandler = this._onChildVisibleChange.bind(this);
   }
 
   _render() {
@@ -36,10 +28,15 @@ export default class ComboMenu extends Menu {
 
   _renderProperties() {
     super._renderProperties();
-    this._renderChildSelected();
     this._renderChildActions();
   }
 
+  _setChildActions(childActions) {
+    this.childActions.forEach(child => child.off('propertyChange:visible', this._childVisibleChangeHandler));
+    super._setChildActions(childActions);
+    this.childActions.forEach(child => child.on('propertyChange:visible', this._childVisibleChangeHandler));
+  }
+
   _renderChildActions() {
     super._renderChildActions();
 
@@ -47,6 +44,7 @@ export default class ComboMenu extends Menu {
       childAction.addCssClass('combo-menu-child');
       childAction.render();
     });
+    widgets.updateFirstLastMarker(this.childActions);
   }
 
   // @override
@@ -54,15 +52,22 @@ export default class ComboMenu extends Menu {
     return false;
   }
 
-  _onChildSelected(event) {
-    this._updateChildSelected();
+  _onChildVisibleChange(event) {
+    if (this.rendered) {
+      widgets.updateFirstLastMarker(this.childActions);
+    }
   }
 
-  _updateChildSelected() {
-    this.setProperty('childSelected', this.childActions.some(child => child.selected));
+  _doActionTogglesPopup() {
+    return false;
   }
 
-  _renderChildSelected() {
-    this.$container.toggleClass('child-selected', this.childSelected);
+  isToggleAction() {
+    return false;
+  }
+
+  isTabTarget() {
+    // To make children tabbable, combo menu must never be a tab target, even if its a default menu
+    return false;
   }
 }