Issue #3108402 by lauriii, bnjmnm, FezVrasta, Wim Leers, mradcliffe, gisle:...

Issue #3108402 by lauriii, bnjmnm, FezVrasta, Wim Leers, mradcliffe, gisle: Update to Popper.js to 2.0.0

core/.eslintignore

@@ -5,3 +5,5 @@ node_modules/**/*
 !*.es6.js
 modules/locale/tests/locale_test.es6.js
 !tests/Drupal/Nightwatch/**/*.js
+misc/polyfills/array.find.es6.js
+misc/polyfills/object.assign.es6.js

core/assets/vendor/es6-promise/es6-promise.auto.min.js

+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ES6Promise=e()}(this,function(){"use strict";function t(t){var e=typeof t;return null!==t&&("object"===e||"function"===e)}function e(t){return"function"==typeof t}function n(t){W=t}function r(t){z=t}function o(){return function(){return process.nextTick(a)}}function i(){return"undefined"!=typeof U?function(){U(a)}:c()}function s(){var t=0,e=new H(a),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function u(){var t=new MessageChannel;return t.port1.onmessage=a,function(){return t.port2.postMessage(0)}}function c(){var t=setTimeout;return function(){return t(a,1)}}function a(){for(var t=0;t<N;t+=2){var e=Q[t],n=Q[t+1];e(n),Q[t]=void 0,Q[t+1]=void 0}N=0}function f(){try{var t=Function("return this")().require("vertx");return U=t.runOnLoop||t.runOnContext,i()}catch(e){return c()}}function l(t,e){var n=this,r=new this.constructor(p);void 0===r[V]&&x(r);var o=n._state;if(o){var i=arguments[o-1];z(function(){return T(o,r,i,n._result)})}else j(n,r,t,e);return r}function h(t){var e=this;if(t&&"object"==typeof t&&t.constructor===e)return t;var n=new e(p);return w(n,t),n}function p(){}function v(){return new TypeError("You cannot resolve a promise with itself")}function d(){return new TypeError("A promises callback cannot return that same promise.")}function _(t,e,n,r){try{t.call(e,n,r)}catch(o){return o}}function y(t,e,n){z(function(t){var r=!1,o=_(n,e,function(n){r||(r=!0,e!==n?w(t,n):A(t,n))},function(e){r||(r=!0,S(t,e))},"Settle: "+(t._label||" unknown promise"));!r&&o&&(r=!0,S(t,o))},t)}function m(t,e){e._state===Z?A(t,e._result):e._state===$?S(t,e._result):j(e,void 0,function(e){return w(t,e)},function(e){return S(t,e)})}function b(t,n,r){n.constructor===t.constructor&&r===l&&n.constructor.resolve===h?m(t,n):void 0===r?A(t,n):e(r)?y(t,n,r):A(t,n)}function w(e,n){if(e===n)S(e,v());else if(t(n)){var r=void 0;try{r=n.then}catch(o){return void S(e,o)}b(e,n,r)}else A(e,n)}function g(t){t._onerror&&t._onerror(t._result),E(t)}function A(t,e){t._state===X&&(t._result=e,t._state=Z,0!==t._subscribers.length&&z(E,t))}function S(t,e){t._state===X&&(t._state=$,t._result=e,z(g,t))}function j(t,e,n,r){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=e,o[i+Z]=n,o[i+$]=r,0===i&&t._state&&z(E,t)}function E(t){var e=t._subscribers,n=t._state;if(0!==e.length){for(var r=void 0,o=void 0,i=t._result,s=0;s<e.length;s+=3)r=e[s],o=e[s+n],r?T(n,r,o,i):o(i);t._subscribers.length=0}}function T(t,n,r,o){var i=e(r),s=void 0,u=void 0,c=!0;if(i){try{s=r(o)}catch(a){c=!1,u=a}if(n===s)return void S(n,d())}else s=o;n._state!==X||(i&&c?w(n,s):c===!1?S(n,u):t===Z?A(n,s):t===$&&S(n,s))}function M(t,e){try{e(function(e){w(t,e)},function(e){S(t,e)})}catch(n){S(t,n)}}function P(){return tt++}function x(t){t[V]=tt++,t._state=void 0,t._result=void 0,t._subscribers=[]}function C(){return new Error("Array Methods must be provided an Array")}function O(t){return new et(this,t).promise}function k(t){var e=this;return new e(L(t)?function(n,r){for(var o=t.length,i=0;i<o;i++)e.resolve(t[i]).then(n,r)}:function(t,e){return e(new TypeError("You must pass an array to race."))})}function F(t){var e=this,n=new e(p);return S(n,t),n}function Y(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}function q(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}function D(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var n=t.Promise;if(n){var r=null;try{r=Object.prototype.toString.call(n.resolve())}catch(e){}if("[object Promise]"===r&&!n.cast)return}t.Promise=nt}var K=void 0;K=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)};var L=K,N=0,U=void 0,W=void 0,z=function(t,e){Q[N]=t,Q[N+1]=e,N+=2,2===N&&(W?W(a):R())},B="undefined"!=typeof window?window:void 0,G=B||{},H=G.MutationObserver||G.WebKitMutationObserver,I="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),J="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,Q=new Array(1e3),R=void 0;R=I?o():H?s():J?u():void 0===B&&"function"==typeof require?f():c();var V=Math.random().toString(36).substring(2),X=void 0,Z=1,$=2,tt=0,et=function(){function t(t,e){this._instanceConstructor=t,this.promise=new t(p),this.promise[V]||x(this.promise),L(e)?(this.length=e.length,this._remaining=e.length,this._result=new Array(this.length),0===this.length?A(this.promise,this._result):(this.length=this.length||0,this._enumerate(e),0===this._remaining&&A(this.promise,this._result))):S(this.promise,C())}return t.prototype._enumerate=function(t){for(var e=0;this._state===X&&e<t.length;e++)this._eachEntry(t[e],e)},t.prototype._eachEntry=function(t,e){var n=this._instanceConstructor,r=n.resolve;if(r===h){var o=void 0,i=void 0,s=!1;try{o=t.then}catch(u){s=!0,i=u}if(o===l&&t._state!==X)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(n===nt){var c=new n(p);s?S(c,i):b(c,t,o),this._willSettleAt(c,e)}else this._willSettleAt(new n(function(e){return e(t)}),e)}else this._willSettleAt(r(t),e)},t.prototype._settledAt=function(t,e,n){var r=this.promise;r._state===X&&(this._remaining--,t===$?S(r,n):this._result[e]=n),0===this._remaining&&A(r,this._result)},t.prototype._willSettleAt=function(t,e){var n=this;j(t,void 0,function(t){return n._settledAt(Z,e,t)},function(t){return n._settledAt($,e,t)})},t}(),nt=function(){function t(e){this[V]=P(),this._result=this._state=void 0,this._subscribers=[],p!==e&&("function"!=typeof e&&Y(),this instanceof t?M(this,e):q())}return t.prototype["catch"]=function(t){return this.then(null,t)},t.prototype["finally"]=function(t){var n=this,r=n.constructor;return e(t)?n.then(function(e){return r.resolve(t()).then(function(){return e})},function(e){return r.resolve(t()).then(function(){throw e})}):n.then(t,t)},t}();return nt.prototype.then=l,nt.all=O,nt.race=k,nt.resolve=h,nt.reject=F,nt._setScheduler=n,nt._setAsap=r,nt._asap=z,nt.polyfill=D,nt.Promise=nt,nt.polyfill(),nt});

