"Edit As HTML" box should not be taller than developer tools



2 years ago
4 months ago


(Reporter: iuclallu, Unassigned)


(Blocks: 2 bugs)

50 Branch
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)



(1 attachment)



2 years ago
Created attachment 8826161 [details]
can't fit "Edit As HTML" box within scrollable height of inspector's left pane

when you right-click on an element in inspector and select "Edit As HTML", a scrollable textarea appears inline in the left pane of inspector. while the textarea often naturally requires it's own vertical scrollbar, a problem is that the textarea's height does not always fit within the height of developer tools. the height of the textarea seems to depend upon what element is selected, so this is not always the case.

go to https://www.mozilla.org/
open inspector and select the body element and select "Edit As HTML"

with the height of developer tools set to default, the resulting textarea is taller than developer tools, resulting in the user having to work two scrollbars in order to navigate up and down in the textarea. notice I'm not saying the second scrollbar is a problem -- I'm saying the problem is that you have to scroll up and down using the outer scrollbar in order to be able to reach the scrolling buttons of the inner scroll bar. please see attached screen capture, and notice in particular that you can't see the down scroll button of the inner scrollbar.


2 years ago
Blocks: 1330625

Comment 1

2 years ago
alternatively, the textarea should stretch vertically as far as is necessary so that it doesn't have a scrollbar at all. this way the outer scrollbar can be used to scroll everything. that's actually probably the most sensible solution....
I completely agree with this. We should make the HTML editor fit the size of the inspector DOM tree panel (i.e. the markup-view). Maybe we should make it even overlap the whole panel, or make it modal so there's no confusion which scrollbar to use.

Firebug used to switch the whole DOM tree to edit mode, so it was very simple, either you were inspecting the DOM, or you were editing it.
This is great from a UX point of view, but it's not great for editing because you could only edit the whole HTML, not a sub part of it. So I think we need the best of both world: being able to edit just parts of the tree as HTML, and having a great editing experience.

I think someone working on this might fix both this bug and bug 1330625 at the same time.
Ever confirmed: true
Priority: -- → P2


8 months ago
Blocks: 1264624


4 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.