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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.0-beta.1",
+  "version": "22.0.0-beta.5",
   "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-beta.5",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/App.js

@@ -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);
@@ -224,23 +228,79 @@ export default class App {
     $.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) {
@@ -380,6 +440,7 @@ export default class App {
 
   _initDone(options) {
     this.initialized = true;
+    this.setLoading(false);
     this.trigger('init', {
       options: options
     });
@@ -388,6 +449,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/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) {

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/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/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/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;
   }
 }

package/src/menu/ComboMenu.less

@@ -18,25 +18,32 @@
     background-color: transparent;
   }
 
-  & > .menu-item:not(:first-child) {
-    margin-left: 3px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -1px;
-      top: 7px;
-      height: calc(100% - 14px);
-      width: 1px;
-      background-color: @border-color;
+  & > .menu-item {
+    &:not(.first) {
+      margin-left: 3px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: 7px;
+        height: calc(100% - 14px);
+        width: 1px;
+        background-color: @border-color;
+      }
     }
-  }
 
-  &:not(.disabled).child-selected,
-  &:not(.disabled):hover {
-    & > .menu-item:not(:first-child)::before {
+    &:focus::before {
       display: none;
     }
+
+    &:not(.disabled):hover,
+    &.selected {
+      &::before,
+      & ~ .menu-item::before {
+        display: none;
+      }
+    }
   }
 }
 
@@ -45,14 +52,19 @@
 
   & > .menu-item {
     border: 1px solid @button-border-color;
+    flex-grow: 1;
 
-    &:not(:last-child) {
+    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
+      flex-grow: 0;
+    }
+
+    &:not(.last) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       border-right: 0;
     }
 
-    &:not(:first-child) {
+    &:not(.first) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left: 0;
@@ -62,31 +74,64 @@
     .disabled& {
       border-color: @button-disabled-color;
     }
+
+    &:focus {
+      z-index: 1; // Allows box-shadow to draw over the right menu-item
+    }
   }
 
   &.default {
     & > .menu-item {
       .button.default();
 
+      &::before {
+        background-color: @default-combo-menu-separator-color;
+      }
+
       &.selected {
         background-color: @default-button-selected-background-color;
         border-color: @default-button-selected-background-color;
       }
+
+      &.disabled {
+        color: @disabled-inverted-color;
+
+        &:hover, &.active, &:active, &.selected {
+          background-color: @default-button-background-color;
+          border-color: @default-button-background-color;
+        }
+      }
     }
   }
 }
 
-.context-menu {
-  & > .combo-menu {
-    padding: 0;
+.context-menu > .combo-menu {
+  padding: 0;
 
-    & > .menu-item {
-      color: @context-menu-item-color;
-      padding-top: @context-menu-item-padding-y;
-      padding-bottom: @context-menu-item-padding-y;
+  & > .menu-item {
+    color: @context-menu-item-color;
+    padding: @context-menu-item-padding-y @context-menu-item-padding-right @context-menu-item-padding-y @context-menu-item-padding-left;
+    flex-grow: 1;
+    justify-content: start;
+    border-radius: 0;
+
+    & > .font-icon {
+      color: @context-menu-item-icon-color;
+    }
+
+    &.menu-textandicon > .icon {
+      margin-right: @context-menu-item-icon-margin-right;
+    }
+
+    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
+      flex-grow: 0;
+    }
+
+    &.disabled {
+      color: @menu-item-disabled-color;
 
-      &:first-child {
-        margin-left: @context-menu-item-padding-left - @menu-item-padding-x;
+      & > .font-icon {
+        color: @menu-item-disabled-color;
       }
     }
   }

package/src/menu/ContextMenuPopup.js

@@ -367,8 +367,9 @@ export default class ContextMenuPopup extends Popup {
 
       // prevent loosing original parent
       let originalParent = menu.parent;
-      if (this.cloneMenuItems && !menu.cloneOf) {
-        // clone will recursively also clone all child actions.
+      // Clone menu items but only clone once unless it is for a different context menu (e.g. a context menu of a combo menu inside a context menu)
+      // Clone will recursively also clone all child actions.
+      if (this.cloneMenuItems && !menu.cloneOf || !this.has(menu)) {
         menu = menu.clone({
           parent: this,
           textPosition: Action.TextPosition.DEFAULT

package/src/menu/ContextMenuPopup.less

@@ -47,7 +47,7 @@
     }
 
     &.menu-textandicon > .icon {
-      margin-right: 14px;
+      margin-right: @context-menu-item-icon-margin-right;
     }
 
     &.selected {

package/src/menu/EllipsisMenu.js

@@ -57,4 +57,8 @@ export default class EllipsisMenu extends Menu {
   isTabTarget() {
     return super.isTabTarget() && !this.hidden;
   }
+
+  _childrenForEnabledComputed() {
+    return this.childActions;
+  }
 }