core/core.libraries.yml

@@ -95,6 +95,11 @@ drupal.autocomplete:
     - core/drupal.ajax
     - core/jquery.ui.autocomplete
 
+drupal.array.find:
+  version: VERSION
+  js:
+    misc/polyfills/array.find.js: { weight: -20 }
+
 drupal.batch:
   version: VERSION
   js:
@@ -227,6 +232,11 @@ drupal.message:
     - core/drupal
     - core/drupal.announce
 
+drupal.object.assign:
+  version: VERSION
+  js:
+    misc/polyfills/object.assign.js: { weight: -20 }
+
 drupal.progress:
   version: VERSION
   js:
@@ -321,6 +331,15 @@ drupal.vertical-tabs:
     - core/drupalSettings
     - core/drupal.form
 
+es6-promise:
+  version: "4.2.8"
+  license:
+    name: MIT
+    url: https://github.com/stefanpenner/es6-promise/blob/v4.2.8/LICENSE
+    gpl-compatible: true
+  js:
+    assets/vendor/es6-promise/es6-promise.auto.min.js: { weight: -20, minified: true }
+
 jquery:
   remote: https://github.com/jquery/jquery
   version: "3.4.1"
@@ -602,13 +621,17 @@ picturefill:
     assets/vendor/picturefill/picturefill.min.js: { weight: -10, minified: true }
 
 popperjs:
