Vue toolbar (#2191)

* Add a toolbar provider for display layout.

* Move toolbar provider to the plugin

* basic toolbar generation

* componentize different toolbar control types

Break toolbar control types down into different parts and provide
a test toolbar generator in index.html that utilizes all the
controls.

* Get the 'Show frame' checkbox working in the toolbar

* - Remove extra listener.
- Display toolbar only when editing.

* Modify the Selection API to set s-selected and s-selected-parent attributes instead of adding to the css class names.

* Move the logic for allowing the toolbar in the edit mode to the provider.

* Use toggle-button component to toggle frame

* Delete old files

* Remove MCTToolbar

* Modify the toggle button component to return the computed value

* Remove reload=true

* Revert to the original setting

* use value from props

* Always update toolbars on edit status change

* restore fixed position bundle

* bring back reload when hmr unavailable

src/plugins/displayLayout/plugin.js

@@ -63,5 +63,40 @@ export default function () {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
+        openmct.toolbars.addProvider({
+            name: "Display Layout Toolbar",
+            key: "layout",
+            description: "A toolbar for objects inside a display layout.",
+            forSelection: function (selection) {
+                // Apply the layout toolbar if the selected object is inside a layout,
+                // and in edit mode.
+                return (selection &&
+                    selection[1] &&
+                    selection[1].context.item.type === 'layout' &&
+                    openmct.editor.isEditing());
+            },
+            toolbar: function (selection) {                
+                let id = openmct.objects.makeKeyString(selection[0].context.item.identifier);
+                return [
+                    {
+                        control: "toggle-button",
+                        domainObject: selection[1].context.item,
+                        property: "configuration.layout.panels[" + id + "].hasFrame",
+                        options: [
+                            {
+                                value: false,
+                                icon: 'icon-frame-hide',
+                                title: "Hide frame"
+                            },
+                            {
+                                value: true,
+                                icon: 'icon-frame-show',
+                                title: "Show frame"
+                            }
+                        ]
+                    }
+                ];
+            }
+        });
     }
-}
+}