@qooxdoo/framework 7.7.1 → 7.8.0

package/source/class/qx/ui/basic/Image.js

@@ -144,6 +144,16 @@ qx.Class.define("qx.ui.basic.Image", {
     allowGrowY: {
       refine: true,
       init: false
+    },
+
+    /**
+     * Source of image to display if the image in the `source` property fails to load.
+     */
+    fallbackSource: {
+      check: "String",
+      init: null,
+      nullable: true,
+      event: "changeFallbackSource"
     }
   },
 
@@ -189,6 +199,19 @@ qx.Class.define("qx.ui.basic.Image", {
     __currentContentElement: null,
     __wrapper: null,
     __requestId: 0,
+    /**
+     * If the image in the `source` property failed to load.
+     */
+    __failedToLoad: false,
+
+    /**
+     * @type {string} The actual source of the image that we display.
+     * While the `source` property is what we want to display,
+     * this property is what we are actually showing.
+     * This can be the `source` property but it can also be the `fallbackSource` property
+     * if the image in the `source` property failed to load.
+     */
+    __sourceToDisplay: null,
 
     // overridden
     _onChangeTheme() {
@@ -225,7 +248,7 @@ qx.Class.define("qx.ui.basic.Image", {
     _applyDecorator(value, old) {
       super._applyDecorator(value, old);
 
-      var source = this.getSource();
+      var source = this.__sourceToDisplay;
       source = qx.util.AliasManager.getInstance().resolve(source);
       var el = this.getContentElement();
       if (this.__wrapper) {
@@ -307,7 +330,7 @@ qx.Class.define("qx.ui.basic.Image", {
     _applyEnabled(value, old) {
       super._applyEnabled(value, old);
 
-      if (this.getSource()) {
+      if (this.__sourceToDisplay) {
         this._styleSource();
       }
     },
@@ -321,6 +344,8 @@ qx.Class.define("qx.ui.basic.Image", {
         }
       }
 
+      this.__failedToLoad = false;
+      this.__sourceToDisplay = value;
       this._styleSource();
     },
 
@@ -345,7 +370,7 @@ qx.Class.define("qx.ui.basic.Image", {
      */
     __getMode() {
       if (this.__mode == null) {
-        var source = this.getSource();
+        var source = this.__sourceToDisplay;
 
         if (source && qx.lang.String.startsWith(source, "@")) {
           this.__mode = "font";
@@ -458,13 +483,12 @@ qx.Class.define("qx.ui.basic.Image", {
     /**
      * Applies the source to the clipped image instance or preload
      * an image to detect sizes and apply it afterwards.
-     *
      */
     _styleSource() {
       var AliasManager = qx.util.AliasManager.getInstance();
       var ResourceManager = qx.util.ResourceManager.getInstance();
 
-      var source = AliasManager.resolve(this.getSource());
+      var source = AliasManager.resolve(this.__sourceToDisplay);
 
       var element = this.getContentElement();
       if (this.__wrapper) {
@@ -791,7 +815,7 @@ qx.Class.define("qx.ui.basic.Image", {
         el.setStyle("fontSize", (width > height ? height : width) + "px");
       } else {
         var source = qx.util.AliasManager.getInstance().resolve(
-          this.getSource()
+          this.__sourceToDisplay
         );
 
         var sparts = source.split("/");
@@ -805,7 +829,8 @@ qx.Class.define("qx.ui.basic.Image", {
       super._applyDimension();
 
       var isFont =
-        this.getSource() && qx.lang.String.startsWith(this.getSource(), "@");
+        this.__sourceToDisplay &&
+        qx.lang.String.startsWith(this.__sourceToDisplay, "@");
       if (isFont) {
         var el = this.getContentElement();
         if (el) {
@@ -872,6 +897,11 @@ qx.Class.define("qx.ui.basic.Image", {
         ImageLoader.load(source, this.__loaderCallback, this);
       } else {
         this.__resetSource(el);
+        if (!this.__failedToLoad && this.getFallbackSource()) {
+          this.__failedToLoad = true;
+          this.__sourceToDisplay = this.getFallbackSource();
+          this._styleSource();
+        }
       }
     },
 
@@ -904,6 +934,7 @@ qx.Class.define("qx.ui.basic.Image", {
     },
 
     /**
+     * Sets image source on the DOM element
      * Combines the decorator's image styles with our own image to make sure
      * gradient and backgroundImage decorators work on Images.
      *
@@ -991,6 +1022,32 @@ qx.Class.define("qx.ui.basic.Image", {
       }
     },
 
+    /**
+     * Tries to display the image in the `source` property again if it has failed to load.
+     */
+    tryReload() {
+      if (!this.__failedToLoad) {
+        return;
+      }
+      this.__failedToLoad = false;
+      this.__sourceToDisplay = this.getSource();
+      qx.io.ImageLoader.load(
+        this.getSource(),
+        () => this._styleSource(),
+        undefined,
+        {
+          retryFailed: true
+        }
+      );
+    },
+
+    /**
+     * @returns {boolean} If the image in the `source` property failed to load.
+     */
+    hasFailedToLoad() {
+      return this.__failedToLoad;
+    },
+
     /**
      * Event handler fired after the preloader has finished loading the icon
      *
@@ -1005,7 +1062,8 @@ qx.Class.define("qx.ui.basic.Image", {
 
       // Ignore when the source has already been modified
       if (
-        source !== qx.util.AliasManager.getInstance().resolve(this.getSource())
+        source !==
+        qx.util.AliasManager.getInstance().resolve(this.__sourceToDisplay)
       ) {
         this.fireEvent("aborted");
         return;
@@ -1015,6 +1073,12 @@ qx.Class.define("qx.ui.basic.Image", {
       if (imageInfo.failed) {
         this.warn("Image could not be loaded: " + source);
         this.fireEvent("loadingFailed");
+        if (!this.__failedToLoad && this.getFallbackSource()) {
+          this.__failedToLoad = true;
+          this.__sourceToDisplay = this.getFallbackSource();
+          this._styleSource();
+          return;
+        }
       } else if (imageInfo.aborted) {
         this.fireEvent("aborted");
         return;

package/source/class/qx/ui/basic/Label.js

@@ -79,7 +79,7 @@ qx.Class.define("qx.ui.basic.Label", {
     }
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleLabelListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -529,11 +529,9 @@ qx.Class.define("qx.ui.basic.Label", {
   */
 
   destruct() {
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleLabelListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleLabelListenerId
       );
     }
 

package/source/class/qx/ui/control/DateChooser.js

@@ -102,7 +102,7 @@ qx.Class.define("qx.ui.control.DateChooser", {
 
     // listen for locale changes
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleDatePaneListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._updateDatePane,
         this
@@ -782,11 +782,9 @@ qx.Class.define("qx.ui.control.DateChooser", {
   */
 
   destruct() {
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._updateDatePane,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleDatePaneListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleDatePaneListenerId
       );
     }
 

package/source/class/qx/ui/core/Blocker.js

@@ -63,7 +63,7 @@ qx.Class.define("qx.ui.core.Blocker", {
 
     // dynamic theme switch
     if (qx.core.Environment.get("qx.dyntheme")) {
-      qx.theme.manager.Meta.getInstance().addListener(
+      this.__changeThemeBlockerListenerId = qx.theme.manager.Meta.getInstance().addListener(
         "changeTheme",
         this._onChangeTheme,
         this
@@ -499,11 +499,9 @@ qx.Class.define("qx.ui.core.Blocker", {
 
   destruct() {
     // remove dynamic theme listener
-    if (qx.core.Environment.get("qx.dyntheme")) {
-      qx.theme.manager.Meta.getInstance().removeListener(
-        "changeTheme",
-        this._onChangeTheme,
-        this
+    if (qx.core.Environment.get("qx.dyntheme") && this.__changeThemeBlockerListenerId) {
+      qx.theme.manager.Meta.getInstance().removeListenerById(
+        this.__changeThemeBlockerListenerId
       );
     }
 

package/source/class/qx/ui/core/LayoutItem.js

@@ -30,7 +30,7 @@ qx.Class.define("qx.ui.core.LayoutItem", {
 
     // dynamic theme switch
     if (qx.core.Environment.get("qx.dyntheme")) {
-      qx.theme.manager.Meta.getInstance().addListener(
+      this.__changeThemeLayoutItemListenerId = qx.theme.manager.Meta.getInstance().addListener(
         "changeTheme",
         this._onChangeTheme,
         this
@@ -933,11 +933,9 @@ qx.Class.define("qx.ui.core.LayoutItem", {
 
   destruct() {
     // remove dynamic theme listener
-    if (qx.core.Environment.get("qx.dyntheme")) {
-      qx.theme.manager.Meta.getInstance().removeListener(
-        "changeTheme",
-        this._onChangeTheme,
-        this
+    if (qx.core.Environment.get("qx.dyntheme") && this.__changeThemeLayoutItemListenerId) {
+      qx.theme.manager.Meta.getInstance().removeListenerById(
+        this.__changeThemeLayoutItemListenerId
       );
     }
     this.$$parent =

package/source/class/qx/ui/core/MPlacement.js

@@ -203,6 +203,8 @@ qx.Mixin.define("qx.ui.core.MPlacement", {
     __ptwLiveUpdater: null,
     __ptwLiveDisappearListener: null,
     __ptwLiveUpdateDisappearListener: null,
+    /**@type {Record<"top" | "right" | "bottom" | "left", number> | null}*/
+    __lastKnownCoords: null,
 
     /**
      * Returns the location data like {qx.bom.element.Location#get} does,
@@ -378,6 +380,15 @@ qx.Mixin.define("qx.ui.core.MPlacement", {
         target.getContentLocation() || this.getLayoutLocation(target);
 
       if (coords != null) {
+        if (
+          coords.top === this.__lastKnownCoords?.top &&
+          coords.right === this.__lastKnownCoords?.right &&
+          coords.bottom === this.__lastKnownCoords?.bottom &&
+          coords.left === this.__lastKnownCoords?.left
+        ) {
+          return true;
+        }
+        this.__lastKnownCoords = coords;
         this._place(coords);
         return true;
       } else {

package/source/class/qx/ui/core/Widget.js

@@ -2128,11 +2128,13 @@ qx.Class.define("qx.ui.core.Widget", {
     }, // property apply
     _applyVisibility(value, old) {
       var content = this.getContentElement();
-      if (value === "visible") {
-        content.show();
-      } else {
-        content.hide();
-      } // only force a layout update if visibility change from/to "exclude"
+      if (content) {
+        if (value === "visible") {
+          content.show();
+        } else {
+          content.hide();
+        } // only force a layout update if visibility change from/to "exclude"
+      }
       var parent = this.$$parent;
       if (
         parent &&

package/source/class/qx/ui/form/AbstractField.js

@@ -35,19 +35,19 @@ qx.Class.define("qx.ui.form.AbstractField", {
   type: "abstract",
 
   statics: {
-    /** Stylesheet needed to style the native placeholder element. */
-    __stylesheet: null,
-
-    __addedPlaceholderRules: false,
+    __addedPlaceholderRules: "",
 
     /**
      * Adds the CSS rules needed to style the native placeholder element.
      */
     __addPlaceholderRules() {
-      if (qx.ui.form.AbstractField.__addedPlaceholderRules) {
+      const theme = qx.theme.manager.Meta.getInstance().getTheme();
+      const currentThemeName = theme ? theme.title || theme.name : "";
+
+      if (qx.ui.form.AbstractField.__addedPlaceholderRules === currentThemeName) {
         return;
       }
-      qx.ui.form.AbstractField.__addedPlaceholderRules = true;
+      qx.ui.form.AbstractField.__addedPlaceholderRules = currentThemeName;
       var engine = qx.core.Environment.get("engine.name");
       var browser = qx.core.Environment.get("browser.name");
       var colorManager = qx.theme.manager.Color.getInstance();
@@ -100,7 +100,9 @@ qx.Class.define("qx.ui.form.AbstractField", {
           "-ms-input-placeholder"
         ].join(separator);
       }
-
+      if(qx.ui.style.Stylesheet.getInstance().hasRule(selector)) {
+        qx.ui.style.Stylesheet.getInstance().removeRule(selector);
+      }
       qx.ui.style.Stylesheet.getInstance().addRule(
         selector,
         "color: " + color + " !important"
@@ -142,7 +144,7 @@ qx.Class.define("qx.ui.form.AbstractField", {
 
     // translation support
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleAbstractFieldListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -931,9 +933,7 @@ qx.Class.define("qx.ui.form.AbstractField", {
         this._placeholder.dispose();
         this._placeholder = null;
       }
-      if (!this.__useQxPlaceholder && qx.ui.form.AbstractField.__stylesheet) {
-        qx.bom.Stylesheet.removeSheet(qx.ui.form.AbstractField.__stylesheet);
-        qx.ui.form.AbstractField.__stylesheet = null;
+      if (!this.__useQxPlaceholder) {
         qx.ui.form.AbstractField.__addPlaceholderRules();
       }
     },
@@ -1074,11 +1074,9 @@ qx.Class.define("qx.ui.form.AbstractField", {
 
     this._placeholder = this.__font = null;
 
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleAbstractFieldListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleAbstractFieldListenerId
       );
     }
 

package/source/class/qx/ui/form/IListItem.js

@@ -20,4 +20,51 @@
  * This is a marker interface for classes which can act as a children of
  * {@link qx.ui.form.List}
  */
-qx.Interface.define("qx.ui.form.IListItem", {});
+qx.Interface.define("qx.ui.form.IListItem", {
+    /*
+  *****************************************************************************
+     EVENTS
+  *****************************************************************************
+  */
+
+  events: {
+    /** Fired when the value was modified */
+    changeReadOnly: "qx.event.type.Data"
+  },
+
+  /*
+  *****************************************************************************
+     MEMBERS
+  *****************************************************************************
+  */
+
+  members: {
+    /*
+    ---------------------------------------------------------------------------
+      READONLY PROPERTY
+    ---------------------------------------------------------------------------
+    */
+
+    /**
+     * Sets the element's value.
+     *
+     * @param value {Boolean|null} The new value of the element.
+     * @return {Boolean|null}
+     */
+    setReadOnly(value) {
+      this.assertArgumentsCount(arguments, 1, 1);
+    },
+
+    /**
+     * Resets the element's value to its initial value.
+     */
+    resetReadOnly() {},
+
+    /**
+     * The element's user set value.
+     *
+     * @return {Boolean|null} The value.
+     */
+    getReadOnly() {}
+  }
+});

package/source/class/qx/ui/form/List.js

@@ -199,10 +199,12 @@ qx.Class.define("qx.ui.form.List", {
      */
     _onAddChild(e) {
       const child = e.getData();
-      this.__childrenBindings.set(
-        child.toHashCode(),
-        this.bind("readOnly", child, "readOnly")
-      );
+      if (qx.Class.implementsInterface(child, qx.ui.form.IListItem)) {
+        this.__childrenBindings.set(
+          child.toHashCode(),
+          this.bind("readOnly", child, "readOnly")
+        );
+      }
 
       this.fireDataEvent("addItem", child);
     },
@@ -214,8 +216,11 @@ qx.Class.define("qx.ui.form.List", {
      */
     _onRemoveChild(e) {
       const child = e.getData();
-      child.removeBinding(this.__childrenBindings.get(child.toHashCode()));
-      this.__childrenBindings.delete(child.toHashCode());
+      const binding = this.__childrenBindings.get(child.toHashCode());
+      if (binding) {
+        child.removeBinding(binding);
+        this.__childrenBindings.delete(child.toHashCode());
+      }
       this.fireDataEvent("removeItem", child);
     },
 

package/source/class/qx/ui/form/MForm.js

@@ -22,7 +22,7 @@
 qx.Mixin.define("qx.ui.form.MForm", {
   construct() {
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleMFormListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this.__onChangeLocale,
         this
@@ -103,11 +103,9 @@ qx.Mixin.define("qx.ui.form.MForm", {
   },
 
   destruct() {
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this.__onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleMFormListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleMFormListenerId
       );
     }
   }

package/source/class/qx/ui/form/Spinner.js

@@ -87,7 +87,7 @@ qx.Class.define("qx.ui.form.Spinner", {
     this.addListener("roll", this._onRoll, this);
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleSpinnerListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -800,11 +800,9 @@ qx.Class.define("qx.ui.form.Spinner", {
       nf.removeListener("changeNumberFormat", this._onChangeNumberFormat, this);
     }
 
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleSpinnerListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleSpinnerListenerId
       );
     }
   }

package/source/class/qx/ui/form/renderer/AbstractRenderer.js

@@ -38,7 +38,7 @@ qx.Class.define("qx.ui.form.renderer.AbstractRenderer", {
 
     // translation support
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleRendererListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -190,11 +190,9 @@ qx.Class.define("qx.ui.form.renderer.AbstractRenderer", {
   */
 
   destruct() {
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleRendererListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleRendererListenerId
       );
     }
     this._names = null;

package/source/class/qx/ui/menu/AbstractButton.js

@@ -265,17 +265,15 @@ qx.Class.define("qx.ui.menu.AbstractButton", {
       if (qx.core.Environment.get("qx.dynlocale")) {
         var oldCommand = e.getOldData();
         if (!oldCommand) {
-          qx.locale.Manager.getInstance().addListener(
+          this.__changeLocaleCommandListenerId = qx.locale.Manager.getInstance().addListener(
             "changeLocale",
             this._onChangeLocale,
             this
           );
         }
-        if (!command) {
-          qx.locale.Manager.getInstance().removeListener(
-            "changeLocale",
-            this._onChangeLocale,
-            this
+        if (!command && this.__changeLocaleCommandListenerId) {
+          qx.locale.Manager.getInstance().removeListenerById(
+            this.__changeLocaleCommandListenerId
           );
         }
       }
@@ -397,11 +395,9 @@ qx.Class.define("qx.ui.menu.AbstractButton", {
       }
     }
 
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleCommandListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleCommandListenerId
       );
     }
   }

package/source/class/qx/ui/mobile/basic/Label.js

@@ -51,7 +51,7 @@ qx.Class.define("qx.ui.mobile.basic.Label", {
     this.initWrap();
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleLabelListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -145,11 +145,9 @@ qx.Class.define("qx.ui.mobile.basic.Label", {
   */
 
   destruct() {
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleLabelListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleLabelListenerId
       );
     }
   }

package/source/class/qx/ui/mobile/form/Label.js

@@ -71,7 +71,7 @@ qx.Class.define("qx.ui.mobile.form.Label", {
     this.initWrap();
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleLabelListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -242,11 +242,9 @@ qx.Class.define("qx.ui.mobile.form.Label", {
 
       this.__forWidget = null;
     }
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleLabelListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleLabelListenerId
       );
     }
   }

package/source/class/qx/ui/mobile/list/List.js

@@ -89,7 +89,7 @@ qx.Class.define("qx.ui.mobile.list.List", {
     }
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener(
+      this.__changeLocaleListListenerId = qx.locale.Manager.getInstance().addListener(
         "changeLocale",
         this._onChangeLocale,
         this
@@ -615,11 +615,9 @@ qx.Class.define("qx.ui.mobile.list.List", {
   destruct() {
     this.__trackElement = null;
     this._disposeObjects("__provider");
-    if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener(
-        "changeLocale",
-        this._onChangeLocale,
-        this
+    if (qx.core.Environment.get("qx.dynlocale") && this.__changeLocaleListListenerId) {
+      qx.locale.Manager.getInstance().removeListenerById(
+        this.__changeLocaleListListenerId
       );
     }
   }