-  version: "1.16.0"
+  version: "2.0.6"
   license:
     name: MIT
-    url: https://github.com/popperjs/popper.js/blob/v1.16.0/LICENSE.md
+    url: https://github.com/popperjs/popper-core/blob/v2.0.6/LICENSE.md
     gpl-compatible: true
   js:
     assets/vendor/popperjs/popper.min.js: { minified: true }
+  dependencies:
+    - core/drupal.array.find
+    - core/es6-promise
+    - core/drupal.object.assign
 
 sortable:
   remote: https://github.com/SortableJS/Sortable

core/misc/polyfills/array.find.es6.js

+/**
+ * @file
+ * Provides a polyfill for Array.find().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function (predicate) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError
+      // exception.
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be
+      // undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue,
+        //    k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true,
+  });
+}

core/misc/polyfills/array.find.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function value(predicate) {
+      if (this == null) {
+        throw TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+      var len = o.length >>> 0;
+
+      if (typeof predicate !== 'function') {
+        throw TypeError('predicate must be a function');
+      }
+
+      var thisArg = arguments[1];
+      var k = 0;
+
+      while (k < len) {
+        var kValue = o[k];
+
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+
+        k++;
+      }
+
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}
\ No newline at end of file

core/misc/polyfills/object.assign.es6.js

+/**
+ * @file
+ * Provides a polyfill for Object.assign().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has been copied from MDN Web Docs code samples. Code samples in the MDN
+ * Web Docs are licensed under CC0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (typeof Object.assign !== 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}

core/misc/polyfills/object.assign.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (typeof Object.assign !== 'function') {
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) {
+      'use strict';
+
+      if (target === null || target === undefined) {
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource !== null && nextSource !== undefined) {
+          for (var nextKey in nextSource) {
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
\ No newline at end of file

core/modules/image/tests/src/FunctionalJavascript/QuickEditImageTest.php

@@ -34,6 +34,15 @@ class QuickEditImageTest extends QuickEditJavascriptTestBase {
    */
   protected $contentAuthorUser;
 
+  /**
+   * CSS animations must be enabled for PopperJS positioning to work properly.
+   *
+   * @var bool
+   *
+   * @todo revisit in http://drupal.org/node/3082602
+   */
+  protected $disableCssAnimations = FALSE;
+
   /**
    * {@inheritdoc}
    */

core/modules/quickedit/js/views/EntityToolbarView.es6.js

@@ -296,40 +296,13 @@
          * @param {object} data
          *   Data object containing popper and target data.
          */
