(Creating this because I want to fix this particular issue in a separate bug) When logging to the dev console, there is currently no UI guidance of whether something is a warning or an error. All CSP violations are Errors and CSP-meta things (e.g., somebody sending the old header) are Warnings. It would be helpful to do what happens with JavaScript Errors and Warnings: There is a tiny grey triangle with an exclamation mark for warnings and an x mark for errors (''console.warn`` and ''console.error`` provide examples)

freddyb: yes I agree! I started working on this when I wrote the original patch, but after some discussion we agreed it was not necessary and was holding up landing the key functionality. All that had to be done is edit webconsole.png to add the icons and webconsole.css to add CSS rules to choose the correct offsets within the PNG sprite (in browser/themes/*/devtools). I will take a crack at this right now.

This patch adds icons to differentiate between errors and warnings in the Web Console's security pane. You can easily see them in action by running browser/devtools/webconsole/test/browser_webconsole_bug_821877_csp_errors.js (you will see warnings for the deprecated CSP errors, with the exclamation-point-in-a-triangle warning icon) or content/base/test/test_mixed_content_blocker.html (blocked mixed content resources are errors, and will have red x icons).

Tested and looks good!

Comment on attachment 749053 [details] [diff] [review] Patch 1 Review of attachment 749053 [details] [diff] [review]: ----------------------------------------------------------------- Looks good. Thanks!

inbound: https://hg.mozilla.org/integration/mozilla-inbound/rev/49d1bd0e5bd8