UI Components Add-On (#942)

* Base in-repo addon for ui components

* ui/search-field

* Ui/action-checkbox

* ui/clear-button ui/reload-button

* ui/disclosure-triangle

* ui/open-links-in-new-window

* ui/send-to-console

* ui/sidebar-toggle

* Toolbar CSS into ui add-on

* Simplify ui/sidebar-toggle

* ui/disclosure-triangle styles to addon

* Prefix toolbar components with "toolbar"

* Transparent pill background

* More sidebar-toggle styles to add-on

* Nav cleanup

* Remove unused content_menu css

* Send to Console CSS to addon

* Remove page-refresh partial

* Warning message cleanup

* ui/empty-message

- used in object inspector when no object is selected

* New external link icon

* Use ui/empty-message for more empty screens

* Move more styles to ui add-on

- drag handle
- split
- list

* ui/error-page cleanup

* Add alt attribute to error page image

* More ui/error-page cleanup

* Pill inherits cursor

app/helpers/console.js

@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function console(_) {
+  return console.log(_);
+}
+
+export default helper(console);

app/styles/app.scss

@@ -25,22 +25,9 @@
 @import "base";
 @import "colors";
 @import "component_tree";
-@import "context_menu";
-@import "drag_handle";
 @import "dropdown";
-@import "error_page";
-@import "external_link";
-@import "list";
 @import "mixin";
-@import "nav";
-@import "notice";
 @import "object_inspector";
-@import "pill";
 @import "route_tree";
-@import "send_to_console";
-@import "sidebar_toggle";
-@import "split";
-@import "toolbar";
-@import "warning";
 @import "whats-new";
 @import "ember-table";

app/styles/colors.scss

@@ -27,12 +27,16 @@
   --spec07: #cd61a7;
   --spec08: #7fb56d;
   --spec09: #328509;
+  --white: #ffffff;
   --inherit: inherit;
   --transparent: transparent;
   --focus: #3F81EE;
-  --focus-text: #ffffff;
+  --focus-text: var(--white);
   --component-text: #7c027c;
   --component-brackets-selected: rgba(255, 255, 255, 0.4);
+  --pill-bg: rgba(0, 0, 0, 0.1);
+  --pill-bg-active: rgba(255, 255, 255, 0.3);
+  --warning-text: #735c0f;
 }
 
 .theme--dark {
@@ -64,10 +68,14 @@
   --spec07: #cd61a7;
   --spec08: #7fb56d;
   --spec09: #328509;
+  --white: #ffffff;
   --inherit: inherit;
   --transparent: transparent;
   --focus: #2270EC;
-  --focus-text: #ffffff;
+  --focus-text: var(--white);
   --component-text: #FF8BC9;
   --component-brackets-selected: rgba(255, 255, 255, 0.4);
+  --pill-bg: rgba(255, 255, 255, 0.2);
+  --pill-bg-active: rgba(255, 255, 255, 0.3);
+  --warning-text: #8ca3f0;
 }

app/styles/component_tree.scss

@@ -70,27 +70,6 @@
   content: '}}';
 }
 
-.component-tree-item__expand {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0 2px;
-
-  &:focus {
-    outline: none;
-  }
-
-  svg {
-    transition-duration: 0.1s;
-    transition-property: transform;
-  }
-
-  &.collapsed svg {
-    transform: rotate(-90deg);
-  }
-}
-
 /**
  * Modifier
  */

app/styles/ember-table.scss

@@ -1,7 +1,6 @@
 $blue: #174fff;
 $green: #009900;
 $red: #ff2717;
-$white: #ffffff;
 
 .ember-table {
   background: var(--base00);

app/styles/object_inspector.scss

@@ -5,7 +5,13 @@
  at the far right of the screen
 */
 
-$white: #ffffff;
+.object-inspector-object-name {
+  flex: auto;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .object-trail {
   margin-bottom: 4px;
@@ -85,7 +91,7 @@ $white: #ffffff;
 
 .mixin__property-icon {
   border-radius: 3px;
-  color: $white;
+  color: var(--white);
   display: inline-block;
   font-family: var(--font-monospace);
   font-size: 13px;