Closed Bug 1271841 Opened 8 years ago Closed 8 years ago

Element preview attribute colors differ from markup view

Categories

(DevTools :: Console, defect)

Product:
DevTools
Component:
Console
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(firefox49 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 49
Tracking Flags:
Tracking Status
firefox49 --- fixed

People

(Reporter: jryans, Assigned: bgrins)

References

(
URL
)

Details

(Whiteboard: [devtools-ux])

Attachments

(3 files)

Console Element (light)
13.10 KB, image/png
Details
Inspector Element (light)
12.19 KB, image/png
Details
MozReview Request: Bug 1271841 - Make DOM Node preview in console match syntax highlighting colors used in the markup view;r=jryans
58 bytes, text/x-review-board-request
jryans
: review+
Details 
It seems we use different colors to display an element preview in the console vs. the markup view in the inspector.  Is this expected?

It appears only the colors for attribute values, as well as the quotes that wrap them, are different.  It seems to apply to both themes.

Screenshots to follow.
I was testing in Nightly 2016-05-10.
This can be seen by loading data:text/html,<body foo="bar"></body> and then evaluating `document.body` in the console.  The "bar" string in the console uses the 'console-string' class but it should presumably be using 'theme-fg-color6' to match the markup view and syntax highlighting
URL: data:text/html,<body foo="bar"></body>
Ryan, please confirm the fix
Assignee: nobody → bgrinstead
Blocks: 1246313
Status: NEW → ASSIGNED
Comment on attachment 8751029 [details]
MozReview Request: Bug 1271841 - Make DOM Node preview in console match syntax highlighting colors used in the markup view;r=jryans

https://reviewboard.mozilla.org/r/51773/#review48597

::: devtools/client/webconsole/console-output.js:3129
(Diff revision 1)
>      } else {
>        fragment.appendChild(this.el("span.cm-attribute", nodeName));
>      }
>  
>      this._text("=", fragment);
> -    fragment.appendChild(this.el("span.console-string",
> +    fragment.appendChild(this.el("span.theme-fg-color6",

Great, this seems like the right color!

::: devtools/client/webconsole/console-output.js:3130
(Diff revision 1)
>        fragment.appendChild(this.el("span.cm-attribute", nodeName));
>      }
>  
>      this._text("=", fragment);
> -    fragment.appendChild(this.el("span.console-string",
> +    fragment.appendChild(this.el("span.theme-fg-color6",
>                                   '"' + escapeHTML(value) + '"'));

The markup view seems to leave the quotes the same color as characters like <, =, and >, but this current code alters the quote color to be the same as the attribute value.  Should we aim for everything to match exactly?

It looks like the < and > symbols in the console preview also don't match the markup view: they are currently the same color as the tag name in the console version.
Attachment #8751029 - Flags: review?(jryans)
Comment on attachment 8751029 [details]
MozReview Request: Bug 1271841 - Make DOM Node preview in console match syntax highlighting colors used in the markup view;r=jryans

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/51773/diff/1-2/
Attachment #8751029 - Flags: review?(jryans)
Comment on attachment 8751029 [details]
MozReview Request: Bug 1271841 - Make DOM Node preview in console match syntax highlighting colors used in the markup view;r=jryans

https://reviewboard.mozilla.org/r/51773/#review48607

Thanks, this version seems to match exactly!
Attachment #8751029 - Flags: review?(jryans) → review+
https://hg.mozilla.org/mozilla-central/rev/33843dca1c83
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
status-firefox49: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 49
I have reproduced it on Firefox nightly according to(2016-05-10)

It's fixed and verified on Latest Developer Edition--Build ID:( 20160630004007 ), User Agent: Mozilla/5.0 (Windows NT 10.0; rv:49.0) Gecko/20100101 Firefox/49.0
It seems oke. In updating build here appears same colors both of element preview attribute and markup view.


Tested OS-- Windows10 32bit
QA Whiteboard: [bugday-20160629]
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: