@qooxdoo/framework 7.0.0-beta.5 → 7.0.0-beta.9

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

@@ -22,11 +22,9 @@
  * @use(qx.ui.mobile.core.EventHandler)
  * @require(qx.bom.Lifecycle)
  */
-qx.Class.define("qx.ui.mobile.core.Widget",
-{
-  extend : qx.core.Object,
-  include : [qx.locale.MTranslation],
-
+qx.Class.define("qx.ui.mobile.core.Widget", {
+  extend: qx.core.Object,
+  include: [qx.locale.MTranslation],
 
   /*
   *****************************************************************************
@@ -34,9 +32,8 @@ qx.Class.define("qx.ui.mobile.core.Widget",
   *****************************************************************************
   */
 
-  construct : function()
-  {
-    this.base(arguments);
+  construct() {
+    super();
 
     this._setContainerElement(this._createContainerElement());
 
@@ -51,96 +48,92 @@ qx.Class.define("qx.ui.mobile.core.Widget",
     this.initActivatable();
   },
 
-
-
-
   /*
   *****************************************************************************
      EVENTS
   *****************************************************************************
   */
 
-  events :
-  {
+  events: {
     /** Fired if the mouse cursor moves over the widget. */
-    mousemove : "qx.event.type.Mouse",
+    mousemove: "qx.event.type.Mouse",
 
     /** Fired if the mouse cursor enters the widget. */
-    mouseover : "qx.event.type.Mouse",
+    mouseover: "qx.event.type.Mouse",
 
     /** Fired if the mouse cursor leaves widget. */
-    mouseout : "qx.event.type.Mouse",
+    mouseout: "qx.event.type.Mouse",
 
     /** Mouse button is pressed on the widget. */
-    mousedown : "qx.event.type.Mouse",
+    mousedown: "qx.event.type.Mouse",
 
     /** Mouse button is released on the widget. */
-    mouseup : "qx.event.type.Mouse",
+    mouseup: "qx.event.type.Mouse",
 
     /** Widget is clicked using left or middle button.
         {@link qx.event.type.Mouse#getButton} for more details.*/
-    click : "qx.event.type.Mouse",
+    click: "qx.event.type.Mouse",
 
     /** Widget is double clicked using left or middle button.
         {@link qx.event.type.Mouse#getButton} for more details.*/
-    dblclick : "qx.event.type.Mouse",
+    dblclick: "qx.event.type.Mouse",
 
     /** Widget is clicked using the right mouse button. */
-    contextmenu : "qx.event.type.Mouse",
+    contextmenu: "qx.event.type.Mouse",
 
     /** Fired before the context menu is opened. */
-    beforeContextmenuOpen : "qx.event.type.Mouse",
+    beforeContextmenuOpen: "qx.event.type.Mouse",
 
     /** Fired if the mouse wheel is used over the widget. */
-    mousewheel : "qx.event.type.MouseWheel",
+    mousewheel: "qx.event.type.MouseWheel",
 
     /** Fired if a touch at the screen is started. */
-    touchstart : "qx.event.type.Touch",
+    touchstart: "qx.event.type.Touch",
 
     /** Fired if a touch at the screen has ended. */
-    touchend : "qx.event.type.Touch",
+    touchend: "qx.event.type.Touch",
 
     /** Fired during a touch at the screen. */
-    touchmove : "qx.event.type.Touch",
+    touchmove: "qx.event.type.Touch",
 
     /** Fired if a touch at the screen is canceled. */
-    touchcancel : "qx.event.type.Touch",
+    touchcancel: "qx.event.type.Touch",
 
     /** Fired when a finger taps on the screen. */
-    tap : "qx.event.type.Tap",
+    tap: "qx.event.type.Tap",
 
     /** Fired when a finger holds on the screen. */
-    longtap : "qx.event.type.Tap",
+    longtap: "qx.event.type.Tap",
 
     /** Fired when a finger swipes over the screen. */
-    swipe : "qx.event.type.Touch",
+    swipe: "qx.event.type.Touch",
 
     /** Fired when two pointers performing a rotate gesture on the screen. */
-    rotate : "qx.event.type.Rotate",
+    rotate: "qx.event.type.Rotate",
 
     /** Fired when two pointers performing a pinch in/out gesture on the screen. */
-    pinch : "qx.event.type.Pinch",
+    pinch: "qx.event.type.Pinch",
 
     /** Fired when an active pointer moves on the screen (after pointerdown till pointerup). */
-    track : "qx.event.type.Track",
+    track: "qx.event.type.Track",
 
     /**
      * This event if fired if a keyboard key is released.
      **/
-    keyup : "qx.event.type.KeySequence",
+    keyup: "qx.event.type.KeySequence",
 
     /**
      * This event if fired if a keyboard key is pressed down. This event is
      * only fired once if the user keeps the key pressed for a while.
      */
-    keydown : "qx.event.type.KeySequence",
+    keydown: "qx.event.type.KeySequence",
 
     /**
      * This event is fired any time a key is pressed. It will be repeated if
      * the user keeps the key pressed. The pressed key can be determined using
      * {@link qx.event.type.KeySequence#getKeyIdentifier}.
      */
-    keypress : "qx.event.type.KeySequence",
+    keypress: "qx.event.type.KeySequence",
 
     /**
      * This event is fired if the pressed key or keys result in a printable
@@ -151,144 +144,128 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * The unicode code of the pressed key can be read using
      * {@link qx.event.type.KeyInput#getCharCode}.
      */
-    keyinput : "qx.event.type.KeyInput",
-
+    keyinput: "qx.event.type.KeyInput",
 
     /**
      * Fired after a massive DOM manipulation, e.g. when DOM elements were
      * added or styles were changed. Listen to this event, if you need to
      * recalculate a layout or have to update your view.
      */
-    domupdated : "qx.event.type.Event",
+    domupdated: "qx.event.type.Event",
 
     /**
      * Fired after the widget appears on the screen.
      */
-    appear : "qx.event.type.Event",
+    appear: "qx.event.type.Event",
 
     /**
      * Fired after the widget disappears from the screen.
      */
-    disappear : "qx.event.type.Event",
-
+    disappear: "qx.event.type.Event",
 
     /**
      * The event is fired when the widget gets focused.
      */
-    focus : "qx.event.type.Focus",
+    focus: "qx.event.type.Focus",
 
     /**
      * The event is fired when the widget gets blurred.
      */
-    blur : "qx.event.type.Focus",
+    blur: "qx.event.type.Focus",
 
     /**
      * When the widget itself or any child of the widget receive the focus.
      */
-    focusin : "qx.event.type.Focus",
+    focusin: "qx.event.type.Focus",
 
     /**
      * When the widget itself or any child of the widget lost the focus.
      */
-    focusout : "qx.event.type.Focus",
+    focusout: "qx.event.type.Focus",
 
     /**
      * When the widget gets active (receives keyboard events etc.)
      */
-    activate : "qx.event.type.Focus",
+    activate: "qx.event.type.Focus",
 
     /**
      * When the widget gets inactive
      */
-    deactivate : "qx.event.type.Focus",
+    deactivate: "qx.event.type.Focus",
 
     /**
      * Fired when an active pointer moves on the screen or the mouse wheel is used.
      */
-    roll : "qx.event.type.Roll"
+    roll: "qx.event.type.Roll"
   },
 
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
   *****************************************************************************
   */
 
-  properties :
-  {
+  properties: {
     /**
      * The default CSS class used for this widget. The default CSS class
      * should contain the common appearance of the widget.
      * It is set to the container element of the widget. Use {@link #addCssClass}
      * to enhance the default appearance of the widget.
      */
-    defaultCssClass :
-    {
-      check : "String",
-      init : null,
-      nullable : true,
-      apply  : "_applyDefaultCssClass"
+    defaultCssClass: {
+      check: "String",
+      init: null,
+      nullable: true,
+      apply: "_applyDefaultCssClass"
     },
 
-
     /**
      * Whether this widget is enabled or not
      */
-    enabled :
-    {
+    enabled: {
       init: true,
-      check : "Boolean",
+      check: "Boolean",
       nullable: false,
-      event : "changeEnabled",
+      event: "changeEnabled",
       apply: "_applyEnabled"
     },
 
-
     /**
      * The name attribute of the container element. Useful when you want to find
      * an element by its name attribute.
      */
-    name :
-    {
-      check : "String",
-      init : null,
-      nullable : true,
-      apply : "_applyAttribute"
+    name: {
+      check: "String",
+      init: null,
+      nullable: true,
+      apply: "_applyAttribute"
     },
 
-
     /**
      * Whether the widget should be the target of an event. Set this property
      * to <code>false</code> when the widget is a child of another widget and
      * shouldn't react on events.
      */
-    anonymous :
-    {
-      check : "Boolean",
-      init : null,
-      nullable : true,
-      apply : "_applyStyle"
+    anonymous: {
+      check: "Boolean",
+      init: null,
+      nullable: true,
+      apply: "_applyStyle"
     },
 
-
     /**
      * The ID of the widget. When the ID is set to <code>null</code> an auto
      * id will be generated.
      */
-    id :
-    {
-      check : "String",
-      init : null,
-      nullable : true,
-      apply : "_applyId",
-      transform : "_transformId",
-      event : "changeId"
+    id: {
+      check: "String",
+      init: null,
+      nullable: true,
+      apply: "_applyId",
+      transform: "_transformId",
+      event: "changeId"
     },
 
-
     /**
      * Controls the visibility. Valid values are:
      *
@@ -298,158 +275,134 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *   <li><b>excluded</b>: Hide the widget. The space will be released.</li>
      * </ul>
      */
-    visibility :
-    {
-      check : ["visible", "hidden", "excluded"],
-      init : "visible",
-      apply : "_applyVisibility",
-      event : "changeVisibility"
+    visibility: {
+      check: ["visible", "hidden", "excluded"],
+      init: "visible",
+      apply: "_applyVisibility",
+      event: "changeVisibility"
     },
 
-
     /**
      * Whether the widget can be activated or not. When the widget is activated
      * a css class <code>active</code> is automatically added to the widget, which
      * can indicate the activation status.
      */
-    activatable :
-    {
-      check : "Boolean",
-      init : false,
-      apply : "_applyAttribute"
+    activatable: {
+      check: "Boolean",
+      init: false,
+      apply: "_applyAttribute"
     },
 
-
     /**
      * Rotates the widget. Negative and positive values are allowed.
      */
-    rotation :
-    {
-      check : "Number",
-      nullable : true,
-      init : null,
-      apply : "_transform"
+    rotation: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      apply: "_transform"
     },
 
-
     /**
-    * This property controls whether the transformation uses the length unit <code>px<code> or <code>rem</code>.
-    * This feature is important for creating a resolution independent transformation.
-    */
-    transformUnit :
-    {
-      check : ["rem", "px"],
-      nullable : false,
-      init : "rem",
-      apply : "_transform"
+     * This property controls whether the transformation uses the length unit <code>px<code> or <code>rem</code>.
+     * This feature is important for creating a resolution independent transformation.
+     */
+    transformUnit: {
+      check: ["rem", "px"],
+      nullable: false,
+      init: "rem",
+      apply: "_transform"
     },
 
-
     /**
      * Scales the widget in X direction (width).
      */
-    scaleX :
-    {
-      check : "Number",
-      nullable : true,
-      init : null,
-      apply : "_transform"
+    scaleX: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      apply: "_transform"
     },
 
-
     /**
      * Scales the widget in Y direction (height).
      */
-    scaleY :
-    {
-      check : "Number",
-      nullable : true,
-      init : null,
-      apply : "_transform"
+    scaleY: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      apply: "_transform"
     },
 
-
     /**
      * Moves the widget on X axis.
      */
-    translateX :
-    {
-      check : "Number",
-      nullable : true,
-      init : 0,
-      apply : "_transform"
+    translateX: {
+      check: "Number",
+      nullable: true,
+      init: 0,
+      apply: "_transform"
     },
 
-
     /**
      * Moves the widget on Y axis.
      */
-    translateY :
-    {
-      check : "Number",
-      nullable : true,
-      init : 0,
-      apply : "_transform"
+    translateY: {
+      check: "Number",
+      nullable: true,
+      init: 0,
+      apply: "_transform"
     },
 
-
     /**
      * Moves the widget on Z axis.
      */
-    translateZ :
-    {
-      check : "Number",
-      nullable : true,
-      init : 0,
-      apply : "_transform"
+    translateZ: {
+      check: "Number",
+      nullable: true,
+      init: 0,
+      apply: "_transform"
     }
   },
 
-
-
-
   /*
   *****************************************************************************
      STATICS
   *****************************************************************************
   */
 
-  statics :
-  {
+  statics: {
     /** @type {String} Prefix for the auto id */
-    ID_PREFIX : "qx_id_",
+    ID_PREFIX: "qx_id_",
 
     /** @type {Map} Internal data structure to store widgets */
-    __registry : {},
+    __registry: {},
 
     /** @type {Integer} Incremental counter of the current id */
-    __idCounter : 0,
+    __idCounter: 0,
 
     /** @type {Integer} ID of the timeout for the DOM update */
-    __domUpdatedScheduleId : null,
+    __domUpdatedScheduleId: null,
 
     /**
      * Event handler. Called when the application is in shutdown.
      * @internal
      */
-    onShutdown : function()
-    {
+    onShutdown() {
       window.clearTimeout(qx.ui.mobile.core.Widget.__domUpdatedScheduleId);
       delete qx.ui.mobile.core.Widget.__registry;
     },
 
     /**
      * Returns the current widget id of the registry.
-
      * @return {Integer} The current id
      * @internal
      */
-    getCurrentId : function()
-    {
+
+    getCurrentId() {
       return qx.ui.mobile.core.Widget.__idCounter;
     },
 
-
     /**
      * Registers a widget with its id for internal widget handling.
      *
@@ -457,17 +410,18 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    registerWidget : function(widget)
-    {
+    registerWidget(widget) {
       var id = widget.getId();
       var registry = qx.ui.mobile.core.Widget.__registry;
       if (qx.core.Environment.get("qx.debug")) {
-        qx.core.Assert.assertUndefined(registry[id], "Widget with the id '" + id + "' is already registered");
+        qx.core.Assert.assertUndefined(
+          registry[id],
+          "Widget with the id '" + id + "' is already registered"
+        );
       }
       registry[id] = widget;
     },
 
-
     /**
      * Unregisters the widget with the given id.
      *
@@ -475,33 +429,28 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    unregisterWidget : function(id)
-    {
+    unregisterWidget(id) {
       delete qx.ui.mobile.core.Widget.__registry[id];
     },
 
-
-   /**
+    /**
      * Returns the widget with the given id.
      *
      * @param id {String} The id of the widget
      * @return {qx.ui.core.Widget} The widget with the given id
      */
-    getWidgetById : function(id) {
+    getWidgetById(id) {
       return qx.ui.mobile.core.Widget.__registry[id];
     },
 
-
     /**
      * Schedules the {@link #domUpdated} method. The method will be called after a timeout
      * to prevent the triggered events to be fired too often, during massive DOM manipulations.
      *
      * @internal
      */
-    scheduleDomUpdated : function()
-    {
-      if (qx.ui.mobile.core.Widget.__domUpdatedScheduleId == null)
-      {
+    scheduleDomUpdated() {
+      if (qx.ui.mobile.core.Widget.__domUpdatedScheduleId == null) {
         qx.ui.mobile.core.Widget.__domUpdatedScheduleId = window.setTimeout(
           qx.ui.mobile.core.Widget.domUpdated,
           0
@@ -509,7 +458,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Fires the DOM updated event directly. Triggers the {@link qx.event.handler.Appear#refresh} and
      * {@link qx.ui.mobile.core.DomUpdatedHandler#refresh} methods. Do not use this
@@ -517,8 +465,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    domUpdated : qx.event.GlobalError.observeMethod(function()
-    {
+    domUpdated: qx.event.GlobalError.observeMethod(function () {
       var clazz = qx.ui.mobile.core.Widget;
       window.clearTimeout(clazz.__domUpdatedScheduleId);
       clazz.__domUpdatedScheduleId = null;
@@ -526,7 +473,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       qx.ui.mobile.core.DomUpdatedHandler.refresh();
     }),
 
-
     /**
      * Adds an attribute mapping entry. This entry is used by the {@link #_applyAttribute}
      * method. Shortcut when the property name differs from the real
@@ -549,21 +495,21 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param values {Map} Values of the property to the real attribute value.
      *      Use null, when you want not to set the attribute.
      */
-    addAttributeMapping : function(property, attribute, values)
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    addAttributeMapping(property, attribute, values) {
+      if (qx.core.Environment.get("qx.debug")) {
         var attributeMapping = qx.ui.mobile.core.Widget.ATTRIBUTE_MAPPING;
-        qx.core.Assert.assertUndefined(attributeMapping[property], "Attribute mapping for " + property + " already exists");
+        qx.core.Assert.assertUndefined(
+          attributeMapping[property],
+          "Attribute mapping for " + property + " already exists"
+        );
       }
 
       qx.ui.mobile.core.Widget.ATTRIBUTE_MAPPING[property] = {
-        attribute : attribute,
-        values : values
+        attribute: attribute,
+        values: values
       };
     },
 
-
     /**
      * Adds a style mapping entry. This entry is used by the {@link #_applyStyle}
      * method. Shortcut when the property name differs from the real
@@ -586,89 +532,77 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param values {Map} Values of the property to the real style value.
      *      Use null, when you want not to set the style.
      */
-    addStyleMapping : function(property, style, values)
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    addStyleMapping(property, style, values) {
+      if (qx.core.Environment.get("qx.debug")) {
         var styleMapping = qx.ui.mobile.core.Widget.STYLE_MAPPING;
-        qx.core.Assert.assertUndefined(styleMapping[property], "Style mapping for " + property + " already exists");
+        qx.core.Assert.assertUndefined(
+          styleMapping[property],
+          "Style mapping for " + property + " already exists"
+        );
       }
 
       qx.ui.mobile.core.Widget.STYLE_MAPPING[property] = {
-        style : style,
-        values : values
+        style: style,
+        values: values
       };
     },
 
-
     /**
      * Mapping of attribute properties to their real attribute name.
      *
      * @internal
      */
-    ATTRIBUTE_MAPPING :
-    {
-      "selectable" :
-      {
-        attribute : "data-selectable",
-        values :
-        {
-          "true" : null,
-          "false" : "false"
+    ATTRIBUTE_MAPPING: {
+      selectable: {
+        attribute: "data-selectable",
+        values: {
+          true: null,
+          false: "false"
         }
       },
-      "activatable" :
-      {
-        attribute : "data-activatable",
-        values :
-        {
-          "true" :"true",
-          "false" : null
+
+      activatable: {
+        attribute: "data-activatable",
+        values: {
+          true: "true",
+          false: null
         }
       },
-      "readOnly" :
-      {
-        attribute : "readonly"
+
+      readOnly: {
+        attribute: "readonly"
       }
     },
 
-
     /**
      * Mapping of style properties to their real style name.
      *
      * @internal
      */
-    STYLE_MAPPING :
-    {
-      "anonymous" :
-      {
-        style : "pointerEvents",
-        values :
-        {
-          "true" : "none",
-          "false" : null
+    STYLE_MAPPING: {
+      anonymous: {
+        style: "pointerEvents",
+        values: {
+          true: "none",
+          false: null
         }
       }
     }
   },
 
-
-
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-  members :
-  {
-    __containerElement : null,
-    __contentElement : null,
+  members: {
+    __containerElement: null,
+    __contentElement: null,
 
-    __layoutParent : null,
-    __children : null,
-    __layoutManager : null,
+    __layoutParent: null,
+    __children: null,
+    __layoutManager: null,
 
     /*
     ---------------------------------------------------------------------------
@@ -681,41 +615,34 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * Override this method if you want to create a custom widget.
      * @return {String} The container element's tag name
      */
-    _getTagName : function()
-    {
+    _getTagName() {
       return "div";
     },
 
-
-   /**
-    * Creates the container DOM element of the widget.
-    * Override this method if you want to create a custom widget.
-    *
-    * @return {Element} the container element.
-    */
-    _createContainerElement : function()
-    {
+    /**
+     * Creates the container DOM element of the widget.
+     * Override this method if you want to create a custom widget.
+     *
+     * @return {Element} the container element.
+     */
+    _createContainerElement() {
       return qx.dom.Element.create(this._getTagName());
     },
 
-
     /**
      * Triggers the {@link #scheduleDomUpdated} method. This method needs to be called
      * when the DOM has changed, e.g. an element was added / removed / styled.
      */
-    _domUpdated : function()
-    {
+    _domUpdated() {
       qx.ui.mobile.core.Widget.scheduleDomUpdated();
     },
 
-
     /*
     ---------------------------------------------------------------------------
       ID Handling
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Transforms the value of the ID property. When the value is null, an auto
      * generated ID is set. This makes sure that an ID is always set.
@@ -723,22 +650,17 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param value {String} The set id of the widget
      * @return {String} The transformed ID
      */
-    _transformId : function(value)
-    {
-      if (value == null)
-      {
+    _transformId(value) {
+      if (value == null) {
         var clazz = qx.ui.mobile.core.Widget;
         value = clazz.ID_PREFIX + clazz.__idCounter++;
       }
       return value;
     },
 
-
     // property apply
-    _applyId : function(value, old)
-    {
-      if (old != null)
-      {
+    _applyId(value, old) {
+      if (old != null) {
         // Unregister widget with old id
         qx.ui.mobile.core.Widget.unregisterWidget(old);
       }
@@ -747,7 +669,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       element.id = value;
       // Register the widget
       qx.ui.mobile.core.Widget.registerWidget(this);
-
     },
 
     /**
@@ -756,40 +677,34 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param old {Boolean?}, the old value of the widget
      *
      */
-    _applyEnabled : function(value,old)
-    {
-      if(value)
-      {
+    _applyEnabled(value, old) {
+      if (value) {
         this.removeCssClass("disabled");
-        this._setStyle('anonymous',this.getAnonymous());
-      }
-      else
-      {
+        this._setStyle("anonymous", this.getAnonymous());
+      } else {
         this.addCssClass("disabled");
-        this._setStyle('anonymous',true);
+        this._setStyle("anonymous", true);
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       Child Handling
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Adds a new child widget.
      *
      * @param child {qx.ui.core.Widget} the widget to add.
      * @param layoutProperties {Map?null} Optional layout data for widget.
      */
-    _add : function(child, layoutProperties)
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _add(child, layoutProperties) {
+      if (qx.core.Environment.get("qx.debug")) {
         if (child.getLayoutParent() === this) {
-          throw new Error("The widget is already added this widget. Please remove it first.");
+          throw new Error(
+            "The widget is already added this widget. Please remove it first."
+          );
         }
       }
 
@@ -801,7 +716,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._domUpdated();
     },
 
-
     /**
      * Add a child widget at the specified index
      *
@@ -811,8 +725,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *   current list of children.
      * @param options {Map?null} Optional layout data for widget.
      */
-    _addAt : function(child, index, options)
-    {
+    _addAt(child, index, options) {
       // When moving in the same widget, remove widget first
       if (child.getLayoutParent() == this) {
         qx.lang.Array.remove(this.__children, child);
@@ -827,7 +740,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Add a widget before another already inserted widget
      *
@@ -835,15 +747,19 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param beforeWidget {qx.ui.core.Widget} widget before the new widget will be inserted.
      * @param layoutProperties {Map?null} Optional layout data for widget.
      */
-    _addBefore : function(child, beforeWidget, layoutProperties)
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _addBefore(child, beforeWidget, layoutProperties) {
+      if (qx.core.Environment.get("qx.debug")) {
         if (child.getLayoutParent() === this) {
-          throw new Error("The widget is already added this widget. Please remove it first.");
+          throw new Error(
+            "The widget is already added this widget. Please remove it first."
+          );
         }
 
-        this.assertInArray(beforeWidget, this._getChildren(), "The 'before' widget is not a child of this widget!");
+        this.assertInArray(
+          beforeWidget,
+          this._getChildren(),
+          "The 'before' widget is not a child of this widget!"
+        );
       }
 
       if (child == beforeWidget) {
@@ -852,13 +768,16 @@ qx.Class.define("qx.ui.mobile.core.Widget",
 
       this._initializeChildLayout(child, layoutProperties);
 
-      this.getContentElement().insertBefore(child.getContainerElement(), beforeWidget.getContainerElement());
+      this.getContentElement().insertBefore(
+        child.getContainerElement(),
+        beforeWidget.getContainerElement()
+      );
+
       qx.lang.Array.insertBefore(this.__children, child, beforeWidget);
 
       this._domUpdated();
     },
 
-
     /**
      * Add a widget after another already inserted widget.
      *
@@ -866,15 +785,19 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param afterWidget {qx.ui.core.Widget} Widget, after which the new widget will be inserted.
      * @param layoutProperties {Map?null} Optional layout data for widget.
      */
-    _addAfter : function(child, afterWidget, layoutProperties)
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _addAfter(child, afterWidget, layoutProperties) {
+      if (qx.core.Environment.get("qx.debug")) {
         if (child.getLayoutParent() === this) {
-          throw new Error("The child is already added to this widget. Please remove it first.");
+          throw new Error(
+            "The child is already added to this widget. Please remove it first."
+          );
         }
 
-        this.assertInArray(afterWidget, this._getChildren(), "The 'after' widget is not a child of this widget!");
+        this.assertInArray(
+          afterWidget,
+          this._getChildren(),
+          "The 'after' widget is not a child of this widget!"
+        );
       }
 
       if (child == afterWidget) {
@@ -888,11 +811,12 @@ qx.Class.define("qx.ui.mobile.core.Widget",
 
       if (index == length - 1) {
         this.getContentElement().appendChild(child.getContainerElement());
-      }
-      else
-      {
-        var beforeWidget = this._getChildren()[index+1];
-        this.getContentElement().insertBefore(child.getContainerElement(), beforeWidget.getContainerElement());
+      } else {
+        var beforeWidget = this._getChildren()[index + 1];
+        this.getContentElement().insertBefore(
+          child.getContainerElement(),
+          beforeWidget.getContainerElement()
+        );
       }
 
       qx.lang.Array.insertAfter(this.__children, child, afterWidget);
@@ -900,27 +824,22 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._domUpdated();
     },
 
-
-
     /**
      * Removes a given child from the widget.
      *
      * @param child {qx.ui.core.Widget} The widget to remove.
      */
-    _remove : function(child)
-    {
+    _remove(child) {
       child.setLayoutParent(null);
       this._domUpdated();
     },
 
-
     /**
      * Remove the widget at the specified index.
      *
      * @param index {Integer} Index of the widget to remove.
      */
-    _removeAt : function(index)
-    {
+    _removeAt(index) {
       if (!this.__children) {
         throw new Error("This widget has no children!");
       }
@@ -929,22 +848,19 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._remove(child);
     },
 
-
     /**
      * Removes all children from the widget.
      * @return {Array} An Array including the removed children.
      */
-    _removeAll : function()
-    {
+    _removeAll() {
       // create a copy of the array
       var children = this.__children.concat();
-      for (var i = 0, l=children.length; i < l; i++) {
+      for (var i = 0, l = children.length; i < l; i++) {
         this._remove(children[i]);
       }
       return children;
     },
 
-
     /**
      * Returns the index position of the given widget if it is
      * a child widget. Otherwise it returns <code>-1</code>.
@@ -953,8 +869,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @return {Integer} The index position or <code>-1</code> when
      *   the given widget is no child of this layout.
      */
-    _indexOf : function(child)
-    {
+    _indexOf(child) {
       var children = this.__children;
       if (!children) {
         return -1;
@@ -963,7 +878,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       return children.indexOf(child);
     },
 
-
     /**
      * Internal method. Sets the layout parent.
      *
@@ -971,8 +885,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    setLayoutParent : function(parent)
-    {
+    setLayoutParent(parent) {
       if (this.__layoutParent === parent) {
         return;
       }
@@ -985,7 +898,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this.__layoutParent = parent || null;
     },
 
-
     /**
      * Internal method. Removes a given child widget and the corresponding DOM element.
      *
@@ -993,8 +905,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    removeChild : function(child)
-    {
+    removeChild(child) {
       qx.lang.Array.remove(this.__children, child);
       this.getContentElement().removeChild(child.getContainerElement());
       var layout = this._getLayout();
@@ -1003,43 +914,38 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Returns the parent widget of this widget.
      *
      * @return {qx.ui.core.Widget} The parent of the widget
      */
-    getLayoutParent : function()
-    {
+    getLayoutParent() {
       return this.__layoutParent;
     },
 
-
     /**
      * Returns the children of the widget.
      *
      * @return {qx.ui.core.Widget[]} The children of the widget
      */
-    _getChildren : function() {
+    _getChildren() {
       return this.__children;
     },
 
-
     /**
      * Whether the widget has child widgets.
      *
      * @return {Boolean} Whether the widget has children or not.
      */
-    _hasChildren : function() {
+    _hasChildren() {
       return this.__children && this.__children.length > 0;
     },
 
-
-   /*
-    ---------------------------------------------------------------------------
-      Layout handling
-    ---------------------------------------------------------------------------
-    */
+    /*
+     ---------------------------------------------------------------------------
+       Layout handling
+     ---------------------------------------------------------------------------
+     */
 
     /**
      * Set a layout manager for the widget. A layout manager can only be connected
@@ -1049,8 +955,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param layout {qx.ui.mobile.layout.Abstract} The new layout or
      *     <code>null</code> to reset the layout.
      */
-    _setLayout : function(layout)
-    {
+    _setLayout(layout) {
       if (qx.core.Environment.get("qx.debug")) {
         if (layout) {
           this.assertInstance(layout, qx.ui.mobile.layout.Abstract);
@@ -1059,7 +964,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
 
       if (this.__layoutManager) {
         this.__layoutManager.connectToWidget(null);
-        for (var i=0; i < this._getChildren().length; i++) {
+        for (var i = 0; i < this._getChildren().length; i++) {
           var child = this._getChildren()[i];
           this.__layoutManager.disconnectFromChildWidget(child);
         }
@@ -1072,16 +977,13 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._domUpdated();
     },
 
-
-
     /**
      * Initializes the layout of the given child widget.
      *
      * @param child {qx.ui.core.Widget} The child widget
      * @param layoutProperties {Map?null} Optional layout data for widget
      */
-    _initializeChildLayout : function(child, layoutProperties)
-    {
+    _initializeChildLayout(child, layoutProperties) {
       child.setLayoutParent(this);
       child.setLayoutProperties(layoutProperties);
       var layout = this._getLayout();
@@ -1090,24 +992,21 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Returns the set layout manager for the widget.
      *
      * @return  {qx.ui.mobile.layout.Abstract} the layout manager of the widget.
      */
-    _getLayout : function() {
+    _getLayout() {
       return this.__layoutManager;
     },
 
-
     /**
      * Stores the given layout properties.
      *
      * @param properties {Map} Incoming layout property data
      */
-    setLayoutProperties : function(properties)
-    {
+    setLayoutProperties(properties) {
       // Check values through parent
       var parent = this.getLayoutParent();
       if (parent) {
@@ -1115,7 +1014,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Updates the layout properties of a given widget.
      *
@@ -1124,8 +1022,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    updateLayoutProperties : function(widget, properties)
-    {
+    updateLayoutProperties(widget, properties) {
       var layout = this._getLayout();
       if (layout) {
         layout.setLayoutProperties(widget, properties);
@@ -1133,7 +1030,6 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._domUpdated();
     },
 
-
     /**
      * Updates the layout with the given arguments.
      *
@@ -1143,7 +1039,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    updateLayout : function(widget, action, properties) {
+    updateLayout(widget, action, properties) {
       var layout = this._getLayout();
       if (layout) {
         layout.updateLayout(widget, action, properties);
@@ -1151,38 +1047,41 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       this._domUpdated();
     },
 
-
     /*
     ---------------------------------------------------------------------------
       Content handling
     ---------------------------------------------------------------------------
     */
 
-
     /**
-    * Sets the innerHTML of the content element and calls the {@link #_domUpdated}
-    * method.
-    *
-    * @param value {String?""} The html to set in the content element.
-    */
-    _setHtml : function(value)
-    {
+     * Sets the innerHTML of the content element and calls the {@link #_domUpdated}
+     * method.
+     *
+     * @param value {String?""} The html to set in the content element.
+     */
+    _setHtml(value) {
       this.getContentElement().innerHTML = value || "";
       this._domUpdated();
     },
 
-
     /**
      * Transforms this widget (rotate, scale, translate3d)
      */
-    _transform : function() {
+    _transform() {
       var propertyValue = "";
-      if(this.getRotation() != null) {
-        propertyValue = propertyValue + "rotate("+this.getRotation()+"deg) ";
+      if (this.getRotation() != null) {
+        propertyValue =
+          propertyValue + "rotate(" + this.getRotation() + "deg) ";
       }
 
-      if(this.getScaleX() != null && this.getScaleY() != null) {
-        propertyValue = propertyValue + "scale("+this.getScaleX()+","+this.getScaleY()+") ";
+      if (this.getScaleX() != null && this.getScaleY() != null) {
+        propertyValue =
+          propertyValue +
+          "scale(" +
+          this.getScaleX() +
+          "," +
+          this.getScaleY() +
+          ") ";
       }
 
       var resolutionFactor = 1;
@@ -1193,16 +1092,38 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       if (this.getTranslateX() != null && this.getTranslateY() != null) {
         var isTransform3d = qx.core.Environment.get("css.transform.3d");
         if (isTransform3d && this.getTranslateZ() != null) {
-          propertyValue = propertyValue + "translate3d(" + (this.getTranslateX()/resolutionFactor) + this.getTransformUnit() + "," + (this.getTranslateY()/resolutionFactor) + this.getTransformUnit() + "," + (this.getTranslateZ()/resolutionFactor) + this.getTransformUnit() + ") ";
+          propertyValue =
+            propertyValue +
+            "translate3d(" +
+            this.getTranslateX() / resolutionFactor +
+            this.getTransformUnit() +
+            "," +
+            this.getTranslateY() / resolutionFactor +
+            this.getTransformUnit() +
+            "," +
+            this.getTranslateZ() / resolutionFactor +
+            this.getTransformUnit() +
+            ") ";
         } else {
-          propertyValue = propertyValue + "translate(" + (this.getTranslateX()/resolutionFactor) + this.getTransformUnit() + "," + (this.getTranslateY()/resolutionFactor) + this.getTransformUnit() + ") ";
+          propertyValue =
+            propertyValue +
+            "translate(" +
+            this.getTranslateX() / resolutionFactor +
+            this.getTransformUnit() +
+            "," +
+            this.getTranslateY() / resolutionFactor +
+            this.getTransformUnit() +
+            ") ";
         }
       }
 
-      qx.bom.element.Style.set(this.getContainerElement(),"transform", propertyValue);
+      qx.bom.element.Style.set(
+        this.getContainerElement(),
+        "transform",
+        propertyValue
+      );
     },
 
-
     /*
     ---------------------------------------------------------------------------
       Attributes handling
@@ -1220,12 +1141,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param old {var} The old value
      * @param attribute {String} The property name
      */
-    _applyAttribute : function(value, old, attribute)
-    {
+    _applyAttribute(value, old, attribute) {
       this._setAttribute(attribute, value);
     },
 
-
     /**
      * Sets an attribute with the given value of the container element. The
      * <code>null</code> value resets the attribute.
@@ -1233,48 +1152,43 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param attribute {String} The attribute name.
      * @param value {var} The attribute value. <code>Null</code> will reset the attribute.
      */
-    _setAttribute : function(attribute, value)
-    {
+    _setAttribute(attribute, value) {
       var mapping = qx.ui.mobile.core.Widget.ATTRIBUTE_MAPPING[attribute];
-      if (mapping)
-      {
+      if (mapping) {
         attribute = mapping.attribute || attribute;
         var values = mapping.values;
-        value = values && typeof values[value] !== "undefined" ? values[value] : value;
+        value =
+          values && typeof values[value] !== "undefined"
+            ? values[value]
+            : value;
       }
 
       var element = this.getContainerElement();
       if (value != null) {
         qx.bom.element.Attribute.set(element, attribute, value);
-      }
-      else
-      {
+      } else {
         qx.bom.element.Attribute.reset(element, attribute);
       }
       this._domUpdated();
     },
 
-
     /**
      * Returns the set value of the given attribute.
      *
      * @param attribute {String} The attribute name
      * @return {var} The attribute's value
      */
-    _getAttribute : function(attribute)
-    {
+    _getAttribute(attribute) {
       var element = this.getContainerElement();
       return qx.bom.element.Attribute.get(element, attribute);
     },
 
-
     /*
     ---------------------------------------------------------------------------
       Styles handling
     ---------------------------------------------------------------------------
     */
 
-
     /**
      * Shortcut for each property that should change a certain style of the container
      * element.
@@ -1282,12 +1196,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * mapping when the style name or value differs from the property name or
      * value.
      */
-    _applyStyle : function(value, old, style)
-    {
+    _applyStyle(value, old, style) {
       this._setStyle(style, value);
     },
 
-
     /**
      * Sets the value of a certain style of the container element. The
      * <code>null</code> value resets the attribute.
@@ -1295,11 +1207,9 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * @param style {String} The style of which the value should be set
      * @param value {var} The value of the style. <code>Null</code> will reset the attribute.
      */
-    _setStyle : function(style, value)
-    {
+    _setStyle(style, value) {
       var mapping = qx.ui.mobile.core.Widget.STYLE_MAPPING[style];
-      if (mapping)
-      {
+      if (mapping) {
         style = mapping.style || style;
         value = mapping.values[value];
       }
@@ -1307,23 +1217,19 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       var element = this.getContainerElement();
       if (value != null) {
         qx.bom.element.Style.set(element, style, value);
-      }
-      else
-      {
+      } else {
         qx.bom.element.Style.reset(element, style);
       }
       this._domUpdated();
     },
 
-
     /**
      * Returns the value of a certain style of the container element.
      *
      * @param style {String} The style name of which the value should be returned
      * @return {var} The value of the style
      */
-    _getStyle : function(style)
-    {
+    _getStyle(style) {
       var element = this.getContainerElement();
       return qx.bom.element.Style.get(element, style);
     },
@@ -1335,8 +1241,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
     */
 
     // property apply
-    _applyDefaultCssClass : function(value, old)
-    {
+    _applyDefaultCssClass(value, old) {
       if (old) {
         this.removeCssClass(old);
       }
@@ -1345,65 +1250,64 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Adds a CSS class to the container element of the widget. Use this method
      * to enhance the default appearance of the widget.
      *
      * @param cssClass {String} The CSS class to add
      */
-    addCssClass : function(cssClass) {
+    addCssClass(cssClass) {
       qx.bom.element.Class.add(this.getContainerElement(), cssClass);
       this._domUpdated();
     },
 
-
     /**
      * Adds an array of CSS classes to the container element of the widget. Use this method
      * to enhance the default appearance of the widget.
      *
      * @param cssClasses {String[]} The CSS classes to add, wrapped by an array.
      */
-    addCssClasses : function(cssClasses) {
-      if(cssClasses){
+    addCssClasses(cssClasses) {
+      if (cssClasses) {
         qx.bom.element.Class.addClasses(this.getContainerElement(), cssClasses);
         this._domUpdated();
       }
     },
 
-
     /**
      * Removes a CSS class from the container element of the widget.
      *
      * @param cssClass {String} The CSS class to remove
      */
-    removeCssClass : function(cssClass) {
+    removeCssClass(cssClass) {
       if (this.hasCssClass(cssClass)) {
         qx.bom.element.Class.remove(this.getContainerElement(), cssClass);
         this._domUpdated();
       }
     },
 
-
     /**
      * Removes an array of CSS classes from the container element of the widget.
      *
      * @param cssClasses {String[]} The CSS classes to remove from widget.
      */
-    removeCssClasses : function(cssClasses) {
-       if(cssClasses){
-         qx.bom.element.Class.removeClasses(this.getContainerElement(), cssClasses);
-         this._domUpdated();
-       }
-    },
+    removeCssClasses(cssClasses) {
+      if (cssClasses) {
+        qx.bom.element.Class.removeClasses(
+          this.getContainerElement(),
+          cssClasses
+        );
 
+        this._domUpdated();
+      }
+    },
 
     /**
      * Toggles the given CSS. Adds or removes the CSS class from the container element of the widget.
      *
      * @param cssClass {String} The CSS class to toggle
      */
-    toggleCssClass : function(cssClass) {
+    toggleCssClass(cssClass) {
       if (this.hasCssClass(cssClass)) {
         this.removeCssClass(cssClass);
       } else {
@@ -1411,50 +1315,42 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Checks if the widget has a certain CSS class set.
      *
      * @param cssClass {String} The CSS class to check
      * @return {Boolean} Whether the CSS class is set or not
      */
-    hasCssClass : function(cssClass) {
+    hasCssClass(cssClass) {
       return qx.bom.element.Class.has(this.getContainerElement(), cssClass);
     },
 
-
     /*
     ---------------------------------------------------------------------------
       Visibility handling
     ---------------------------------------------------------------------------
     */
 
-
     // property apply
-    _applyVisibility : function(value, old)
-    {
+    _applyVisibility(value, old) {
       if (value == "excluded") {
         this.addCssClass("exclude");
-      }
-      else if(value == "visible")
-      {
+      } else if (value == "visible") {
         this.removeCssClass("exclude");
         this._setStyle("visibility", "visible");
-      }
-      else if (value == "hidden") {
+      } else if (value == "hidden") {
         this._setStyle("visibility", "hidden");
       }
       this._domUpdated();
     },
 
-
     /**
      * Sets the visibility of the widget.
      *
      * @param action {String} The causing action that triggered the layout update.
      * @param properties {Map} The animation properties to set. Key / value pairs.
      */
-    __setVisibility : function(action, properties) {
+    __setVisibility(action, properties) {
       this.setVisibility(action);
 
       var parent = this.getLayoutParent();
@@ -1463,40 +1359,36 @@ qx.Class.define("qx.ui.mobile.core.Widget",
       }
     },
 
-
     /**
      * Make this widget visible.
      *
      * @param properties {Map} The animation properties to set. Key / value pairs.
      *
      */
-    show : function(properties) {
+    show(properties) {
       this.__setVisibility("visible", properties);
     },
 
-
     /**
      * Hide this widget.
      *
      * @param properties {Map} The animation properties to set. Key / value pairs.
      *
      */
-    hide : function(properties) {
+    hide(properties) {
       this.__setVisibility("hidden", properties);
     },
 
-
     /**
      * Hide this widget and exclude it from the underlying layout.
      *
      * @param properties {Map} The animation properties to set. Key / value pairs.
      *
      */
-    exclude : function(properties) {
+    exclude(properties) {
       this.__setVisibility("excluded", properties);
     },
 
-
     /**
      * Whether the widget is locally visible.
      *
@@ -1504,11 +1396,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @return {Boolean} Returns <code>true</code> when the widget is visible
      */
-    isVisible : function() {
+    isVisible() {
       return this.getVisibility() === "visible";
     },
 
-
     /**
      * Whether the widget is locally hidden.
      *
@@ -1516,11 +1407,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @return {Boolean} Returns <code>true</code> when the widget is hidden
      */
-    isHidden : function() {
+    isHidden() {
       return this.getVisibility() !== "visible";
     },
 
-
     /**
      * Whether the widget is locally excluded.
      *
@@ -1528,11 +1418,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @return {Boolean} Returns <code>true</code> when the widget is excluded
      */
-    isExcluded : function() {
+    isExcluded() {
       return this.getVisibility() === "excluded";
     },
 
-
     /**
      * Detects if the widget and all its parents are visible.
      *
@@ -1540,12 +1429,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      * animations or performance critical tasks.
      * @return {Boolean} <code>true</code>if the widget is seeable
      */
-    isSeeable : function()
-    {
+    isSeeable() {
       return this.getContainerElement().offsetWidth > 0;
     },
 
-
     /*
     ---------------------------------------------------------------------------
      Element handling
@@ -1557,12 +1444,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @param element {Element} The container DOM element of the widget
      */
-    _setContainerElement : function(element)
-    {
+    _setContainerElement(element) {
       this.__containerElement = element;
     },
 
-
     /**
      * Returns the container DOM element of the widget.
      *
@@ -1570,12 +1455,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    getContainerElement : function()
-    {
+    getContainerElement() {
       return this.__containerElement;
     },
 
-
     /**
      * Returns the content DOM element of the widget.
      *
@@ -1583,15 +1466,13 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @internal
      */
-    getContentElement : function()
-    {
+    getContentElement() {
       if (!this.__contentElement) {
         this.__contentElement = this._getContentElement();
       }
       return this.__contentElement;
     },
 
-
     /**
      * Returns the content DOM element of the widget.
      * Override this method, to define another element as the content element.
@@ -1603,12 +1484,10 @@ qx.Class.define("qx.ui.mobile.core.Widget",
      *
      * @return {Element} the content DOM element of the widget
      */
-    _getContentElement : function()
-    {
+    _getContentElement() {
       return this.getContainerElement();
     },
 
-
     /*
     ---------------------------------------------------------------------------
       ENHANCED DISPOSE SUPPORT
@@ -1618,8 +1497,7 @@ qx.Class.define("qx.ui.mobile.core.Widget",
     /**
      * Removes this widget from its parent and disposes it.
      */
-    destroy : function()
-    {
+    destroy() {
       if (this.$$disposed) {
         return;
       }
@@ -1632,46 +1510,40 @@ qx.Class.define("qx.ui.mobile.core.Widget",
     }
   },
 
-
-
-
   /*
   *****************************************************************************
      DESTRUCTOR
   *****************************************************************************
   */
 
-  destruct : function()
-  {
-    if (!qx.core.ObjectRegistry.inShutDown)
-    {
+  destruct() {
+    if (!qx.core.ObjectRegistry.inShutDown) {
       // Cleanup event listeners
       // Needed as we rely on the containerElement in the qx.ui.mobile.core.EventHandler
       qx.event.Registration.removeAllListeners(this);
 
-      if (this.getId())
-      {
+      if (this.getId()) {
         qx.ui.mobile.core.Widget.unregisterWidget(this.getId());
       }
     }
 
-    this.__layoutParent = this.__containerElement = this.__contentElement = null;
-    if(this.__layoutManager) {
+    this.__layoutParent =
+      this.__containerElement =
+      this.__contentElement =
+        null;
+    if (this.__layoutManager) {
       this.__layoutManager.dispose();
     }
     this.__layoutManager = null;
   },
 
-
-
-
   /*
   *****************************************************************************
      DEFER
   *****************************************************************************
   */
 
-  defer : function(statics) {
+  defer(statics) {
     qx.bom.Lifecycle.onShutdown(statics.onShutdown, statics);
   }
 });