New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 647785 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Last visit 29 days ago
Closed: Dec 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Backslashes in sass variables cause sourcemaps to point to incorrect lines

Reported by k...@deletethetrees.com, Sep 16 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce the problem:
1. I've attached the files required to recreate this problem. However since Firefox doesn't seem to load sourcemaps from local files it's easier to use this link: https://dl.dropboxusercontent.com/u/17827955/chrome-sourcemaps/test.html

2. Inspect the red element in Chrome / Firefox / Edge / etc.

3. Chrome will say that the red background is coming from line 2 but all other browsers correctly say line 12.

4. Ruby sass and libsass generate different source mappings but both suffer the same bug in Chrome.

What is the expected behavior?

What went wrong?
Chrome points to the incorrect line in the source sass.

Did this work before? No 

Chrome version: 52.0.2743.116  Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0

This was originally reported by someone else as a libsass bug: https://github.com/sass/libsass/issues/1783
 
test.html
159 bytes View Download
test.css
108 bytes View Download
test.css.map
156 bytes Download
test.scss
189 bytes Download
Components: -Platform>DevTools Platform>DevTools>HTML
Labels: -OS-Windows OS-All
Owner: lushnikov@chromium.org
Status: Assigned (was: Unconfirmed)
Labels: Hotlist-Polish
Status: Started (was: Assigned)
Started: https://codereview.chromium.org/2543323003/#
Project Member

Comment 3 by bugdroid1@chromium.org, Dec 6 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/403e1889da0385537fbe842cc0c436b33a94753a

commit 403e1889da0385537fbe842cc0c436b33a94753a
Author: lushnikov <lushnikov@chromium.org>
Date: Tue Dec 06 21:56:13 2016

DevTools: [SSP] make rule link to point to the style open bracket

Today, the rule link in Styles sidebar pane points to the first matching
selector. However, due to malformed sourcemaps, this causes confusion.

To avoid this, this patch points rule location to the opening curly brace
of the style. It is still possible to ctrl-click on each individual
selector to jump to its location.

BUG= 647785 
R=dgozman

Review-Url: https://codereview.chromium.org/2543323003
Cr-Commit-Position: refs/heads/master@{#436753}

[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector-enabled/reattach-after-editing-styles-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/edit-css-with-source-url-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/selector-line-deprecated-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/selector-line-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/selector-line-sourcemap-header-deprecated-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/selector-line-sourcemap-header-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/elements-panel-styles-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/add-new-rule-with-style-after-body-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/color-aware-property-value-edit-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/commit-selector-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/commit-selector-mark-matching-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/css-live-edit-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/cssom-media-insert-crash-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/disable-property-workingcopy-update-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/dynamic-style-tag-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-inspector-stylesheet-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-media-text-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/empty-background-url-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/add-import-rule-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/force-pseudo-state-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/inactive-properties-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/inherited-mixed-case-properties-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/inject-stylesheet-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/keyframes-rules-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/lazy-computed-style-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/media-emulation-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/media-queries-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/media-using-same-url-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/parse-comments-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/parse-utf8-bom-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/perform-undo-perform-of-mergable-action-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/pseudo-elements-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-2/region-style-crash-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/computed-properties-retain-expanded-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/selector-list-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/style-rule-from-imported-stylesheet-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-colon-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-tab-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-add-new-rule-to-stylesheet-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-computed-trace-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-disable-property-after-selector-edit-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-3/styles-variables-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/inline-style-sourcemap-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-do-not-detach-sourcemap-on-edits-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-edit-property-after-invalid-rule-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-iframe-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-overriden-properties-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-properties-overload-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-source-lines-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-source-lines-inline-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-source-lines-recovery-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-from-js-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links-1-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links-2-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links-3-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-update-links-4-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-with-spaces-in-sourceURL-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/svg-style-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-new-rule-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/undo-add-property-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles/cancel-upon-invalid-property-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles/undo-after-cancelled-editing-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles/undo-change-property-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/LayoutTests/inspector/elements/styles/undo-set-selector-text-expected.txt
[modify] https://crrev.com/403e1889da0385537fbe842cc0c436b33a94753a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

Status: Fixed (was: Started)

Sign in to add a comment