Improve visibilty of the drag pane when viewed vertically

[rmsy]

This PR fixes #2584, by making forceVerticalLayout also apply to the "Design" and "Test" tabs. Here's an overview of the changes that were made:

• Rename the settings options (for consistency) as described below. (I realize the requirement listed in Design and Test tabs should respect vertical layout preferences #2584 was to change the text to read "Force vertical layout", but "force" feels a little weird to me, as both of the settings below are supported features, not something that needs to be "forced". If that is still the desired verbiage, let me know and I'll change the PR appropriately).
  • "Force bulk header editor" -> "Use bulk header editor" -- This has been moved to Change bulk header editor setting verbiage #2717, see comments below
  • "Vertical request/response layout" -> "Use vertical layout"
• Update CSS to apply appropriate layout for design/test in vertical mode (this was the primary issue)

One additional note: there is some custom logic in app.js to support the draggable resize bar in the Debug tab, both in the horizontal and the vertical layouts. The Design/Test tabs do not have this resize bar implemented in the horizontal layout, so I didn't bring it over for the vertical layout, either. (I couldn't think of a simple and clean way to implement it, and I didn't want to clutter app.js any further). Maybe implementing the resize bar for Design/Test could be a future improvement.

Screenshots:

Closes INS-923

[develohpanda]

One additional note: there is some custom logic in app.js to support the draggable resize bar in the Debug tab, both in the horizontal and the vertical layouts. The Design/Test tabs do not have this resize bar implemented in the horizontal layout, so I didn't bring it over for the vertical layout, either. (I couldn't think of a simple and clean way to implement it, and I didn't want to clutter app.js any further). Maybe implementing the resize bar for Design/Test could be a future improvement.

Nice observation, #2583 is this very issue, and someone is already working through it 👏

This PR looks good to me; I agree with the verbiage changes. They are subtle and convey the same message.

[nijikokun]

Rename the settings options (for consistency) as described below. (I realize the requirement listed in #2584 was to change the text to read "Force vertical layout", but "force" feels a little weird to me, as both of the settings below are supported features, not something that needs to be "forced". If that is still the desired verbiage, let me know and I'll change the PR appropriately).
"Force bulk header editor" -> "Use bulk header editor"
"Vertical request/response layout" -> "Use vertical layout"

Let's change the "bulk header editor" text in a separate PR as it is un-related to this feature, it's a side-effect of the discussion occurred here and should reference this PR as such.

I'm okay with Use vertical layout, this does make me think we should add information tooltips what this setting is going to change or implies for the user as without immediate visual feedback it could be un-clear compared to previous text.

[rmsy]

Let's change the "bulk header editor" text in a separate PR as it is un-related to this feature, it's a side-effect of the discussion occurred here and should reference this PR as such.

Thank you for the feedback, @nijikokun, that makes sense -- I will move the bulk header editor change to another PR.

this does make me think we should add information tooltips what this setting is going to change or implies for the user as without immediate visual feedback it could be un-clear compared to previous text.

I am struggling to come up with a descriptive label for the help text. This is the best I could muster, but perhaps someone else here will have a better suggestion:

"Stack application panels vertically instead of horizontally"

I've updated this PR pending other suggestions.

[nijikokun]

I am struggling to come up with a descriptive label for the help text. This is the best I could muster, but perhaps someone else here will have a better suggestion:

It's definitely a good start! My only suggestion is providing an example after panels, taking inspiration from the previous we could do something like:

Stack application panels (e.g. request / response) vertically instead of horizontally.

Thank you for the feedback, @nijikokun, that makes sense -- I will move the bulk header editor change to another PR.

🤗 Thank you for the great PR 🎉

[develohpanda]

FYI @rmsy I think there might actually be some conflicts with #2712, as that PR improves the overall layout logic of the app

[develohpanda]

FYI @rmsy I think there might actually be some conflicts with #2712, as that PR improves the overall layout logic of the app

Following up on this - it looks like with the changes introduced in #2712, forcing vertical layout seems to be fixed as a side-effect. 🤯 I really appreciate the time that you put into this fix, but with the refactoring and removal of duplication in #2712, my preference would be to go ahead with the overall fix in that PR.

I did, however, notice some border styling that you introduced in this PR, which might fix another related bug I found during recent QA - #2787. That, coupled with the re-naming changes you have suggested in preferences are still valid.

[rmsy]

Ok, thank you @develohpanda! I will rebase this PR on top of #2712 later today and reduce the scope to include only the border fix and renames (including wording adjustment as suggested by @nijikokun). I appreciate all of the feedback 😊

[develohpanda]

Hi @rmsy, apologies for the big delays but #2712 has now been merged to develop so this should be unblocked 🙂

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
0 out of 2 committers have signed the CLA.

❌ rmsy
❌ develohpanda
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[develohpanda]

I updated the scope of this PR because there was some duplication with another one and half of the feature already exists in develop. 😄

My apologies for the long delay, but thank you very much for the PR and improvement. We really appreciate it 😊

QA

Before	After

[rmsy]

@develohpanda Sorry I never got around to cleaning up my branch, thanks for doing that and merging, and thanks for maintaining such a great developer tool ❤️

[develohpanda]

No worries at all 😊