Debug Panel UX improvements

See original GitHub issue

Describe the bug

This issue is for tracking todo items of Debug Panel according to feedbacks.

Bugs @alanlong9278

https://github.com/microsoft/BotFramework-Composer/issues/5916 Debug panel resize breaks the hide/show behaviour
https://github.com/microsoft/BotFramework-Composer/issues/5915 Debug panel resize interaction selects texts in the rest of the UI
[Diagnostics Table] ‘Location’ column will be truncated if the path is too long
The “problems” pane is floating incorrectly on the app settings page and maybe others
‘Settings’ with Debug Panel
Diagnostics List - ‘Bot’ column’s header is not queried from projectId - it’s always current project name

UX

Adding a chevron instead of X mark to expand, contract debug panel. (^ and V)
Single clicking on the Debug panel header should set the Debug Panel in an expanded state
The font needs to the same font size as the font used in LG editor, Show Code
with the ability to sort ascending/descending order by bot name
Font sizes of severity filter / tab header -> 12px
Hide the widget if errors count =0 and warnings = 0. Embed the widget in all pages that contain the Debug Panel.

State management @yeze322

Diagnostics tab shows all projects’ errors
The error indicator inside the debug panel tab header needs to be (10px * 10px).
Error indicator on panel tab header needs to vanish when new erros are read. Similar to ‘Unread message’ UX.

Version

Browser

Electron distribution
Chrome
Safari
Firefox
Edge

OS

macOS
Windows
Ubuntu

To Reproduce

Steps to reproduce the behavior:

Go to ‘…’
Click on ‘…’
Scroll down to ‘…’
See error

Expected behavior

Screenshots

Additional context

Issue Analytics

State:
Created 3 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

zhixzhancommented, Feb 25, 2021

@zhixzhan can u make sure as a part of the font changes u apply this font inside the Webchat Inspector panel. fix: debug panel UX improvements by alanlong9278 · Pull Request #5928 · microsoft/BotFramework-Composer (github.com)

font applied in #5926

0reactions

yeze322commented, Feb 25, 2021

@garypretty @srinaath yes, just as Srinaath described

Top Results From Across the Web

Spyder alternate layout exploration · Issue #60 - GitHub

I use Spyder for all Python coding, make extensive use of cells, debugger, plots pane, "previous command" via arrow up, Ctrl + P,...

Komodor's Dashboard Brings Improved Debugging to Helm

Komodor's dashboard brings improved debugging to Helm. Helm Dashboard allows developers to quickly understand the status of Helm releases, ...

Layout Inspector. Debugging UI issues can be tricky… - Medium

Debugging UI issues can be tricky. Android Studio 4.0 comes with an updated Layout Inspector that lets you debug your Android app UI...

Improve Your Debugging Skills with Chrome DevTools - Telerik

Check out this post to learn best practices and tips that will help you solve your web application development struggles more easily.

Google Tag Manager Preview Mode - The Guide (2022)

One of the most important yet commonly overlooked steps in the GTM process is debugging. It ensures that every possible user experience scenario ......