UI Tweaks April 2018

app/controllers/container-type.js

@@ -18,6 +18,10 @@ export default Controller.extend({
   }).property('[email protected]', 'search'),
 
   actions: {
+    clearSearchVal() {
+      this.set('searchVal', '');
+    },
+
     /**
      * Inspect an instance in the object inspector.
      * Called whenever an item in the list is clicked.

app/controllers/deprecations.js

@@ -18,6 +18,10 @@ export default Controller.extend({
     return searchMatch(get(item, 'message'), this.get('search'));
   }).property('[email protected]', 'search'),
   actions: {
+    clearSearchVal() {
+      this.set('searchVal', '');
+    },
+
     openResource(item) {
       this.get('adapter').openResource(item.fullSource, item.line);
     },

app/controllers/promise-tree.js

@@ -85,6 +85,10 @@ export default Controller.extend({
   },
 
   actions: {
+    clearSearch() {
+      this.set('search', '');
+    },
+
     setFilter(filter) {
       this.set('filter', filter);
       next(() => {

app/controllers/records.js

@@ -111,6 +111,10 @@ export default Controller.extend({
      */
     inspectModel(model) {
       this.get('port').send('data:inspectModel', { objectId: get(model, 'objectId') });
+    },
+
+    clearSearch() {
+      this.set('search', '');
     }
   }
 });

app/controllers/render-tree.js