-        function refinePopper(data) {
+        function refinePopper({ state }) {
           // Determine if the pointer should be on the top or bottom.
-          const isBelow = data.offsets.popper.top > data.offsets.reference.top;
+          const isBelow = state.placement.split('-')[0] === 'bottom';
           const classListMethod = isBelow ? 'add' : 'remove';
-          data.instance.popper.classList[classListMethod](
+          state.elements.popper.classList[classListMethod](
             'quickedit-toolbar-pointer-top',
           );
-          // Don't position the toolbar past the first or last editable field if
-          // the entity is the target.
-          if (that.$entity[0] === data.instance.reference) {
-            // Get the first or last field according to whether the toolbar is
-            // above or below the entity.
-            const $field = that.$entity
-              .find('.quickedit-editable')
-              .eq(isBelow ? -1 : 0);
-            if ($field.length > 0) {
-              data.offsets.popper.top = isBelow
-                ? $field.offset().top + $field.outerHeight(true)
-                : $field.offset().top -
-                  $(data.instance.reference).outerHeight(true);
-            }
-          }
-          // Don't let the toolbar go outside the fence.
-          const fenceTop = that.$fence.offset().top;
-          const fenceHeight = that.$fence.height();
-          const toolbarHeight = $(data.instance.popper).outerHeight(true);
-          if (data.offsets.popper.top < fenceTop) {
-            data.offsets.popper.top = fenceTop;
-          } else if (
-            data.offsets.popper.top + toolbarHeight >
-            fenceTop + fenceHeight
-          ) {
-            data.offsets.popper.top = fenceTop + fenceHeight - toolbarHeight;
-          }
         }
         /**
          * Calls the Popper() method on the $el of this view.
@@ -341,29 +314,48 @@
           const popperedge = edge === 'left' ? 'start' : 'end';
           if (referenceElement !== undefined) {
             if (!popperElement.classList.contains('js-popper-processed')) {
-              that.popper = new Popper(referenceElement, popperElement, {
-                placement: `top-${popperedge}`,
-                modifiers: {
-                  flip: {
-                    behavior: ['top', 'bottom'],
-                  },
-                  computeStyle: {
-                    gpuAcceleration: false,
-                  },
-                  preventOverflow: {
-                    boundariesElement,
-                  },
+              that.popper = Popper.createPopper(
+                referenceElement,
+                popperElement,
+                {
+                  placement: `top-${popperedge}`,
+                  modifiers: [
+                    {
+                      name: 'flip',
+                      options: {
+                        boundary: boundariesElement,
+                      },
+                    },
+                    {
+                      name: 'preventOverflow',
+                      options: {
+                        boundary: boundariesElement,
+                        tether: false,
+                        altAxis: true,
+                        padding: { top: 5, bottom: 5 },
+                      },
+                    },
+                    {
+                      name: 'computeStyles',
+                      options: {
+                        adaptive: false,
+                      },
+                    },
+                    {
+                      name: 'refinePopper',
+                      phase: 'write',
+                      enabled: true,
+                      fn: refinePopper,
+                    },
+                  ],
                 },
-                onCreate: refinePopper,
-                onUpdate: refinePopper,
-              });
+              );
               popperElement.classList.add('js-popper-processed');
             } else {
-              that.popper.options.placement = `top-${popperedge}`;
-              that.popper.reference = referenceElement[0]
+              that.popper.state.elements.reference = referenceElement[0]
                 ? referenceElement[0]
                 : referenceElement;
-              that.popper.update();
+              that.popper.forceUpdate();
             }
           }
 

core/modules/quickedit/js/views/EntityToolbarView.js

@@ -151,28 +151,11 @@
         check++;
       } while (!of);
 
-      function refinePopper(data) {
-        var isBelow = data.offsets.popper.top > data.offsets.reference.top;
+      function refinePopper(_ref) {
+        var state = _ref.state;
+        var isBelow = state.placement.split('-')[0] === 'bottom';
         var classListMethod = isBelow ? 'add' : 'remove';
-        data.instance.popper.classList[classListMethod]('quickedit-toolbar-pointer-top');
-
-        if (that.$entity[0] === data.instance.reference) {
-          var $field = that.$entity.find('.quickedit-editable').eq(isBelow ? -1 : 0);
-
-          if ($field.length > 0) {
-            data.offsets.popper.top = isBelow ? $field.offset().top + $field.outerHeight(true) : $field.offset().top - $(data.instance.reference).outerHeight(true);
-          }
-        }
-
-        var fenceTop = that.$fence.offset().top;
-        var fenceHeight = that.$fence.height();
-        var toolbarHeight = $(data.instance.popper).outerHeight(true);
-
-        if (data.offsets.popper.top < fenceTop) {
-          data.offsets.popper.top = fenceTop;
-        } else if (data.offsets.popper.top + toolbarHeight > fenceTop + fenceHeight) {
-          data.offsets.popper.top = fenceTop + fenceHeight - toolbarHeight;
-        }
+        state.elements.popper.classList[classListMethod]('quickedit-toolbar-pointer-top');
       }
 
       function positionToolbar() {
@@ -183,27 +166,40 @@
 
         if (referenceElement !== undefined) {
           if (!popperElement.classList.contains('js-popper-processed')) {
-            that.popper = new Popper(referenceElement, popperElement, {
+            that.popper = Popper.createPopper(referenceElement, popperElement, {
               placement: "top-".concat(popperedge),
-              modifiers: {
-                flip: {
-                  behavior: ['top', 'bottom']
-                },
-                computeStyle: {
-                  gpuAcceleration: false
-                },
-                preventOverflow: {
-                  boundariesElement: boundariesElement
+              modifiers: [{
+                name: 'flip',
+                options: {
+                  boundary: boundariesElement
+                }
+              }, {
+                name: 'preventOverflow',
+                options: {
+                  boundary: boundariesElement,
+                  tether: false,
+                  altAxis: true,
+                  padding: {
+                    top: 5,
+                    bottom: 5
+                  }
+                }
+              }, {
+                name: 'computeStyles',
+                options: {
+                  adaptive: false
                 }
-              },
-              onCreate: refinePopper,
-              onUpdate: refinePopper
+              }, {
+                name: 'refinePopper',
+                phase: 'write',
+                enabled: true,
+                fn: refinePopper
+              }]
             });
             popperElement.classList.add('js-popper-processed');
           } else {
-            that.popper.options.placement = "top-".concat(popperedge);
-            that.popper.reference = referenceElement[0] ? referenceElement[0] : referenceElement;
-            that.popper.update();
+            that.popper.state.elements.reference = referenceElement[0] ? referenceElement[0] : referenceElement;
+            that.popper.forceUpdate();
           }
         }
 

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditFileTest.php

@@ -28,6 +28,15 @@ class QuickEditFileTest extends QuickEditJavascriptTestBase {
    */
   protected $defaultTheme = 'stark';
 
+  /**
+   * CSS animations must be enabled for PopperJS positioning to work properly.
+   *
+   * @var bool
+   *
+   * @todo revisit in http://drupal.org/node/3082602
+   */
+  protected $disableCssAnimations = FALSE;
+
   /**
    * {@inheritdoc}
    */

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php

@@ -43,6 +43,15 @@ class QuickEditIntegrationTest extends QuickEditJavascriptTestBase {
    */
   protected $contentAuthorUser;
 
+  /**
+   * CSS animations must be enabled for PopperJS positioning to work properly.
+   *
+   * @var bool
+   *
+   * @todo revisit in http://drupal.org/node/3082602
+   */
+  protected $disableCssAnimations = FALSE;
+
   /**
    * {@inheritdoc}
    */

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditLoadingTest.php

@@ -67,6 +67,15 @@ class QuickEditLoadingTest extends WebDriverTestBase {
    */
   protected $editorUser;
 
+  /**
+   * CSS animations must be enabled for PopperJS positioning to work properly.
+   *
+   * @var bool
+   *
+   * @todo revisit in http://drupal.org/node/3082602
+   */
+  protected $disableCssAnimations = FALSE;
+
   /**
    * {@inheritdoc}
    */