Closed Bug 1327770 Opened 7 years ago Closed 7 years ago

Selecting text in code area (codemirror instances) doesn't scroll parent node(s) to keep selection visible

Categories

(DevTools :: Inspector, defect)

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

Tracking

(Not tracked)

Status:
RESOLVED WORKSFORME

People

(Reporter: arni2033, Unassigned)

References

Details

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open url [1], open devtools -> inspector
2. Select <span> in markup, press F2 to start editing its outerHTML
3. Scroll markup so codemirror instance opened in Step 4 is only partially visible (first 2-3 lines)
4. Start selecting text from the codemirror instance and move mouse to the bottom:
  4.1. Hover mouse over the 1st line in the codemirror instance, hold left mouse
  4.2. Move mouse ~5px below the markup without releasing left mouse button.

AR:  The text I'm selecting is not visible
ER:  Markup should scroll to the bottom to keep the text I'm selecting visible

Note:  ER is default behavior of scrollable <div>s and <textarea>s in Firefox

> [1] data:text/html,<body id="B"><script>var S1=S2="";for(i=0;i<99;i++){S1+="<div></div>";S2+="<div></div>\n"};B.innerHTML=S1+"<span>"+S2+"</span>"+S1;</script>
No longer blocks: 1277113
Component: Untriaged → Developer Tools: Animation Inspector
Component: Developer Tools: Animation Inspector → Developer Tools: Inspector
This actually works for me I think. As I select text and move my mouse down to select more text within codemirror, then the markup-view scrolls to the bottom and lets me see the text I'm selecting.

Marking as WORKSFORME. Feel free to re-open if I misunderstood the problem.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → WORKSFORME
>>>   My Info:   Win7_64, Nightly 53, 32bit, ID 20170104030214 (2017-01-04)
Reproducible.

In more details:
It happens in 2 places of devtools on reported version. STR_2 has the same root cause and is
reproducible to this day.

STR_2:
1. Open url [2]
2. Open inspector, click (ev) button near <body> to open event listeners tooltip
3. Scroll the tooltip to the center, open any event listener's code
4. Scroll the tooltip so that only first 2-3 lines of the code were visible
5. Hover mouse over the 1st visible line of code, hold left mouse button,
   move mouse 5-10px below the bottom border of the tooltip
   
AR:  Tooltip contents don't scroll
ER:  Tooltip contents should scroll so that selecting text is visible

Bug 1327250 is related, please add to "See also" list.

> [2] data:text/html,<body><script>for (i in document.body){if (/^on.*/ig.test(i)) document.body[i]=function(){%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A}; console.log(i); }</script>
Flags: needinfo?(pbrosset)
Sorry, still not able to reproduce using these STR.
Flags: needinfo?(pbrosset)
See Also: → 1327250
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.