@@ -63,6 +63,10 @@ export default Controller.extend({
      */
     closeWarning() {
       this.set('isWarningClosed', true);
+    },
+
+    clearSearchField() {
+      this.set('searchField', '');
     }
   },
 

app/controllers/view-tree.js

@@ -38,6 +38,10 @@ export default Controller.extend({
   })),
 
   actions: {
+    clearSearchText() {
+      this.set('searchText', '');
+    },
+
     previewLayer({ value: { objectId, elementId, renderNodeId } }) {
       // We are passing all of objectId, elementId, and renderNodeId to support post-glimmer 1, post-glimmer 2, and root for
       // post-glimmer 2

app/styles/drag_handle.scss

@@ -25,7 +25,7 @@
   height: 100%;
   margin-left: 3px;
   width: 1px;
-  border-left: 1px solid #A3A3A3;
+  border-left: 1px solid #bcbcbc;
   pointer-events: none;
 }
 

app/styles/dropdown.scss

@@ -6,20 +6,22 @@
 .dropdown {
   position: relative;
   flex: auto;
+  height: 28px;
 }
 
 .dropdown__select {
-  -webkit-appearance: none;
   box-sizing: border-box;
   display: block;
   width: 100%;
-  height: 18px;
-  padding: 0 15px 0 5px;
-  font-size: 12px;
-  color: rgb(48, 48, 48);
-  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
+  height: 100%;
+  margin: 0;
   border: 0;
+  padding: 0 16px 0 5px;
+  font-size: 12px;
+  color: rgb(70, 70, 70);
   background-color: transparent;
+  -moz-appearance: none;
+  -webkit-appearance: none;
 }
 
 .dropdown__select:focus {
@@ -28,13 +30,9 @@
 
 .dropdown__arrow {
   position: absolute;
-  right: 4px;
-  top: 7px;
-  background-image: url(images/arrow_down.svg);
-  background-size: 100%;
+  right: 5px;
+  top: 9px;
   opacity: 0.7;
-  width: 7px;
-  height: 7px;
-  display: inline-block;
+  width: 6px;
   pointer-events: none;
 }

app/styles/error_page.scss

@@ -58,6 +58,7 @@
   width: 128px;
   height: 89px;
   background: url("images/fishy_tomster.png") left center no-repeat;
+  background-size: 128px 89px;
   position: absolute;
   right: 0px;
   bottom: 0px;

app/styles/mixin.scss

@@ -6,69 +6,54 @@
  or a mixin the object extends
 */
 
+$mixin-left-padding: 22px;
+
 .mixin__name {
-  margin-top: -1px;
-  padding: 2px 2px 2px 5px;
-  border-top: 1px solid #bdbdbd;
-  border-bottom: 1px solid #bdbdbd;
-  background-color: #f0f0f0;
+  position: relative;
+  padding: 4px 2px 4px $mixin-left-padding;
+  border-bottom: 1px solid #cecece;
+  background-color: #f5f5f5;
   cursor: default;
   user-select: none;
+  color: #222;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .mixin__name:active {
-  background-color: #ccc;
-  border-top: 1px solid #b2b2b2;
-  border-bottom: 1px solid #b2b2b2;
+  background-color: #e7e7e7;
+}
+
+.mixin__name--no-props {
+  color: #777;
 }
 
   .mixin_props_no .mixin__name:before {
     opacity: 0;
   }
 
-  .mixin.ember-mixin .mixin__name {
-    color: #888;
-  }
-
 .mixin__name:before {
+  position: absolute;
+  top: 5px;
+  left: 7px;
   content: "\25B6";
   color: #737373;
-  margin-right: 4px;
-  position: relative;
-  top: -1px;
-  font-size: 75%;
+  margin-right: 5px;
+  font-size: 90%;
 }
 
-  .mixin_state_expanded .mixin__name {
-    border-bottom: 1px solid #bdbdbd;
-  }
-
   .mixin_state_expanded .mixin__name:before {
     content: "\25BC";
   }
 
-  .mixin.ember-mixin .mixin__name:before {
-    color: #aaa;
-  }
-
-.mixin__name_errors {
-  background-color: #fff;
-
-  &:active{
-    background-color: #fff;
-  }
-}
-
-
 .mixin__properties {
-  margin: 5px;
   list-style-type: none;
-  padding: 0;
+  border-bottom: 1px solid #cecece;
+  margin: 0;
+  padding: 3px 0 5px 0;
   font-size: 12px;
-  font-family: Menlo, Monaco, monospace;
+  font-family: 'SF Mono', Menlo, Monaco, monospace;
 }
 
 .mixin__property {
@@ -79,24 +64,52 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  min-height: 19px;
 }
 
+/* Errors */
+
 .mixin__error {
   margin-right: 3px;
   padding: 0px 20px;
   color: red;
 }
 
-.mixin__property button {
-  border: none;
-  background: none;
-  margin: 0;
-  padding: 0;
+.mixin__name--errors {
+  background-color: #fff;
+
+  &:active{
+    background-color: #fff;
+  }
 }
 
-.mixin__property button img, .mixin__property span.pad {
-  margin-right: 3px;
-  width: 20px;
+/* Buttons */
+
+.mixin__property {
+  button {
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .pad { width: $mixin-left-padding; }
+  .mixin__calc-btn {
+    width: $mixin-left-padding;
+
+    img {
+      max-height: 16px;
+    }
+  }
+
+  .mixin__calc-btn--calculated {
+    opacity: 0.4;
+  }
+
+  .mixin__send-btn {
+    opacity: 0;
+    padding-right: 6px;
+  }
 }
 
 .mixin__property-overridden-by {
@@ -124,15 +137,6 @@
   outline: none;
 }
 
-.mixin__calc-btn_calculated {
-  opacity: 0.4;
-}
-
-.mixin__send-btn {
-  width: 20px;
-  opacity: 0;
-}
-
 
 .mixin__property-value-separator {
   margin-right: 5px;
@@ -173,7 +177,7 @@
 
 
 .mixin__property:not(.mixin__property_state_overridden):hover {
-  background-color: #ffe;
+  background-color: #f3f3f3;
 }
 
 
@@ -186,9 +190,10 @@
 }
 
 .mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn {
-    opacity: 1;
-}
+  opacity: 1;
 
-.mixin__property:not(.mixin__property_state_overridden):hover .mixin__send-btn:active {
-  opacity: 0.5;
+  &:active {
+    opacity: 0.5;
+  }
 }
+