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

package/src/tree/Tree.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
@@ -128,10 +128,8 @@ export default class Tree extends Widget {
     this.initialTraversing = true;
     this._setCheckable(this.checkable);
     this._ensureTreeNodes(this.nodes);
-    this.visitNodes(this._initTreeNode.bind(this));
-    this.visitNodes(this._updateFlatListAndSelectionPath.bind(this));
+    this._initNodes(this.nodes);
     this.initialTraversing = false;
-    this.selectedNodes = this._nodesByIds(this.selectedNodes);
     this.menuBar = scout.create('MenuBar', {
       parent: this,
       position: MenuBar.Position.BOTTOM,
@@ -145,6 +143,22 @@ export default class Tree extends Widget {
     this._setMenus(this.menus);
   }
 
+  /**
+   * Initialize nodes, applies filters and updates flat list
+   */
+  _initNodes(nodes, parentNode) {
+    if (!nodes) {
+      nodes = this.nodes;
+    }
+    Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
+    if (typeof this.selectedNodes[0] === 'string') {
+      this.selectedNodes = this._nodesByIds(this.selectedNodes);
+    }
+    this._updateSelectionPath();
+    nodes.forEach(node => this.applyFiltersForNode(node));
+    Tree.visitNodes((node, parentNode) => this._addToVisibleFlatList(node, false), nodes, parentNode);
+  }
+
   /**
    * Iterates through the given array and converts node-models to instances of TreeNode (or a subclass).
    * If the array element is already a TreeNode the function leaves the element untouched. This function also
@@ -226,44 +240,23 @@ export default class Tree extends Widget {
   }
 
   isSelectedNode(node) {
-    if (this.initialTraversing) {
-      return this.selectedNodes.indexOf(node.id) > -1;
-    }
     return this.selectedNodes.indexOf(node) > -1;
   }
 
-  _updateFlatListAndSelectionPath(node, parentNode) {
-    // if this node is selected all parent nodes have to be added to selectionPath
-    if (this.isSelectedNode(node) && (node.parentNode && !this.visibleNodesMap[node.parentNode.id] || node.level === 0)) {
-      let p = node;
-      while (p) {
-        this._inSelectionPathList[p.id] = true;
-        p.filterDirty = true;
-
-        if (p !== node) {
-          // ensure node is expanded
-          node.expanded = true;
-          // if parent was filtered before, try refilter after adding to selection path.
-          if (p.level === 0) {
-            this.applyFiltersForNode(p);
-
-            // add visible nodes to visible nodes array when they are initialized
-            this._addToVisibleFlatList(p, false);
-
-            // process children
-            this._addChildrenToFlatList(p, this.visibleNodesFlat.length - 1, false, null, true);
-          }
-        }
-        p = p.parentNode;
-      }
-    } else if (node.parentNode && this.isSelectedNode(node.parentNode)) {
-      this._inSelectionPathList[node.id] = true;
+  _updateSelectionPath() {
+    let selectedNode = this.selectedNodes[0];
+    if (!selectedNode) {
+      return;
     }
+    this._inSelectionPathList[selectedNode.id] = true;
 
-    this.applyFiltersForNode(node);
+    selectedNode.childNodes.forEach(child => this._inSelectionPathList[child.id] = true);
 
-    // add visible nodes to visible nodes array when they are initialized
-    this._addToVisibleFlatList(node, false);
+    let parentNode = selectedNode.parentNode;
+    while (parentNode) {
+      this._inSelectionPathList[parentNode.id] = true;
+      parentNode = parentNode.parentNode;
+    }
   }
 
   _initTreeNode(node, parentNode) {
@@ -303,6 +296,7 @@ export default class Tree extends Widget {
     this._removeFromFlatList(node, false); // ensure node is not longer in visible nodes list.
     node.destroy();
 
+    // noinspection JSUnresolvedVariable
     if (this._onNodeDeleted) { // Necessary for subclasses
       this._onNodeDeleted(node);
     }
@@ -366,8 +360,8 @@ export default class Tree extends Widget {
   }
 
   _remove() {
-    // remove listener
     this.session.desktop.off('popupOpen', this._popupOpenHandler);
+    this.filterSupport.remove();
 
     // stop all animations
     if (this._$animationWrapper) {
@@ -381,9 +375,8 @@ export default class Tree extends Widget {
     this.$fillBefore = null;
     this.$fillAfter = null;
     this.$data = null;
-    // reset rendered view range because now range is rendered
+    // reset rendered view range because no range is rendered
     this.viewRangeRendered = new Range(0, 0);
-    this.filterSupport.remove();
     super._remove();
   }
 
@@ -1422,8 +1415,7 @@ export default class Tree extends Widget {
       node.expanded = expanded;
       node.expandedLazy = lazy;
 
-      let filterStateChanged = this.applyFiltersForNode(node, false, renderAnimated);
-      if (filterStateChanged && renderExpansionOpts.expansionChanged) {
+      if (renderExpansionOpts.expansionChanged) {
         if (node.parentNode) {
           // ensure node is visible under the parent node if there is a parent.
           this._rebuildParent(node.parentNode, opts);
@@ -1433,9 +1425,7 @@ export default class Tree extends Widget {
           this._removeFromFlatList(node, false);
         }
       } else if (renderExpansionOpts.expandLazyChanged) {
-        node.childNodes.forEach(child => {
-          this.applyFiltersForNode(child, false, renderAnimated);
-        });
+        this.applyFiltersForNode(node, false, renderAnimated);
       }
 
       if (this.groupedNodes[node.id]) {
@@ -1443,8 +1433,7 @@ export default class Tree extends Widget {
       }
 
       if (node.expanded) {
-        node.ensureLoadChildren().done(
-          this._addChildrenToFlatList.bind(this, node, null, renderAnimated, null, true));
+        node.ensureLoadChildren().done(this._addChildrenToFlatList.bind(this, node, null, renderAnimated, null, true /* required that ctrl+shift+add expands all rows of a table-page */));
       } else {
         this._removeChildrenFromFlatList(node, renderAnimated);
       }
