@eclipse-scout/core 22.0.0 → 22.0.10

package/package.json

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

package/src/App.js

@@ -291,7 +291,7 @@ export default class App {
     $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) {
+    if ($loadingRoot.css('opacity') === '1') {
       $loadingRoot.addClass('fadeout and-more');
     } else {
       $loadingRoot.addClass('fadeout');

package/src/ErrorHandler.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {AjaxError, App, arrays, icons, NullLogger, scout, strings} from './index';
+import {AjaxError, App, arrays, icons, logging, NullLogger, scout, strings} from './index';
 import $ from 'jquery';
 import sourcemappedStacktrace from 'sourcemapped-stacktrace';
 
@@ -37,25 +37,41 @@ export default class ErrorHandler {
   // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
   _onWindowError(errorMessage, fileName, lineNumber, columnNumber, error) {
     try {
+      if (this._isIgnorableScriptError(errorMessage, fileName, lineNumber, columnNumber, error)) {
+        this.handleErrorInfo({
+          log: `Ignoring error. Message: ${errorMessage}`,
+          level: logging.Level.INFO
+        });
+        return;
+      }
       if (error instanceof Error) {
         this.handle(error)
           .catch(error => {
             console.error('Error in global JavaScript error handler', error);
           });
-      } else {
-        let code = 'J00';
-        let log = errorMessage + ' at ' + fileName + ':' + lineNumber + '\n(' + 'Code ' + code + ')';
-        this.handleErrorInfo({
-          code: code,
-          message: errorMessage,
-          log: log
-        });
+        return;
       }
+      let code = 'J00';
+      let log = errorMessage + ' at ' + fileName + ':' + lineNumber + '\n(' + 'Code ' + code + ')';
+      this.handleErrorInfo({
+        code: code,
+        message: errorMessage,
+        log: log
+      });
     } catch (err) {
       throw new Error('Error in global JavaScript error handler: ' + err.message + ' (original error: ' + errorMessage + ' at ' + fileName + ':' + lineNumber + ')');
     }
   }
 
+  _isIgnorableScriptError(message, fileName, lineNumber, columnNumber, error) {
+    // Ignore errors caused by scripts from a different origin.
+    // Example: Firefox on iOS throws an error, probably caused by an internal Firefox script.
+    // The error does not affect the application and cannot be prevented by the app either since we don't know what script it is and what it does.
+    // In that case the error must no be shown to the user, instead just log it silently.
+    // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+    return message && message.toLowerCase().indexOf('script error') > -1 && !fileName && !lineNumber && !columnNumber && !error;
+  }
+
   /**
    * Handles unexpected JavaScript errors. The arguments are first analyzed and then handled.
    *
@@ -240,22 +256,9 @@ export default class ErrorHandler {
    * - If there is a scout session and the flag "sendError" is set, the error is sent to the UI server.
    */
   handleErrorInfo(errorInfo) {
+    errorInfo.level = scout.nvl(errorInfo.level, logging.Level.ERROR);
     if (this.logError && errorInfo.log) {
-      $.log.error(errorInfo.log);
-
-      // Note: when the null-logger is active it has already written the error to the console
-      // when the $.log.error function has been called above, so we don't have to log again here.
-      let writeToConsole = ErrorHandler.CONSOLE_OUTPUT;
-      if ($.log instanceof NullLogger) {
-        writeToConsole = false;
-      }
-      if (writeToConsole && window && window.console) {
-        if (window.console.error) {
-          window.console.error(errorInfo.log);
-        } else if (window.console.log) {
-          window.console.log(errorInfo.log);
-        }
-      }
+      this._logErrorInfo(errorInfo);
     }
 
     // Note: The error handler is installed globally and we cannot tell in which scout session the error happened.
@@ -263,16 +266,51 @@ export default class ErrorHandler {
     // multi-session-case (portlet), but currently there is no other way. Besides, this feature is not in use yet.
     if (App.get().sessions.length > 0) {
       let session = App.get().sessions[0];
-      if (this.displayError) {
+      if (this.displayError && errorInfo.level === logging.Level.ERROR) {
         this._showMessageBox(session, errorInfo.message, errorInfo.code, errorInfo.log);
       }
       if (this.sendError) {
-        this._sendErrorMessage(session, errorInfo.log);
+        this._sendErrorMessage(session, errorInfo.log, errorInfo.level);
       }
     }
     return errorInfo;
   }
 
+  _logErrorInfo(errorInfo) {
+    switch (errorInfo.level) {
+      case logging.Level.TRACE:
+        $.log.trace(errorInfo.log);
+        break;
+      case logging.Level.DEBUG:
+        $.log.debug(errorInfo.log);
+        break;
+      case logging.Level.INFO:
+        $.log.info(errorInfo.log);
+        break;
+      case logging.Level.WARN:
+        $.log.warn(errorInfo.log);
+        break;
+      default:
+        $.log.error(errorInfo.log);
+    }
+
+    // Note: when the null-logger is active it has already written the error to the console
+    // when the $.log.error function has been called above, so we don't have to log again here.
+    let writeToConsole = ErrorHandler.CONSOLE_OUTPUT;
+    if ($.log instanceof NullLogger) {
+      writeToConsole = false;
+    }
+    if (writeToConsole && window && window.console) {
+      if (errorInfo.level === logging.Level.ERROR && window.console.error) {
+        window.console.error(errorInfo.log);
+      } else if (errorInfo.level === logging.Level.WARN && window.console.warn) {
+        window.console.warn(errorInfo.log);
+      } else if (window.console.log) {
+        window.console.log(errorInfo.log);
+      }
+    }
+  }
+
   /**
    * Generate a "cool looking" error code from the JS error object, that
    * does not reveal too much technical information, but at least indicates
@@ -325,7 +363,7 @@ export default class ErrorHandler {
     session.showFatalMessage(options, errorCode);
   }
 
-  _sendErrorMessage(session, logMessage) {
-    session.sendLogRequest(logMessage);
+  _sendErrorMessage(session, logMessage, logLevel) {
+    session.sendLogRequest(logMessage, logLevel);
   }
 }

package/src/{table/TableHeaderMenuButtonKeyStroke.js → action/ActionExecKeyStroke.js}

@@ -10,13 +10,12 @@
  */
 import {keys, KeyStroke} from '../index';
 
-export default class TableHeaderMenuButtonKeyStroke extends KeyStroke {
+export default class ActionExecKeyStroke extends KeyStroke {
 
-  constructor(field) {
+  constructor(menu) {
     super();
-    this.field = field;
-    this.which = [keys.ENTER, keys.SPACE];
-    this.renderingHints.render = true;
+    this.field = menu;
+    this.which = [keys.SPACE, keys.ENTER];
     this.stopPropagation = true;
   }
 

package/src/action/Button.less

@@ -33,6 +33,7 @@
 
   & > .text {
     #scout.overflow-ellipsis-nowrap();
+    margin-top: @text-margin-top;
   }
 
   & > .icon {

package/src/box/Box.less

@@ -12,6 +12,8 @@
  * Used for static pages like login, logout, unsupported-browser and noscript section.
  * Note: This box must not depend on javascript because it is used for the noscript section as well.
  */
+@box-responsive-width: @box-width + 40px;
+
 .box {
   display: table;
   position: absolute;
@@ -26,9 +28,9 @@
 }
 
 .box-content {
-  border: 1px solid @border-color;
+  border: @popup-border-width solid @popup-border-color;
   border-radius: @border-radius-large;
-  background-color: @background-color;
+  background-color: @popup-background-color;
   max-width: @box-width;
   margin: 0 auto;
   padding: 45px 95px 50px 95px;
@@ -39,7 +41,7 @@
     text-align: center;
 
     & > .logo {
-      margin-top: 5px;
+      margin-top: 4px;
       margin-bottom: 40px;
       max-height: 30px;
     }
@@ -64,13 +66,14 @@
   }
 }
 
-@media (max-width: (@box-width + 40px)) {
+@media (max-width: @box-responsive-width) {
   .box-content {
     & > .header > .logo {
-      margin-bottom: 20px;
+      margin-bottom: 30px;
+      margin-top: 0;
     }
 
-    padding: 20px;
+    padding: 40px;
     margin-left: 10px;
     margin-right: 10px;
   }
@@ -80,10 +83,11 @@
   .box-content {
     & > .header > .logo {
       margin-bottom: 20px;
+      margin-top: 0;
     }
 
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: 25px;
+    padding-bottom: 25px;
   }
 }
 

package/src/breadcrumbbar/BreadcrumbBarLayout.js

@@ -44,7 +44,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
     this._collapse(breadcrumbItems, containerSize);
   }
 
-  _collapse = function($container, containerSize) {
+  _collapse($container, containerSize) {
     let currentIndex = 1;
     const visibleBreadcrumbItems = this._visibleBreadcrumbItems();
     let prefSize = this._actualPrefSize(visibleBreadcrumbItems, true);
@@ -116,7 +116,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
   /**
    * @return {number} the preferred width of all breadcrumbItems (plus ellipsis breadcrumb)
    */
-  _breadcrumbItemsWidth = function(breadcrumbItems, considerEllipsis) {
+  _breadcrumbItemsWidth(breadcrumbItems, considerEllipsis) {
     let breadcrumbsWidth = 0;
     breadcrumbItems = breadcrumbItems || this._visibleBreadcrumbItems();
     breadcrumbItems.forEach(breadcrumbItem => {

package/src/breadcrumbbar/BreadcrumbItem.less

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2010-2020 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
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -15,6 +15,7 @@
   height: 100%;
   color: @link-color;
   font-size: @font-size-plus;
+  vertical-align: top;
 
   &.last {
     font-weight: bold;
@@ -24,10 +25,6 @@
     color: @link-hover-color;
   }
 
-  &.first {
-    vertical-align: top;
-  }
-
   &:not(.first)::before {
     #scout.font-icon();
     content: @icon-angle-right-bold;

package/src/calendar/Calendar.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 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,27 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  CalendarComponent,
-  CalendarLayout,
-  CalendarListComponent,
-  DateRange,
-  dates,
-  Device,
-  events,
-  GroupBox,
-  HtmlComponent,
-  KeyStrokeContext,
-  menus,
-  numbers,
-  objects,
-  Point,
-  Range,
-  scout,
-  scrollbars,
-  strings,
-  Widget
-} from '../index';
+import {CalendarComponent, CalendarLayout, CalendarListComponent, DateRange, dates, Device, events, GroupBox, HtmlComponent, KeyStrokeContext, menus, numbers, objects, Point, Range, scout, scrollbars, strings, Widget} from '../index';
 import $ from 'jquery';
 
 export default class Calendar extends Widget {
@@ -759,11 +739,9 @@ export default class Calendar extends Widget {
       this.$topGrid.find('.calendar-day-name').data('new-width', 0);
       this.$grids.find('.calendar-day').data('new-width', 0);
       let newWidthWorkWeek = Math.round(contentW / this.workDayIndices.length);
-      $('.calendar-day-name:nth-child(-n+6), ' +
-        '.calendar-day:nth-child(-n+6)', this.$topGrid)
-        .data('new-width', newWidthWorkWeek);
-      $('.calendar-day:nth-child(-n+6)', this.$grid)
-        .data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day-name').slice(0, 5).data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day').slice(0, 5).data('new-width', newWidthWorkWeek);
+      $('.calendar-day:nth-child(-n+6)', this.$grid).data('new-width', newWidthWorkWeek);
       this.widthPerDivision = newWidthWorkWeek;
     } else if (this._isMonth() || this._isWeek()) {
       let newWidthMonthOrWeek = Math.round(contentW / 7);
@@ -781,21 +759,26 @@ export default class Calendar extends Widget {
       });
     }
 
-    let afterLayoutCallback = this._afterLayout.bind(this);
-
     // animate old to new sizes
-    $('div', this.$container).each(function() {
-      let $e = $(this),
-        w = $e.data('new-width'),
-        h = $e.data('new-height');
+    $('div', this.$container).each((i, elem) => {
+      let $e = $(elem);
+      let w = $e.data('new-width');
+      let h = $e.data('new-height');
       $e.stop(false, true);
 
       if (w !== undefined && w !== $e.outerWidth()) {
         if (animate) {
-          $e.animateAVCSD('width', w, afterLayoutCallback.bind(this, $e, animate));
+          let opts = {
+            complete: () => this._afterLayout($e, animate)
+          };
+          if ($e[0] === this.$grids[0]) {
+            // Grid contains scroll shadows that should be updated during animation (don't due it always for performance reasons)
+            opts.progress = () => this._afterLayout($e, animate);
+          }
+          $e.animate({width: w}, opts);
         } else {
           $e.css('width', w);
-          afterLayoutCallback($e, animate);
+          this._afterLayout($e, animate);
         }
       }
       if (h !== undefined && h !== $e.outerHeight()) {
@@ -807,14 +790,14 @@ export default class Calendar extends Widget {
             if (h === 0) {
               $e.addClass('hidden');
             }
-            afterLayoutCallback($e, animate);
+            this._afterLayout($e, animate);
           });
         } else {
           $e.css('height', h);
           if (h === 0) {
             $e.addClass('hidden');
           }
-          afterLayoutCallback($e, animate);
+          this._afterLayout($e, animate);
         }
       }
     });
@@ -853,13 +836,18 @@ export default class Calendar extends Widget {
 
   _updateScrollbars($parent, animate) {
     let $scrollables = $('.calendar-scrollable-components', $parent);
-    $scrollables.each(function() {
-      let $scrollable = $(this);
-      scrollbars.update($scrollable, true);
+    $scrollables.each((i, elem) => {
+      scrollbars.update($(elem), true);
     });
     this.updateScrollPosition(animate);
   }
 
+  _uninstallComponentScrollbars($parent) {
+    $parent.find('.calendar-scrollable-components').each((i, elem) => {
+      scrollbars.uninstall($(elem), this.session);
+    });
+  }
+
   _updateTopGrid() {
     $('.calendar-component', this.$topGrid).each((index, part) => {
       let component = $(part).data('component');
@@ -1037,18 +1025,8 @@ export default class Calendar extends Widget {
   }
 
   _remove() {
-    let $days = $('.calendar-day', this.$grid);
-
-    // Ensure that scrollbars are unregistered
-    for (let k = 0; k < $days.length; k++) {
-      let $day = $days.eq(k);
-      let $scrollableContainer = $day.children('.calendar-scrollable-components');
-
-      if ($scrollableContainer.length > 0) {
-        scrollbars.uninstall($scrollableContainer, this.session);
-        $scrollableContainer.remove();
-      }
-    }
+    this._uninstallComponentScrollbars(this.$grid);
+    this._uninstallComponentScrollbars(this.$topGrid);
 
     this.$window
       .off('mousemove touchmove', this._mouseMoveHandler)
@@ -1179,6 +1157,7 @@ export default class Calendar extends Widget {
 
     if (this._isMonth()) {
       this._uninstallScrollbars();
+      this._uninstallComponentScrollbars(this.$topGrid);
       this.$grid.removeClass('calendar-scrollable-components');
     } else {
       this.$grid.addClass('calendar-scrollable-components');
@@ -1188,16 +1167,19 @@ export default class Calendar extends Widget {
         session: this.session,
         axis: 'y'
       });
-
-      let $topDays = $('.calendar-scrollable-components', this.$topGrid);
-      for (k = 0; k < $topDays.length; k++) {
-        let $topDay = $topDays.eq(k);
+      this.$topGrid.find('.calendar-scrollable-components').each((i, elem) => {
+        let $topDay = $(elem);
+        if ($topDay.data('scrollable')) {
+          scrollbars.update($topDay);
+          return;
+        }
         scrollbars.install($topDay, {
           parent: this,
           session: this.session,
-          axis: 'y'
+          axis: 'y',
+          scrollShadow: 'none'
         });
-      }
+      });
     }
   }
 

package/src/calendar/Calendar.less

@@ -28,15 +28,6 @@
   height: 100%;
 }
 
-.calendar-week-scrollable {
-  overflow: visible;
-}
-
-.calendar-scrollable-components-week {
-  top: calc(@calendar-day-selected-circle-size ~'+ 5px');
-  height: calc(~'15% - (' @calendar-day-selected-circle-size ~' + 5px)');
-}
-
 .calendar-header {
   position: relative;
   display: block;
@@ -147,7 +138,8 @@
 }
 
 .calendar-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
 
   border-top: 1px solid @control-border-color;
   border-bottom: 1px solid @control-border-color;
@@ -362,8 +354,16 @@
   height: calc(~'100% - 25px');
   padding-right: @root-group-box-padding-right;
 
+  & + .scroll-shadow {
+    --scroll-shadow-inset-right: @root-group-box-padding-right;
+  }
+
   &.mobile {
     padding-right: @calendar-padding-right-mobile;
+
+    & + .scroll-shadow {
+      --scroll-shadow-inset-right: @calendar-padding-right-mobile;
+    }
   }
 }
 

package/src/calendar/CalendarLayout.js

@@ -17,6 +17,7 @@ export default class CalendarLayout extends AbstractLayout {
     this.calendar = calendar;
     this.stacked = false;
     this.compacted = false;
+    this.compactWidth = 550;
   }
 
   layout($container) {
@@ -34,7 +35,8 @@ export default class CalendarLayout extends AbstractLayout {
     if ($header[0].scrollWidth > $container.width()) {
       this.stack();
     }
-    if ($header[0].scrollWidth > $container.width()) {
+    if ($container.width() < this.compactWidth || $header[0].scrollWidth > $container.width()) {
+      // Title may take a lot of space, make it always compact for small devices so it won't toggle when changing display mode or view range
       this.compact();
     }
 

package/src/checkbox/CheckBox.less

@@ -39,6 +39,7 @@
 #scout {
 
   .checkbox() {
+    cursor: pointer;
     position: relative;
     display: inline-block;
     text-align: center;
@@ -66,6 +67,7 @@
   }
 
   .checkbox-disabled() {
+    cursor: default;
     border-color: @check-box-disabled-border-color;
   }
 
@@ -94,4 +96,4 @@
     background-color: @check-box-checked-disabled-background-color;
     border-color: @check-box-checked-disabled-background-color;
   }
-}
+}

package/src/datepicker/DatePicker.less

@@ -142,6 +142,7 @@
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: @text-margin-top;
   #scout.overflow-ellipsis-nowrap();
 }
 

package/src/datepicker/DatePickerTouchPopup.js

@@ -63,4 +63,12 @@ export default class DatePickerTouchPopup extends TouchPopup {
     }
     this._touchField._triggerAcceptInput();
   }
+
+  /**
+   * @override
+   */
+  _acceptInput() {
+    this._field.acceptDate();
+    this.close();
+  }
 }

package/src/desktop/DisableBrowserF5ReloadKeyStroke.js

@@ -33,6 +33,7 @@ export default class DisableBrowserF5ReloadKeyStroke extends KeyStroke {
     this.preventDefault = true;
     this.keyStrokeFirePolicy = Action.KeyStrokeFirePolicy.ALWAYS; // ignore glass panes
     this.renderingHints.render = false;
+    this.inheritAccessibility = false;
   }
 
   /**

package/src/desktop/bench/DesktopTabSelectKeyStroke.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {HAlign, keys, RangeKeyStroke} from '../../index';
+import {keys, RangeKeyStroke} from '../../index';
 
 /**
  * Composite keystroke to provide a numeric keystroke to select view tabs.
@@ -35,6 +35,7 @@ export default class DesktopTabSelectKeyStroke extends RangeKeyStroke {
       let viewIndex = event.which - keys['1'];
       return this._viewTabs()[viewIndex].$container;
     };
+    this.inheritAccessibility = false;
   }
 
   /**

package/src/desktop/desktoptab/DesktopTab.less

@@ -10,11 +10,12 @@
  */
 .desktop-tab.simple-tab {
   width: @desktop-tab-width;
-  min-width: @desktop-tab-min-width ;
+  min-width: @desktop-tab-min-width;
   margin: @desktop-tab-margin-top @desktop-tab-margin-right 0 0;
   padding: @desktop-tab-padding @desktop-tab-padding 0 @desktop-tab-padding-left;
   border-radius: @desktop-tab-border-radius @desktop-tab-border-radius 0 0;
-  border-right-width: 0;
+  border: @desktop-tab-border-width solid @desktop-tab-border-color;
+  border-bottom-width: 0;
   background-color: @desktop-tab-background-color;
 
   & > .title-line {
@@ -79,6 +80,7 @@
   &:hover,
   &:active {
     background-color: @desktop-tab-hover-background-color;
+    border-color: transparent;
 
     & > .title-line > .title {
       color: inherit;
@@ -109,6 +111,7 @@
 
   &.selected {
     background-color: @simple-tab-selected-background-color;
+    border-color: transparent;
 
     & > .title-line {
       & > .icon-container {

package/src/desktop/desktoptab/DesktopTabArea.less

@@ -11,17 +11,21 @@
 .desktop-tab-area {
 
   & > .simple-overflow-tab-item {
-    border-radius: @desktop-tab-border-radius;
-    margin: @desktop-tab-margin-top @desktop-tab-margin-right @desktop-tab-margin-right * 2;
+    @desktop-overflow-tab-margin-bottom: @desktop-tab-margin-right * 2;
+
+    border-radius: @view-tab-border-radius; // Use smaller border radius, so it fits nicely into the inverted border radius of the last tab if it is selected
+    margin: @desktop-tab-margin-top + @desktop-overflow-tab-margin-bottom @desktop-tab-margin-right @desktop-overflow-tab-margin-bottom;
     background-color: @desktop-tab-background-color;
-    border: 0;
+    border: @desktop-tab-border-width solid @desktop-tab-border-color;
 
     &:hover {
       background-color: @desktop-tab-hover-background-color;
+      border-color: transparent;
     }
 
     &.selected {
       background-color: @desktop-tab-hover-background-color;
+      border-color: transparent;
     }
   }
 }