1173352 - [traceback] ISE during code_sample view: cssselect.parser:SelectorSyntaxError

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Code Cleanup, defect)

Description

[Luke Crouch [:groovecoder]]

https://developer.mozilla.org/fr/docs/Web/CSS/Tools/Outil_Selecteur_Couleurs_CSS$samples/images/canvas-controls.png

called by

https://mdn.mozillademos.org/fr/docs/Web/CSS/Tools/Outil_Selecteur_Couleurs_CSS$samples/ColorPIcker_Tool

Traceback (most recent call last):
File "/data/www/developer.mozilla.org/venv/lib/python2.7/site-packages/newrelic-2.50.0.39/newrelic/api/web_transaction.py", line 711, in __iter__
File "/data/www/developer.mozilla.org/venv/lib/python2.7/site-packages/newrelic-2.50.0.39/newrelic/api/web_transaction.py", line 1087, in __call__
File "/data/www/developer.mozilla.org/kuma/vendor/src/django/django/core/handlers/wsgi.py", line 187, in __call__
File "/data/www/developer.mozilla.org/kuma/vendor/src/django/django/core/handlers/base.py", line 111, in get_response
File "/data/www/developer.mozilla.org/venv/lib/python2.7/site-packages/newrelic-2.50.0.39/newrelic/hooks/framework_django.py", line 499, in wrapper
File "/data/www/developer.mozilla.org/kuma/vendor/src/django/django/views/decorators/http.py", line 41, in inner
File "/data/www/developer.mozilla.org/kuma/kuma/wiki/decorators.py", line 32, in _added_header
File "/data/www/developer.mozilla.org/kuma/vendor/src/django/django/views/decorators/clickjacking.py", line 61, in wrapped_view
File "/data/www/developer.mozilla.org/kuma/kuma/wiki/decorators.py", line 107, in process
File "/data/www/developer.mozilla.org/kuma/kuma/wiki/views.py", line 1913, in code_sample
File "/data/www/developer.mozilla.org/kuma/kuma/wiki/models.py", line 694, in extract_code_sample
File "/data/www/developer.mozilla.org/venv/lib/python2.7/site-packages/newrelic-2.50.0.39/newrelic/api/function_trace.py", line 110, in literal_wrapper
File "/data/www/developer.mozilla.org/kuma/kuma/wiki/content.py", line 175, in extract_code_sample
File "/data/www/developer.mozilla.org/kuma/vendor/src/pyquery/pyquery/pyquery.py", line 641, in find
File "/data/www/developer.mozilla.org/kuma/vendor/src/pyquery/pyquery/pyquery.py", line 249, in _css_to_xpath
File "/data/www/developer.mozilla.org/kuma/vendor/src/cssselect/cssselect/xpath.py", line 192, in css_to_xpath
File "/data/www/developer.mozilla.org/kuma/vendor/src/cssselect/cssselect/parser.py", line 355, in parse
File "/data/www/developer.mozilla.org/kuma/vendor/src/cssselect/cssselect/parser.py", line 370, in parse_selector_group
File "/data/www/developer.mozilla.org/kuma/vendor/src/cssselect/cssselect/parser.py", line 378, in parse_selector
File "/data/www/developer.mozilla.org/kuma/vendor/src/cssselect/cssselect/parser.py", line 477, in parse_simple_selector


https://rpm.newrelic.com/accounts/263620/applications/3172075/traced_errors/3066ef-f13516d6-0f70-11e5-a48a-f8bc124250a8

Comment 1

[Luke Crouch [:groovecoder]]

:teoli - I need some writing context ...

This seems to be caused by samples' code that uses partial urls in their CSS. (e.g, the ColorPicker [1] has url("images/canvas-controls.png") while another part of it uses url('https://mdn.mozillademos.org/files/6067/canvas-controls.png'))

Since partial urls are interpreted relative to the source of the stylesheet [2] and the stylesheet is inline at $samples, the url becomes en-US/docs/Web/CSS/Tools/ColorPicker_Tool$samples/images/canvas-controls.png and causes this error trying to parse "images/canvas-controls.png" as a CSS selector.

So, is the real fix here to clean up the code samples that use partial/relative urls in their CSS?

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool$edit
[2] http://www.w3.org/TR/REC-CSS1/#url

Comment 2

[Jean-Yves Perrier [:teoli]]

ISE are always the sign of a problem on the server side: without a clear error message an editor can't fix the underlying problem. 

Of course, we wants to fix that URL, too.

Comment 3

[Luke Crouch [:groovecoder]]

So basically, the way live samples work, https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/ColorPicker_Tool$samples/images/canvas-controls.png won't get the attachment. We either need to update samples that try this, or change the code to serve attachments via $samples urls too.

:teoli - which way do you think it should go?

Comment 4

[Eric Shepherd [:sheppy]]

I feel that we should be able to use the shorter, relative-style, URL in the code samples, because that's how real code would work.

In addition, requiring our contributors to get the long-form URLs right is just cruel. :)

Ideally, Kuma would take a partial URL and just trim it down to the filename component, and then find an attachment to the current page with that name. Simulating the folder hierarchy is unrealistic, but we could at least let the code "look good" by allowing short URLs and ignoring the folder parts. And this would allow the code in question to work as-is.

Regardless, it has to be possible for live samples to use attachments as resources like images.

Comment 5

[Jean-Yves Perrier [:teoli]]

I do agree with Sheppy, though I consider it an enhancement.

Comment 6

[Jannis Leidel [:jezdez]]

I've opened PR https://github.com/mozilla/kuma/pull/3266

Comment 7

[Jannis Leidel [:jezdez]]

FWIW, this PR will allow you to use relative paths such as "url(files/12345/filename.png)". It must have the prefix "files/" and an attachment ID similarly to the usual use of attachments.

Comment 8

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/db57d31dd2d7484ce77c80ba2398469c895b370b
Bug 1173352 - Remove old references to developer-dev.allizom.org.

https://github.com/mozilla/kuma/commit/ca842cf6fa08883c5f02ee2af02a7cae593c5fc4
Bug 1173352 - Some import modernization in the wiki test modules.

https://github.com/mozilla/kuma/commit/87e9e311c765a524df353353d4ef7038f0de11df
Bug 1173352 - Use Django's official way to build a URI in the code sample view.

https://github.com/mozilla/kuma/commit/000644cc70ecf9244471b1a7a77e3fba86067fd8
Fix bug 1173352 - Add a new view to serve as a redirect point for files included relatively in code samples.

It'll redirect to the real file serving view.

https://github.com/mozilla/kuma/commit/93356b53368211f6600bd8d9e9050acf8ad0d226
Merge pull request #3266 from mozilla/bug1173352

Add view that redirects to the file serving view for easier code samples.