1399738 - Line break missing in Developer Console Object Properties Panel

Status: RESOLVED INVALID

(DevTools :: Object Inspector, defect, P3)

Description

[mtg.ken.lam]

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce:

Here is a sample script for you to test in JavaScript Scratchpad:

/* Start of script */

var multilineMessage = "Dear Firefox Developers,\nWhy is the line break removed in the Properties Panel?";

console.log("Line breaks in strings can be shown in pure text console.log():\n", multilineMessage);
console.log("With an object with multi-line string property, the line break is not displayed in the console output, though it is still understandable:");
console.log({longText: multilineMessage});
console.log("However, when you click the object and inspect and edit it in the Properties Panel, the line break is missing. This is not good because:\n" +
           "1. The line break is lost when we copy the text and when we edit it.\n" +
           "2. The display is not good as well. We are already inspect a single object, why would it hurt to show the line breaks?");
console.log("Suggestions:\n" + 
           "a) Use a multi-line editor for editing string properties of objects.\n" +
           "b) For display, do not show the line breaks by default, but allow expanding it by providing a button to click on.");

/* End of script */

Just run it and you will notice my question: why is the line break removed in the Properties Panel?

Line breaks in strings can be shown in pure text console.log()

But with an object with multi-line string property, the line break is not displayed in the console output, though it is still understandable.



Actual results:

However, when you click the object and inspect and edit it in the Properties Panel, the line break is missing. This is not good because:
1. The line break is lost when we copy the text and when we edit it.
2. The display is not good as well. We are already inspect a single object, why would it hurt to show the line breaks?


Expected results:

The line break should not be removed inside the Object Properties Panel.

Suggestions:
a) Use a multi-line editor for editing string properties of objects.
b) For display, do not show the line breaks by default, but allow expanding it by providing a button to click on.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

values can't be edited anymore.

Comment 2

[holdoffhunger]

Hi, all,

I'm not sure why this is invalid? I have checked Chrome, and newlines are preserved when inspecting, but they are simply stripped from Firefox. I don't see any benefit in stripping spacing.

For example, when I inspect and look at the results of a MySQL desc statement, this is what I actually see:

+----------------------+---------------+------+-----+---------------------+----------------+| Field                | Type          | Null | Key | Default             | Extra          |+----------------------+---------------+------+-----+---------------------+----------------+| id                   | int           | NO   | PRI | NULL                | auto_increment || Resolved             | tinyint(1)    | NO   | MUL | 0                   |                || ErrorMessage         | text          | NO   |     | NULL                |                || URL                  | varchar(1024) | NO   |     |                     |                || ServerVariable       | text          | NO   |     | NULL                |                || PostVariable         | text          | NO   |     | NULL                |                || GetVariable          | text          | NO   |     | NULL                |                || EnvironmentVariables | text          | NO   |     | NULL                |                || OriginalCreationDate | datetime      | NO   | MUL | 0000-00-00 00:00:00 |                || LastModificationDate | datetime      | NO   | MUL | 0000-00-00 00:00:00 |                |+----------------------+---------------+------+-----+---------------------+----------------+

However, this is what I WOULD like to see:

+----------------------+---------------+------+-----+---------------------+----------------+
| Field                | Type          | Null | Key | Default             | Extra          |
+----------------------+---------------+------+-----+---------------------+----------------+
| id                   | int           | NO   | PRI | NULL                | auto_increment |
| Resolved             | tinyint(1)    | NO   | MUL | 0                   |                |
| ErrorMessage         | text          | NO   |     | NULL                |                |
| URL                  | varchar(1024) | NO   |     |                     |                |
| ServerVariable       | text          | NO   |     | NULL                |                |
| PostVariable         | text          | NO   |     | NULL                |                |
| GetVariable          | text          | NO   |     | NULL                |                |
| EnvironmentVariables | text          | NO   |     | NULL                |                |
| OriginalCreationDate | datetime      | NO   | MUL | 0000-00-00 00:00:00 |                |
| LastModificationDate | datetime      | NO   | MUL | 0000-00-00 00:00:00 |                |
+----------------------+---------------+------+-----+---------------------+----------------+

It should be very clear that the second output is far more readable, and the first output is extremely tedious to extract information from.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

(In reply to holdoffhunger from comment #2)

Hi, all,

I'm not sure why this is invalid? I have checked Chrome, and newlines are preserved when inspecting, but they are simply stripped from Firefox. I don't see any benefit in stripping spacing.

This was closed because it was about line breaks not showing up in some console sidebar that were then removed.
Reading your comment, I'm not sure where you are seeing the issue, is it in the console output?

And if so, do you have a simple console.log example that would show the issue?
For what it's worth, console.log("hello\nyou") does result in 2 separate lines

It would help if you could provide detailed steps so we can reproduce what you are seeing

Comment 4

[holdoffhunger]

Hey,

Thanks for getting back to me. It's literally just right-click the page and click inspect. Here's a picture: https://i.imgur.com/e7TK8Gc.png

So, to reproduce:

1. Right click the page and click inspect.

Results:

You will NEVER see a linebreak within an HTML comment.

Look at what the OP said to reproduce it:

However, when you click the object and inspect and edit it

Just inspect it. =) You can edit comments while inspecting, if you edit one and add a linebreak, well, it immediately disappears after hitting enter.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

(In reply to holdoffhunger from comment #4)

Hey,

Thanks for getting back to me. It's literally just right-click the page and click inspect. Here's a picture: https://i.imgur.com/e7TK8Gc.png

So, to reproduce:

1. Right click the page and click inspect.

Results:

You will NEVER see a linebreak within an HTML comment.

Look at what the OP said to reproduce it:

However, when you click the object and inspect and edit it

Just inspect it. =) You can edit comments while inspecting, if you edit one and add a linebreak, well, it immediately disappears after hitting enter.

Okay, now I understand, this bug is about linebreak in HTML comments, in the Inspector.
This bug was about something in the Console panel, this is different.
I filed Bug 1786315 for it . Until we look into it, you can double click on the node and it will show up the text with the line breaks