@@ -1477,7 +1466,7 @@ export default class Tree extends Widget {
       return;
     }
     if (node.expanded || node.expandedLazy) {
-      this._addChildrenToFlatList(node, null, false, null, true);
+      this._addChildrenToFlatList(node, null, true, null, true /* required so that double clicking a table-page-row expands the clicked child row */);
     } else {
       this._removeChildrenFromFlatList(node, false);
     }
@@ -1580,7 +1569,6 @@ export default class Tree extends Widget {
   }
 
   _removeFromFlatList(node, animatedRemove) {
-    let removedNodes = [];
     if (this.visibleNodesMap[node.id]) {
       let index = this.visibleNodesFlat.indexOf(node);
       this._removeChildrenFromFlatList(node, false);
@@ -1591,12 +1579,10 @@ export default class Tree extends Widget {
           this.nodeWidthDirty = true;
         }
       }
-      removedNodes = arrays.ensure(this.visibleNodesFlat.splice(index, 1));
+      this.visibleNodesFlat.splice(index, 1);
       delete this.visibleNodesMap[node.id];
       this.hideNode(node, animatedRemove);
     }
-    removedNodes.push(node);
-    return removedNodes;
   }
 
   /**
@@ -1605,8 +1591,8 @@ export default class Tree extends Widget {
   _addToVisibleFlatList(node, renderingAnimated) {
     // if node already is in visible list don't do anything. If no parentNode is available this node is on toplevel, if a parent is available
     // it has to be in visible list and also be expanded
-    if (!this.visibleNodesMap[node.id] && node.isFilterAccepted() && (!node.parentNode ||
-      node.parentNode.expanded && this.visibleNodesMap[node.parentNode.id])) {
+    if (!this.visibleNodesMap[node.id] && node.filterAccepted
+      && (!node.parentNode || node.parentNode.expanded && this.visibleNodesMap[node.parentNode.id])) {
       if (this.initialTraversing) {
         // for faster index calculation
         this._addToVisibleFlatListNoCheck(node, this.visibleNodesFlat.length, renderingAnimated);
@@ -1653,11 +1639,10 @@ export default class Tree extends Widget {
       let insertIndex, isAlreadyAdded = this.visibleNodesMap[node.id];
       if (isAlreadyAdded) {
         this.insertBatchInVisibleNodes(insertBatch, this._showNodes(insertBatch), animatedRendering);
-        this.checkAndHandleBatchAnimationWrapper(parentNode, animatedRendering, insertBatch);
+        // Animate rendering is always false because it would generate a bunch of animation wrappers which stay forever without really starting an animation...
+        this.checkAndHandleBatchAnimationWrapper(parentNode, false, insertBatch);
         insertBatch = this.newInsertBatch(insertBatch.nextBatchInsertIndex());
         insertBatch = this._addChildrenToFlatListIfExpanded(1, node, insertIndex, animatedRendering, insertBatch, forceFilter);
-        // do not animate following
-        animatedRendering = false;
       } else {
         insertBatch.insertNodes.push(node);
         this.visibleNodesMap[node.id] = true;
@@ -2201,9 +2186,7 @@ export default class Tree extends Widget {
           parentNode.childNodes.push(entry);
         });
       }
-      // initialize node and add to visible list if node is visible
-      Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
-      Tree.visitNodes(this._updateFlatListAndSelectionPath.bind(this), nodes, parentNode);
+      this._initNodes(nodes, parentNode);
       if (this.groupedNodes[parentNode.id]) {
         this._updateItemPath(false, parentNode);
       }
@@ -2226,9 +2209,7 @@ export default class Tree extends Widget {
       } else {
         arrays.pushAll(this.nodes, nodes);
       }
-      // initialize node and add to visible list if node is visible
-      Tree.visitNodes(this._initTreeNode.bind(this), nodes, parentNode);
-      Tree.visitNodes(this._updateFlatListAndSelectionPath.bind(this), nodes, parentNode);
+      this._initNodes(nodes, parentNode);
     }
     if (this.rendered) {
       this.viewRangeDirty = true;
@@ -2352,9 +2333,7 @@ export default class Tree extends Widget {
     }, this);
 
     // update child node indices
-    parentNodesToReindex.forEach(function(p) {
-      this._updateChildNodeIndex(p.childNodes);
-    }, this);
+    parentNodesToReindex.forEach(p => this._updateChildNodeIndex(p.childNodes));
     this._updateChildNodeIndex(topLevelNodesToReindex);
 
     this.deselectNodes(deletedNodes, {collectChildren: true});
@@ -2748,10 +2727,8 @@ export default class Tree extends Widget {
     // Filter nodes
     this.nodes.forEach(node => {
       let result = this.applyFiltersForNode(node, false, this.filterAnimated);
-      arrays.removeAll(newlyHidden, result.newlyShown);
-      arrays.removeAll(newlyShown, result.newlyHidden);
-      result.newlyHidden.forEach(hidden => arrays.pushSet(newlyHidden, hidden));
-      result.newlyShown.forEach(shown => arrays.pushSet(newlyShown, shown));
+      newlyHidden.push(...result.newlyHidden);
+      newlyShown.push(...result.newlyShown);
     });
     return {
       newlyHidden: newlyHidden,
@@ -2764,28 +2741,30 @@ export default class Tree extends Widget {
       return;
     }
     if (opts.textFilterText) {
-      result.newlyShown.forEach(node => this._expandAllParentNodes(node));
+      this._nodesByIds(Object.keys(this.nodesMap))
+        .filter(it => it.filterAccepted)
+        .forEach(node => this._expandAllParentNodes(node));
     }
     result.newlyShown.forEach(node => this._addToVisibleFlatList(node, this.filterAnimated));
-    this._nodesFiltered(result.newlyHidden.flatMap(node => this._removeFromFlatList(node, this.filterAnimated)));
+    result.newlyHidden.forEach(node => this._removeFromFlatList(node, this.filterAnimated));
     this.filteredElementsDirty = false;
   }
 
   filterVisibleNodes(animated) {
     // Filter nodes
     let newlyHidden = [];
-    for (let i = 0; i < this.visibleNodesFlat.length; i++) {
+    // iterate from end to beginning (child nodes first) so that the state of the children has already been updated
+    for (let i = this.visibleNodesFlat.length - 1; i >= 0; i--) {
       let node = this.visibleNodesFlat[i];
-      let result = this.applyFiltersForNode(node, false, animated);
+      let result = this._applyFiltersForNodeRec(node, true, animated);
       if (result.newlyHidden.length) {
         if (!node.isFilterAccepted()) {
-          i--;
-          arrays.pushAll(newlyHidden, this._removeFromFlatList(node, animated));
+          newlyHidden.push(...result.newlyHidden);
         }
         this.viewRangeDirty = true;
       }
     }
-
+    newlyHidden.forEach(h => this._removeFromFlatList(h, animated));
     this._nodesFiltered(newlyHidden);
   }
 
@@ -2795,88 +2774,78 @@ export default class Tree extends Widget {
   }
 
   applyFiltersForNode(node, applyNewHiddenShownNodes = true, animated = false) {
-    let newlyHidden = [],
-      newlyShown = [];
-    animated = animated && this.filterAnimated;
-    node.filterDirty = true;
-    let changed = this._applyFiltersForNode(node);
-    if (changed) {
-      let parents = [];
-      let parent = node.parentNode;
+    let result = this._applyFiltersForNodeRec(node, true, animated);
 
-      // collect all parents that need to be updated
-      // show: if node.filterAccepted === true, all parents with parent.filterAccepted === false need to be updated
-      // hide: if node.filterAccepted === false, all parents with parent.filterAccepted === true need to be updated...
-      //       ...EXCEPT there are other childNodes of parent with childNode.filterAccepted === true OR the parent is directly accepted by all filters
-      while (parent && parent.filterAccepted !== node.filterAccepted && (node.filterAccepted || (parent.childNodes.filter(child => parents.indexOf(child) === -1).every(child => !child.filterAccepted) && !this.filterSupport.elementAcceptedByFilters(parent)))) {
-        arrays.insert(parents, parent, 0);
-        parent = parent.parentNode;
-      }
+    // the result so far only includes the node and all its children.
+    // always include the parent nodes as well so that the filter has an effect
+    let parent = node.parentNode;
+    while (parent) {
+      let parentResult = this._applyFiltersForNodeRec(parent, false, animated);
+      result.newlyHidden.unshift(...parentResult.newlyHidden);
+      result.newlyShown.unshift(...parentResult.newlyShown);
+      parent = parent.parentNode;
+    }
+    this._nodesFiltered(result.newlyHidden);
 
-      let removeFrom = node.filterAccepted ? newlyHidden : newlyShown,
-        pushTo = node.filterAccepted ? newlyShown : newlyHidden;
+    if (applyNewHiddenShownNodes) {
+      result.newlyShown.forEach(node => this._addToVisibleFlatList(node, animated));
+      result.newlyHidden.forEach(node => this._removeFromFlatList(node, animated));
+    }
+    return result;
+  }
 
-      parents.forEach(p => {
-        p.setFilterAccepted(node.filterAccepted);
-        arrays.remove(removeFrom, p);
-        arrays.pushSet(pushTo, p);
-      });
-      arrays.pushSet(pushTo, node);
+  _applyFiltersForNodeRec(node, recursive, animated = false) {
+    let newlyHidden = [], newlyShown = [];
+    animated = animated && this.filterAnimated;
 
-      if (this.rendered) {
-        this.viewRangeDirty = true;
-      }
-    } else {
-      // this else branch is required when the filter-state of a node has not changed
-      // for instance Node "Telefon mit Sabrina" is visible for filter "tel" and also
-      // for filter "abr". However, it is possible that the node is _not_ attached, when
-      // we switch from one filter to another, because the node was not in the view-range
-      // with the previous filter. That's why we must make sure, the node is attached to
-      // the DOM, even though the filter state hasn't changed. Otherwise we'd have a
-      // problem when we insert nodes in this._insertNodeInDOMAtPlace.
-      if (!node.attached) {
-        this.showNode(node, animated);
-        if (node.attached) {
-          // If sibling nodes are hiding at the same time, the nodes to be shown should be added after these nodes to make the animation look correctly -> move them
-          node.$node.insertAfter(node.$node.nextAll('.hiding:last'));
-        }
+    let changed = this._applyFiltersForNode(node);
+    let hasChildrenWithFilterAccepted = false;
+    if (node.level < 32 /* see org.eclipse.scout.rt.client.ui.basic.tree.AbstractTree.expandAllRec */) {
+      if (recursive) {
+        node.childNodes.forEach(childNode => {
+          let result = this._applyFiltersForNodeRec(childNode, true, animated);
+          newlyHidden.push(...result.newlyHidden);
+          newlyShown.push(...result.newlyShown);
+          hasChildrenWithFilterAccepted = hasChildrenWithFilterAccepted || childNode.filterAccepted;
+        });
+      } else if (!node.filterAccepted) {
+        // Check children only if filterAccepted is false because only then hasChildrenWithFilterAccepted is used (see below).
+        // This has great impact on performance when there are many nodes
+        hasChildrenWithFilterAccepted = node.childNodes.some(childNode => childNode.filterAccepted);
       }
     }
 
-    if (node.level < 32) {
-      node.childNodes.forEach(childNode => {
-        let result = this.applyFiltersForNode(childNode, false, animated);
-        arrays.removeAll(newlyHidden, result.newlyShown);
-        arrays.removeAll(newlyShown, result.newlyHidden);
-        result.newlyHidden.forEach(hidden => arrays.pushSet(newlyHidden, hidden));
-        result.newlyShown.forEach(shown => arrays.pushSet(newlyShown, shown));
-      });
+    // set filter accepted on this node if it has children with filter accepted (so that the children are visible)
+    if (!node.filterAccepted && hasChildrenWithFilterAccepted) {
+      node.setFilterAccepted(true);
+      changed = !changed;
     }
 
-    if (applyNewHiddenShownNodes) {
-      newlyShown.forEach(node => this._addToVisibleFlatList(node, animated));
-      this._nodesFiltered(newlyHidden.flatMap(node => this._removeFromFlatList(node, animated)));
+    // remember changed node
+    if (changed) {
+      let pushTo = node.filterAccepted ? newlyShown : newlyHidden;
+      pushTo.unshift(node);
+
+      if (this.rendered) {
+        this.viewRangeDirty = true;
+      }
     }
 
-    return {
-      newlyHidden: newlyHidden,
-      newlyShown: newlyShown
-    };
+    return {newlyHidden: newlyHidden, newlyShown: newlyShown};
   }
 
   /**
    * @returns {Boolean} true if node state has changed, false if not
    */
   _applyFiltersForNode(node) {
-    let changed = this.filterSupport.applyFiltersForElement(node) || node.filterDirty;
-    if (changed) {
+    let changed = this.filterSupport.applyFiltersForElement(node);
+    if (changed || node.filterDirty) {
       node.filterDirty = false;
       node.childNodes.forEach(childNode => {
         childNode.filterDirty = true;
       });
-      return true;
     }
-    return false;
+    return changed;
   }
 
   /**
@@ -2912,7 +2881,7 @@ export default class Tree extends Widget {
     }
     nodes = nodes.filter(function(node) {
       let index = indexHint === undefined ? this.visibleNodesFlat.indexOf(node) : indexHint;
-      if (index === -1 || !(this.viewRangeRendered.from + this.viewRangeSize >= index && this.viewRangeRendered.from <= index && this.viewRangeRendered.size() > 0) || node.attached) {
+      if (index === -1 || !(this.viewRangeRendered.from + this.viewRangeSize >= index && this.viewRangeRendered.from <= index && this.viewRangeSize > 0) || node.attached) {
         // node is not visible
         return false;
       }
@@ -3073,6 +3042,10 @@ export default class Tree extends Widget {
           that.runningAnimationsFinishFunc();
           $node.removeClass('hiding');
           if (!$node.hasClass('showing')) {
+            // JQuery sets display to none which we don't need because node will be detached.
+            // If node is added using another method than slideDown (used by show node), it would be invisible.
+            // Example: parent is collapsed while nodes are hiding -> remove filter, expand parent -> invisible nodes
+            $node.css('display', '');
             $node.detach();
             node.attached = false;
           }
@@ -3086,15 +3059,11 @@ export default class Tree extends Widget {
   }
 
   _nodesToIds(nodes) {
-    return nodes.map(node => {
-      return node.id;
-    });
+    return nodes.map(node => node.id);
   }
 
   _nodesByIds(ids) {
-    return ids.map(id => {
-      return this.nodesMap[id];
-    });
+    return ids.map(id => this.nodesMap[id]);
   }
 
   _nodeById(id) {

package/src/tree/Tree.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
@@ -28,7 +28,7 @@
   }
 
   & > .filter-field {
-    --filter-field-max-bottom: calc(~'50% - ' (@filter-field-height + var(--menubar-height)) / 2);
+    --filter-field-max-bottom: calc(~'50% - ' (var(--filter-field-height) + var(--menubar-height)) / 2);
     bottom: calc(min(var(--filter-field-bottom), var(--filter-field-max-bottom)) + var(--menubar-height));
 
     &:not(.focused).empty {

package/src/tree/TreeLayout.js

@@ -34,7 +34,7 @@ export default class TreeLayout extends AbstractLayout {
     })
       .subtract(htmlContainer.insets());
 
-    if (this.tree.toggleBreadcrumbStyleEnabled) {
+    if (this.tree.toggleBreadcrumbStyleEnabled && this._sizeChanged(htmlContainer)) {
       this.tree.setBreadcrumbStyleActive(Math.floor(containerSize.width) <= this.tree.breadcrumbTogglingThreshold);
     }
 

package/src/tree/TreeNode.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
@@ -147,7 +147,7 @@ export default class TreeNode {
 
   isFilterAccepted(forceFilter) {
     if (this.filterDirty || forceFilter) {
-      this.getTree().applyFiltersForNode(this, false);
+      this.getTree().applyFiltersForNode(this);
     }
     return this.filterAccepted;
   }

package/src/util/Device.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
@@ -267,7 +267,7 @@ export default class Device {
     let browsers = Device.Browser;
     return (browser === browsers.CHROME && version >= 69)
       || (browser === browsers.FIREFOX && version >= 62)
-      || (browser === browsers.SAFARI && version >= 12.1);
+      || (browser === browsers.SAFARI && version >= 12);
   }
 
   /**
@@ -364,6 +364,10 @@ export default class Device {
     } else if (this.browser === browsers.EDGE) {
       versionRegex = /Edge\/([0-9]+\.?[0-9]*)/;
     } else if (this.browser === browsers.SAFARI) {
+      if (this.isIos() && userAgent.indexOf('Version/') < 0) {
+        this.browserVersion = this.systemVersion;
+        return;
+      }
       versionRegex = /Version\/([0-9]+\.?[0-9]*)/;
     } else if (this.browser === browsers.FIREFOX) {
       versionRegex = /Firefox\/([0-9]+\.?[0-9]*)/;

package/src/widget/FilterSupport.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
@@ -126,10 +126,12 @@ export default class FilterSupport extends WidgetSupport {
     this._filterField.$field.attr('tabIndex', -1);
 
     let color = styles.getFirstOpaqueBackgroundColor(this._filterField.$container),
-      transparentColorRgba = $.extend(true, {}, styles.rgb(color), {alpha: 0.5}),
-      transparentColor = 'rgba(' + transparentColorRgba.red + ', ' + transparentColorRgba.green + ', ' + transparentColorRgba.blue + ', ' + transparentColorRgba.alpha + ')';
+      colorRgba = $.extend(true, {red: 0, green: 0, blue: 0, alpha: 1}, styles.rgb(color)),
+      transparent50Color = 'rgba(' + colorRgba.red + ', ' + colorRgba.green + ', ' + colorRgba.blue + ', ' + 0.5 + ')',
+      transparent80Color = 'rgba(' + colorRgba.red + ', ' + colorRgba.green + ', ' + colorRgba.blue + ', ' + 0.8 + ')';
     this._filterField.$container.css('--filter-field-background-color', color);
-    this._filterField.$container.css('--filter-field-transparent-background-color', transparentColor);
+    this._filterField.$container.css('--filter-field-transparent-50-background-color', transparent50Color);
+    this._filterField.$container.css('--filter-field-transparent-80-background-color', transparent80Color);
 
     this._textFilter = this._createTextFilter();
     this._textFilter.synthetic = true;