Closed Bug 1534026 Opened 8 months ago Closed 8 months ago

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

Categories

(DevTools :: Console, defect, P3)

60 Branch
defect

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
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.

Component: Untriaged → Console
Product: Firefox → DevTools

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.

Status: UNCONFIRMED → NEW
Depends on: 1185808
Ever confirmed: true
Priority: -- → P3

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

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();

  1. Run Firefox, and try to paste something in the console input. This should display the warning message
  2. 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!

Sure Neha, it's yours :)

Assignee: nobody → ns19041997
Mentor: nchevobbe
Status: NEW → ASSIGNED
Attachment #9050894 - Attachment description: Bug 1534026 - Console: warning about pasting commands is cut off and lacks important part r=nchevobbe → Bug 1534026 - Add a wrapping prop to NotificationBox and use it from Console. r=nchevobbe.
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.
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Duplicate of this bug: 1564009
You need to log in before you can comment on or make changes to this bug.