1534026 - Console: warning about pasting commands is cut off and lacks important part

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[oliver.gerlich]

Attachment: Bildschirmfoto vom 2019-03-09 16-48-45.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

I opened the Inspector console window and tried to paste some text. A warning message appeared, warning me about scams, and that I should enter a specific text to indicate that I know what I'm doing.

Actual results:

The warning message in my German-language Firefox is too long to fit in one line on my 1680x1050 screen. As result, the last part of the message (containing the "magic text" that I should enter) is not visible; so I cannot enable pasting.

You can see this in the attached screenshot. The warning message ends with "Bitte geben Sie zum Erlauben Einfügens unten 'E..."; the 'E' is the first letter of the magic text.

Expected results:

The warning message text should be wrapped so that it appears in several lines if it is too long for the screen.
Alternatively it might also be sufficient if the warning message text can be scrolled, eg. by selecting the text and dragging the mouse to the right window border.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report Oliver!
So, if you hover the message, it should get you the fill content.
Also, if you double click on the message, it will select the fill content, and you can then copy and paste it somewhere to find out.

The overall style of those notifications was changed a few months back in Bug 1185808, but maybe we want something different in the console.

Comment 2

[oliver.gerlich]

Both hints (hovering, and double-clicking) work well, thanks Nicolas! I hadn't thought of these solutions.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

So first, to surface the bug do the following:

1. Do this change in the devtools/client/webconsole/components/App.js:

diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -143,9 +143,9 @@ class App extends Component {
     } = WebConsoleUtils;
 
     // Bail out if self-xss notification is suppressed.
-    if (webConsoleUI.isBrowserConsole || usageCount >= CONSOLE_ENTRY_THRESHOLD) {
-      return;
-    }
+    // if (webConsoleUI.isBrowserConsole || usageCount >= CONSOLE_ENTRY_THRESHOLD) {
+    //   return;
+    // }
 
     // Stop event propagation, so the clipboard content is *not* inserted.
     event.preventDefault();

2. Run Firefox, and try to paste something in the console input. This should display the warning message
3. Make the console smaller until the warning message is truncated

The warning message is displayed through the NoficiationBox component, and is called from devtools/client/webconsole/components/App.js#236-239.
So, what we want is to wrap the warning, but only in the console. Since we want to make this flexible, we need to add a prop to the NotificationBox component that will add a CSS class (className in React world) in the div defined devtools/client/shared/components/NotificationBox.js#245-248.

So, from the console, we would pass a wrapping: true prop.
In NotificationBox, when wrapping is true, we would add a wrapping className.
And in devtools/client/shared/components/NotificationBox.css , we would add a CSS rule to wrap the text when the div has the wrapping CSS class.

Comment 4

[Neha]

Hi,
I would like to work on this bug.
Could it be assigned to me?
Thanks!

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Sure Neha, it's yours :)

Comment 6

[Neha]

Attachment: Bug 1534026 - Add a wrapping prop to NotificationBox and use it from Console. r=nchevobbe.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f656ee3960b0
Add a wrapping prop to NotificationBox and use it from Console. r=nchevobbe.

Comment 8

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/f656ee3960b0