Misc UI problems

[charlesh88]

• Make Display Layout frame edit handles overlap content, not resize it.
• Fix search progress bar display so that progress bar doesn't lay under text.
• Dial Gauges should center in their container, not left flush.
• Add large icon for the aggregate telemetry type.
• Add large icon for the Telemetry Table type. Closes Grid icons are wrong #5303.
• Fix descriptions for Telemetry Table, LAD Table and LAD Table Set.
• Restore tree and Inspector pane's ability to collapse when dragged small enough.
• Fix grippy icons in elements pool.
• Fix value alignment in alphanumerics in Display Layouts.
• Fix Locator in dialog to expand to use available space.
• Fix styling of numeric inputs, especially in Firefox and on Linux.
• Display Layout layout objects are erroneously using the unknown object icon because their type is not being properly defined and they end up using UNKNOWN_TYPE from TypeRegistry.js.

Misaligned alphas in Display Layout

Numeric inputs in Firefox

[charlesh88]

WIP in branch misc-ui-5640-r208

[charlesh88]

Testing Notes

1. Edit a Display Layout, add a Gauge view with 'Dial' type to it.
2. Verify that when mousing over the object's frame that a handle animates down from the frame top and sits over the object view, not vertically shrinking it. See attached image "Gauge in Display Layout" (orange arrow) for reference.
3. Size the frame such that it is wider than tall, landscape proportions. Verify that the dial element centers in the frame. See attached image "Gauge in Display Layout" (purple arrows) for reference.
4. Add one or more telemetry end points as alphanumerics, ideally with different character counts of values. Size their layout frames such that both the label and value are fully in view. Set the font size for one alpha different from the other. Verify that values line up vertically at the halfway point across the frame. See "Better alphas in Display Layout" below.
5. Add drawing objects to the layout, a variety if possible. Verify that when selected, the Inspector shows an icon for the type of drawing object: box, circle, line, "A" and image icon, followed by the word "Layout Object". See "Layout drawing objects" below.
6. After selecting a drawing object, select the Gauge and verify that it shows the correct icon in the Inspector. Also click the empty area of the layout and verify that the Display Layout icon is displayed in the Inspector.
7. While you're doing this, verify that number inputs appear correctly in the toolbar, ideally in both Chrome and Firefox. See "Number inputs..." screenshots below.
8. Exit editing the layout.
9. Navigate to a folder that contains an aggregate telemetry data type. Verify that the aggregate item in the Folder's grid view displays an aggregate icon. See attached image "Aggregate Icon" (yellow arrow) for reference.
10. Click the Create button and rollover "Telemetry Table". Verify that menu item displays the new icon art for that object type, as shown in attached image "Telemetry Table in Create menu" below.
11. Access the edit Properties screen by creating a new object or editing an existing one. The fix in this case was to allow the locator to dynamically size itself to fit the available space; to test, change the browser window size to increase and decrease the size of the dialog and verify that the locator expands and contracts vertically to fill available space. Note that the locator has a minimum height - making the dialog very short may result in two scrollbars appearing, one in the locator and the other for the dialog contents. This is right and proper. Scroll in the locator, expand and collapse tree items. Verify that the Locator displays as expected, and all expected tree nodes can be gotten to and there are no visual issues. See "Dynamic Locator" below.
12. Verify that number inputs appear properly across the application, especially in Firefox. Note that Chrome only shows spinners on hover or focus in the input, while Firefox always shows them. This is native browser behavior.
    • Edit a layout, add/edit a drawing object to display the X/Y/W/H number input boxes.
    • Create or edit a Timer view, examine the number inputs in the Properties dialog for the datetime.
    • Put the Time Conductor into real-time mode and click the start or end to display the number inputs in the popup bubble.
13. Use search, and verify that the search progress bar appears vertically beneath the text "Searching..." as shown in "Search in progress" below.

Gauge in Display Layout

Better alphas in Display Layout

Aggregate Icon

Telemetry Table in Create menu

Dynamic Locator

Number inputs in Chrome

Number inputs in Firefox

Search in progress

Layout drawing objects

[shefalijoshi]

DAYUMMMMM!
Verified Fixed!