Console: warning about pasting commands is cut off and lacks important part
Categories
(DevTools :: Console, defect, P3)
Tracking
(firefox68 fixed)
Tracking | Status | |
---|---|---|
firefox68 | --- | fixed |
People
(Reporter: oliver.gerlich, Assigned: ns19041997, Mentored)
References
Details
Attachments
(2 files)
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.
Updated•5 years ago
|
Comment 1•5 years ago
|
||
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.
Reporter | ||
Comment 2•5 years ago
|
||
Both hints (hovering, and double-clicking) work well, thanks Nicolas! I hadn't thought of these solutions.
Comment 3•5 years ago
|
||
So first, to surface the bug do the following:
- 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();
- Run Firefox, and try to paste something in the console input. This should display the warning message
- 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.
Hi,
I would like to work on this bug.
Could it be assigned to me?
Thanks!
Comment 5•5 years ago
|
||
Sure Neha, it's yours :)
Updated•5 years ago
|
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f656ee3960b0 Add a wrapping prop to NotificationBox and use it from Console. r=nchevobbe.
Comment 8•5 years ago
|
||
bugherder |
Description
•