Problem/Motivation

If your project uses Canvas, and you enable and configure critical_css, then you can no longer edit cavas pages.
In the ui you'll see a permanent loader, and in console you can see errors like these (it's Dutch, my apologies):
De bron van ‘https://starterkit.ddev.site/canvas/editor/canvas_page/undefined’ is geblokkeerd vanwege een niet-overeenkomend MIME-type (‘text/html’) (X-Content-Type-Options: nosniff).
meaning something like: the source is blocked because of unmatched MIME-type

Fout bij brontoewijzing: Error: URL constructor:  is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:74:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13


Bron-URL: about:srcdoc

meaning something like: error in source assignment

Steps to reproduce

  • Have a project that uses canvas where you successfully create and edit a canvas page
  • Install and enable critical_css
  • Try to edit your canvas page again: it wont work

Proposed resolution

critical css assets should not be loaded on canvas routes. A part of the problem is that the canvas edit page itself returns FALSE for AdminContext::isAdminRoute. This causes it to return TRUE for the isEnabled() function on critical_css/src/Asset/CriticalCssProvider.php:

  public function isEnabled() {
    $route = $this->currentRouteMatch->getRouteObject();
    $canViewAdmin = $this->currentUser->hasPermission('view the administration theme');
    $isAjaxRequest = $this->request->isXmlHttpRequest();
    if (($route && $this->adminContext->isAdminRoute($route) && $canViewAdmin) || $isAjaxRequest) {
      return FALSE;
    }
    return (bool) $this->config->get('enabled');
  }

I created issue #3562587 for that in the canvas module.

But the canvas editor page itself also makes API calls, like the route canvas.api.layout.get. Critical_css gets enabled on those api routes as well, hence causing the canvas edit page to not work.

A global/general fix would be to expand the settings form on /admin/config/development/performance/critical-css and add a new 'Exclude pages from Critical CSS processing' option where you can enter paths with wildcards so one could disable critical-css on all /canvas/* paths for example. Just like how you can disable blocks on certain pages on /admin/structure/block when you edit a block.

I have created an MR that does exactly this and it works on my project. I think all is needed is to add an extra test for this.

CommentFileSizeAuthor
#4 canvas-page-exclude.png30.7 KBflyke
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

flyke created an issue. See original summary.

flyke’s picture

Issue summary: View changes

flyke’s picture

Title: Conflict with Canvas page editor » Add option to exclude pages based on paths
Issue summary: View changes
Status: Active » Needs review
Related issues: +#3562587: Shouldn't AdminContext::isAdminRoute() return true for the Canvas UI?
StatusFileSize
new30.7 KB