Issue #2118663 by cdog, nod_: Remove the Drupal.checkWidthBreakpoint method from drupal.js; replace with window.matchMedia where appropriate

core/core.libraries.yml

@@ -317,6 +317,7 @@ drupal.vertical-tabs:
     - core/drupal
     - core/drupalSettings
     - core/drupal.form
+    - core/matchmedia
 
 html5shiv:
   # Block the page from being loaded until html5shiv is initialized.

core/misc/drupal.js

@@ -237,23 +237,6 @@ if (window.jQuery) {
     }
   };
 
-  /**
-   * Tests the document width for mobile configurations.
-   *
-   * @param {number} [width=640]
-   *   Value of the width to check for.
-   *
-   * @return {bool}
-   *   true if the document's `clientWidth` is bigger than `width`, returns
-   *   false otherwise.
-   *
-   * @deprecated Temporary solution for the mobile initiative.
-   */
-  Drupal.checkWidthBreakpoint = function (width) {
-    width = width || drupalSettings.widthBreakpoint || 640;
-    return (document.documentElement.clientWidth > width);
-  };
-
   /**
    * Encodes special characters in a plain-text string for display as HTML.
    *

core/misc/vertical-tabs.js

@@ -29,8 +29,10 @@
    */
   Drupal.behaviors.verticalTabs = {
     attach: function (context) {
+      var width = drupalSettings.widthBreakpoint || 640;
+      var mq = '(max-width: ' + width + 'px)';
 
-      if (!Drupal.checkWidthBreakpoint()) {
+      if (window.matchMedia(mq).matches) {
         return;
       }
 

core/modules/ckeditor/ckeditor.libraries.yml

@@ -11,6 +11,8 @@ drupal.ckeditor:
     - core/drupal.debounce
     - core/ckeditor
     - editor/drupal.editor
+    # Ensure to run after core/matchmedia.
+    - core/matchmedia
 
 drupal.ckeditor.plugins.drupalimagecaption:
   version: VERSION

core/modules/ckeditor/js/ckeditor.js

@@ -217,7 +217,7 @@
       var classes = dialogSettings.dialogClass ? dialogSettings.dialogClass.split(' ') : [];
       classes.push('ui-dialog--narrow');
       dialogSettings.dialogClass = classes.join(' ');
-      dialogSettings.autoResize = Drupal.checkWidthBreakpoint(600);
+      dialogSettings.autoResize = window.matchMedia('(min-width: 600px)').matches;
       dialogSettings.width = 'auto';
 
       // Add a "Loading…" message, hide it underneath the CKEditor toolbar,