Issue #3070745 by AndyF, ravi.shankar, olli, tedbow, samuel.mortenson, droplet, alexpott: Off canvas filling up localStorage's quota, causing errors

core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.es6.js

@@ -94,6 +94,11 @@
           editorCssPath.indexOf(CKEDITOR.timestamp) !== -1 &&
           dialogCssPath.indexOf(CKEDITOR.timestamp) !== -1
         ) {
+          Object.keys(window.localStorage).forEach(key => {
+            if (key.indexOf('Drupal.off-canvas.css.') === 0) {
+              window.localStorage.removeItem(key);
+            }
+          });
           window.localStorage.setItem(
             `Drupal.off-canvas.css.${editorCssPath}${dialogCssPath}`,
             cssToInsert,

core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js

@@ -44,6 +44,11 @@
       insertCss(cssToInsert);
 
       if (CKEDITOR.timestamp && editorCssPath.indexOf(CKEDITOR.timestamp) !== -1 && dialogCssPath.indexOf(CKEDITOR.timestamp) !== -1) {
+        Object.keys(window.localStorage).forEach(function (key) {
+          if (key.indexOf('Drupal.off-canvas.css.') === 0) {
+            window.localStorage.removeItem(key);
+          }
+        });
         window.localStorage.setItem('Drupal.off-canvas.css.' + editorCssPath + dialogCssPath, cssToInsert);
       }
     });

core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php

@@ -211,6 +211,27 @@ class CKEditorIntegrationTest extends WebDriverTestBase {
     $assert_session->elementExists('css', '.cke_button__source');
     $ckeditor_source_button_bg_color = $this->getSession()->evaluateScript('window.getComputedStyle(document.getElementsByClassName(\'cke_button__source\')[0]).backgroundColor');
     $this->assertEqual($ckeditor_source_button_bg_color, 'rgba(0, 0, 0, 0)');
+
+    // Check that only one off-canvas style is cached in local storage and that
+    // it gets updated with the cache-busting query string.
+    $get_cache_keys = 'Object.keys(window.localStorage).filter(function (i) {return i.indexOf(\'Drupal.off-canvas.css.\') === 0})';
+    $old_keys = $this->getSession()->evaluateScript($get_cache_keys);
+    // Flush the caches to ensure the new timestamp is altered into the
+    // drupal.ckeditor library's javascript settings.
+    drupal_flush_all_caches();
+    // Normally flushing caches regenerates the cache busting query string, but
+    // as it's based on the request time, it won't change within this test so
+    // explicitly set it.
+    \Drupal::state()->set('system.css_js_query_string', '0');
+    $this->drupalGet('/ckeditor_test/off_canvas');
+    $page->clickLink('Add Node');
+    $assert_session->waitForElementVisible('css', '#drupal-off-canvas');
+    $assert_session->assertWaitOnAjaxRequest();
+    $new_keys = $this->getSession()->evaluateScript($get_cache_keys);
+
+    $this->assertCount(1, $old_keys, 'Only one off-canvas style was cached before clearing caches.');
+    $this->assertCount(1, $new_keys, 'Only one off-canvas style was cached after clearing caches.');
+    $this->assertNotEquals($old_keys, $new_keys, 'Clearing caches changed the off-canvas style cache key.');
   }
 
 }