Replace "candidate needles combo box" in test details with popup containing tags/needles
This ticket summarizes how the screenshot/needle diff should be improved. Basically, the current "candidate combo box" should be replaced with:
- popup with nested list list of tags/needles
- multiple links per row
- copyable items (requested by okurz)
- possibility for more "high level" information beside the tags
- see coolos comment for an example
- label showing the current selection, eg. "Full needle diff for ..."
- different diffs (purpose for wanting multiple links in a row)
- "normal diff": what we have now
- "full diff": needle is fully visible, not only the actual area (sometimes the full context is useful)
#4 Updated by mkittler about 2 years ago
I ported this to Bootstrap 4, too. It basically works now and looks like this:
However, I've noticed some usability issues. Things the combo box provided 'out-of-the-box' like switching quickly between the screenshots using the arrow keys still need to be implemented.
Also, the full diff isn't implemented yet, just the button.
What should happen when clicking on an item and not one of the buttons? I would say it should just switch the screenshot and keep the previous diff mode. The initial diff mode would be what we have right now.
#6 Updated by mkittler about 2 years ago
- Status changed from In Progress to Feedback
The automatic tests pass now. It can also be tested manually on e212, eg. under http://e212.suse.de/tests/11979#step/kontact/20 there's an example with multiple tags. The following should work now:
- So now there are 3 different views:
- just the screenshot (previously the 'None' entry)
- regular diff on matches (the only diff we had previously)
- full diff: needle with original areas on left side, screenshot with matches on right side
- Usability is pretty much as it was before (menu closes again on selection, keyboard shortcuts).
- okurz All text is selectable so you can copy tag and needle names.
Further ideas (still TODO) which go beyond the ticket description:
- Allow to distinguish excluded needles.
- Adjust details based on your feedback (like changing the button icons, change the wording used on tool tips, ...).
- Display even more information. The drop down is fully customizable now.
- Check whether documentation should be updated. Maybe we can also add tooltips or help popovers directly on the page.