ember-inspector 4.13.1 → 4.15.0

package/{lib/ui/addon/styles → app/styles/ui}/_list.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-duplicate-selectors */
 .list {
   background: var(--base00);
   box-sizing: border-box;
@@ -7,7 +8,7 @@
   position: relative;
 }
 
-.list__content {
+.list-content {
   overflow: scroll;
   transform: translateZ(0);
 }
@@ -24,7 +25,7 @@
   }
 }
 
-.list__header {
+.list-header {
   border-bottom: 1px solid var(--base05);
   height: 30px;
   overflow: hidden;
@@ -33,11 +34,11 @@
   text-align: left;
   user-select: none;
 
-  .list__row {
+  .list-row {
     background: var(--base00);
   }
 
-  .list__cell {
+  .list-cell {
     color: var(--inherit);
     font-weight: normal;
     opacity: 1;
@@ -47,8 +48,8 @@
   }
 }
 
-.list:not(.list_no-alternate-color) .list__content {
-  .list__row {
+.list:not(.list-no-alternate-color) .list-content {
+  .list-row {
     background: var(--base02);
 
     &.striped {
@@ -57,17 +58,17 @@
   }
 }
 
-.list.list--css-striping {
-  .list__row:nth-child(even) {
+.list.list-css-striping {
+  .list-row:nth-child(even) {
     background: var(--base00);
   }
 }
 
-.list__cell-content {
+.list-cell-content {
   width: 100%;
 }
 
-.list__cell {
+.list-cell {
   box-sizing: border-box;
   line-height: 30px;
   min-height: 30px;
@@ -77,49 +78,49 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &_size_small {
+  &-size-small {
     flex: none;
     width: 50px;
   }
 
-  &_size_medium {
+  &-size-medium {
     flex: none;
     width: 130px;
   }
 
-  &_size_larger {
+  &-size-larger {
     flex: none;
     width: 350px;
   }
 
-  &_size_large {
+  &-size-large {
     flex: none;
     width: 250px;
   }
 
-  &_size_huge {
+  &-size-huge {
     flex: none;
     width: 450px;
   }
 
-  &_value_numeric {
+  &-value-numeric {
     font-family: var(--font-monospace);
     min-width: 65px;
     padding-right: 10px;
     text-align: right;
   }
 
-  &_main {
+  &-main {
     font-weight: bold;
   }
 
-  &_spacer {
+  &-spacer {
     border: none;
     flex: none;
     width: 0;
   }
 
-  &_clickable {
+  &-clickable {
     cursor: pointer;
   }
 }
@@ -128,7 +129,7 @@
  * Content in a cell that should not take the entire
  * space. Usually because it has a $E after it.
  */
-.list__cell-partial {
+.list-cell-partial {
   display: inline-block;
   float: left;
   max-width: calc(100% - 40px);
@@ -137,11 +138,11 @@
   white-space: nowrap;
 }
 
-.list__cell-partial_clickable {
+.list-cell-partial-clickable {
   cursor: pointer;
 }
 
-.list__cell-partial_size_medium {
+.list-cell-partial-size-medium {
   max-width: calc(100% - 60px);
 }
 
@@ -149,40 +150,40 @@
  * For example a $E icon to the right
  * of a cell.
  */
-.list__cell-helper {
+.list-cell-helper {
   float: right;
   margin-right: 5px;
 }
 
-.list__link {
+.list-link {
   cursor: pointer;
 }
 
-.list__row:hover {
-  .list__cell {
+.list-row:hover {
+  .list-cell {
     opacity: 1;
 
-    &_clickable {
+    &-clickable {
       text-decoration: underline;
     }
   }
 
-  .list__cell-partial_clickable {
+  .list-cell-partial-clickable {
     text-decoration: underline;
   }
 
-  .list__link {
+  .list-link {
     text-decoration: underline;
   }
 }
 
-.list__row_highlight .list__cell,
-.list__cell_highlight {
+.list-row-highlight .list-cell,
+.list-cell-highlight {
   opacity: 1;
 }
 
 /* ARROW FOR COLLAPSING AND EXPANDING */
-.list__cell-arrow {
+.list-cell-arrow {
   cursor: pointer;
   display: block;
   float: left;
@@ -190,7 +191,7 @@
   position: relative;
   width: 15px;
 
-  &:before {
+  &::before {
     color: var(--base10);
     font-size: 75%;
     position: absolute;
@@ -200,37 +201,37 @@
 }
 
 /* cell expanding/collapsing */
-.list__cell_arrow_expanded,
-.list__cell_arrow_collapsed {
+.list-cell-arrow-expanded,
+.list-cell-arrow-collapsed {
   cursor: pointer;
 }
 
-.list__cell_arrow_collapsed {
-  .list__cell-arrow:before {
+.list-cell-arrow-collapsed {
+  .list-cell-arrow::before {
     content: "\25B6";
   }
 }
 
-.list__cell_arrow_expanded {
-  .list__cell-arrow:before {
+.list-cell-arrow-expanded {
+  .list-cell-arrow::before {
     content: "\25BC";
   }
 }
 
-.list__row_arrow_collapsed,
-.list__row_arrow_expanded {
+.list-row-arrow-collapsed,
+.list-row-arrow-expanded {
   cursor: pointer;
   position: relative;
 }
 
-.list__row_arrow_collapsed {
-  .list__cell-arrow:before {
+.list-row-arrow-collapsed {
+  .list-cell-arrow::before {
     content: "\25B6";
   }
 }
 
-.list__row_arrow_expanded {
-  .list__cell-arrow:before {
+.list-row-arrow-expanded {
+  .list-cell-arrow::before {
     content: "\25BC";
   }
 }

package/{lib/ui/addon/styles → app/styles/ui}/_nav.scss

@@ -1,6 +1,6 @@
-$nav--main-item-height: 38px;
+$nav-main-item-height: 38px;
 
-.nav__title {
+.nav-title {
   color: var(--base09);
   cursor: default;
   font-size: 1.2rem;
@@ -26,7 +26,7 @@ $nav--main-item-height: 38px;
   Anchor tag
 */
 
-.nav__item {
+.nav-item {
   align-items: center;
   color: var(--base15);
   cursor: default;
@@ -39,15 +39,17 @@ $nav--main-item-height: 38px;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus { outline: none; }
+  &:focus {
+    outline: none;
+  }
 }
 
-.nav__item.active {
+.nav-item.active {
   background: var(--focus);
   color: var(--focus-text);
 }
 
-.app.inactive .nav__item.active {
+.app.inactive .nav-item.active {
   background: var(--base06);
 }
 
@@ -57,45 +59,45 @@ $nav--main-item-height: 38px;
   Main text of Nav Item
 */
 
-.nav__item-label {
+.nav-item-label {
   flex-grow: 1;
   font-size: 1.3rem;
 }
 
-.nav--collapsed .nav__item-label,
-.nav--collapsed .nav__item .pill {
+.nav-collapsed .nav-item-label,
+.nav-collapsed .nav-item .pill {
   display: none;
 }
 
-.nav__item-icon {
+.nav-item-icon {
   flex-shrink: 0;
   height: 22px;
   margin-right: 7px;
   width: 22px;
 }
 
-.nav__icon-stroke {
+.nav-icon-stroke {
   fill: var(--base12);
 }
 
-.nav__item.active .nav__icon-stroke {
+.nav-item.active .nav-icon-stroke {
   fill: var(--focus-text);
 }
 
 /* Custom navs */
 
-.nav--main .nav__item {
-  height: $nav--main-item-height;
-  line-height: $nav--main-item-height;
+.nav-main .nav-item {
+  height: $nav-main-item-height;
+  line-height: $nav-main-item-height;
   padding-left: 12px;
 }
 
-.nav--main .pill {
+.nav-main .pill {
   margin-right: var(--unit1);
   margin-left: var(--unit1);
 }
 
-.nav.nav--main .nav__title {
+.nav.nav-main .nav-title {
   padding-left: 14px;
 }
 
@@ -123,30 +125,30 @@ $nav--main-item-height: 38px;
 }
 
 // when nav is expaned, layout horizontally
-.nav__footer.nav--expanded {
+.nav-footer.nav-expanded {
   display: grid;
-  grid-template: "left center right" $nav--main-item-height / auto 1fr auto;
-  height: $nav--main-item-height;
+  grid-template: "left center right" $nav-main-item-height / auto 1fr auto;
+  height: $nav-main-item-height;
 }
 
 // when nav is collapsed, layout vertically
-.nav__footer.nav--collapsed {
+.nav-footer.nav-collapsed {
   display: grid;
   grid-template:
-    "left" $nav--main-item-height - 6px
-    "right" $nav--main-item-height  - 6px;
+    "left" $nav-main-item-height - 6px
+    "right" $nav-main-item-height - 6px;
   height: auto;
 }
 
-.nav__overflow.nav__overflow--active {
+.nav-overflow.nav-overflow-active {
   background-color: var(--focus);
 
-  .nav__icon-stroke {
+  .nav-icon-stroke {
     fill: var(--focus-text);
   }
 }
 
 // force select to cover clickable area
-.nav__overflow select {
-  height: $nav--main-item-height;
+.nav-overflow select {
+  height: $nav-main-item-height;
 }

package/app/styles/ui/_object-inspector-toggle.scss

@@ -0,0 +1,4 @@
+.object-inspector-toggle.toolbar-icon-button {
+  max-height: var(--toolbar-height);
+  padding-inline: 6px; // .toolbar-icon-button override
+}

package/{lib/ui/addon/styles → app/styles/ui}/_pill.scss

@@ -16,16 +16,16 @@
   background: var(--pill-bg-active);
 }
 
-.pill--small {
-  font-size: 1.0rem;
+.pill-small {
+  font-size: 1rem;
   padding: 2px 4px;
 }
 
-.pill--text {
+.pill-text {
   font-family: var(--font-sans-serif);
 }
 
-.pill--blue {
+.pill-blue {
   background: var(--focus);
   color: var(--focus-text);
 }

package/{lib/ui/addon/styles → app/styles/ui}/_send-to-console.scss

@@ -29,7 +29,7 @@
   transform: translateY(1px);
 }
 
-.send-to-console--chevron-only {
+.send-to-console-chevron-only {
   svg {
     position: relative;
     top: -1px;

package/{lib/ui/addon/styles → app/styles/ui}/_split.scss

@@ -7,19 +7,16 @@
 /* .split: The container for one or more panels */
 
 .split {
-  bottom: 0;
+  inset: 0;
   display: flex;
   flex: auto;
   flex-direction: row;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
 }
 
-/* .split__panel: Contains a body, and optional header and footer elements */
+/* .split-panel: Contains a body, and optional header and footer elements */
 
-.split__panel {
+.split-panel {
   display: flex;
   flex: auto;
   flex-direction: column;
@@ -27,14 +24,14 @@
   overflow: hidden;
 }
 
-.split__panel__hd,
-.split__panel__bd,
-.split__panel__ft {
+.split-panel-hd,
+.split-panel-bd,
+.split-panel-ft {
   position: relative;
 }
 
-.split__panel__hd,
-.split__panel__ft {
+.split-panel-hd,
+.split-panel-ft {
   border-color: var(--base03);
   box-sizing: border-box;
   display: flex;
@@ -42,14 +39,14 @@
   flex-direction: column;
 }
 
-.split__panel__hd {
+.split-panel-hd {
   background: var(--base00);
   border-bottom-style: solid;
   border-bottom-width: 1px;
   min-height: 29px;
 }
 
-.split__panel__bd {
+.split-panel-bd {
   background: var(--base00);
   flex: auto;
   overflow: scroll;
@@ -57,7 +54,7 @@
   width: auto;
 }
 
-.split__panel__ft {
+.split-panel-ft {
   background: var(--base01);
   border-top-style: solid;
   border-top-width: 1px;
@@ -65,26 +62,35 @@
   justify-content: center;
 }
 
-.split__panel,
-.split__panel__bd {
+.split-panel,
+.split-panel-bd {
   height: 100%;
 }
 
 /* Custom panels */
 
-.split__panel--sidebar-1 .split__panel__bd {
+.split-panel-hd-row {
+  flex-flow: row;
+}
+
+.split-panel-sidebar-1 .split-panel-bd {
   background: var(--base01);
 }
 
-.split__panel--sidebar-2 .split__panel__bd {
+.split-panel-sidebar-2 .split-panel-bd {
   background: var(--base01);
 }
 
 /* Fix main list-view scrolling */
-.split--main > .split__panel > .split__panel__bd {
+.split-main > .split-panel > .split-panel-bd {
   overflow: hidden;
 }
 
-.split--main > .split__panel--sidebar-1 > .split__panel__bd {
+.split-main > .split-panel-sidebar-1 > .split-panel-bd {
   overflow-y: auto;
 }
+
+/* There is better ways to do this, but they create more complicated CSS */
+.split-panel-hd-row .spacer {
+  flex: 1 1 100%;
+}

package/app/styles/ui/_ui.scss

@@ -0,0 +1,13 @@
+@import "disclosure-triangle";
+@import "drag-handle";
+@import "empty-message";
+@import "error-page";
+@import "list";
+@import "nav";
+@import "pill";
+@import "send-to-console";
+@import "goto-source";
+@import "object-inspector-toggle";
+@import "split";
+@import "toolbar/index";
+@import "warning";

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_checkbox.scss

@@ -1,4 +1,4 @@
-.toolbar__checkbox {
+.toolbar-checkbox {
   height: 100%;
   margin-left: 4px;
   margin-right: 4px;
@@ -6,24 +6,24 @@
   white-space: nowrap;
 }
 
-.toolbar__checkbox label {
+.toolbar-checkbox label {
   display: block;
   height: 100%;
   line-height: var(--toolbar-height);
 }
 
-.toolbar__checkbox input {
+.toolbar-checkbox input {
   margin: 0;
 }
 
 /*
   if first item in toolbar, create extra clickable space
 */
-.toolbar__checkbox:first-child {
+.toolbar-checkbox:first-child {
   margin-left: 0;
 }
 
-.toolbar__checkbox:first-child label {
+.toolbar-checkbox:first-child label {
   margin-left: 0;
   padding-left: 8px;
 }

package/app/styles/ui/toolbar/_icon-button.scss

@@ -0,0 +1,80 @@
+.toolbar-icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0 transparent none;
+  display: flex;
+  height: var(--toolbar-height);
+  margin-left: 2px;
+  margin-right: 2px;
+  padding: 0 2px;
+  vertical-align: top;
+
+  /* if first item in toolbar, create extra clickable space on left side */
+  &:first-child {
+    margin-left: 0;
+    padding-left: 10px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    transform: translate(1px, 1px);
+  }
+
+  /*
+  SVG colors
+  */
+
+  .svg-stroke {
+    stroke: var(--base11);
+  }
+
+  .svg-fill {
+    fill: var(--base11);
+  }
+
+  &:hover {
+    .svg-stroke {
+      stroke: var(--base13);
+    }
+
+    .svg-fill {
+      fill: var(--base13);
+    }
+  }
+
+  /*
+  Modifier:
+  .active (highlighted)
+  */
+  &.active .svg-stroke {
+    stroke: var(--focus);
+  }
+
+  &.active .svg-fill {
+    fill: var(--focus);
+  }
+
+  /*
+  Modifier
+  .disabled
+  */
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  &.disabled:active {
+    transform: none;
+  }
+
+  &.disabled .svg-stroke {
+    stroke: var(--base05);
+  }
+
+  &.disabled .svg-fill {
+    fill: var(--base05);
+  }
+}

package/{lib/ui/addon/styles → app/styles/ui}/toolbar/_index.scss

@@ -17,13 +17,14 @@
   margin-left: 5px;
   margin-right: 5px;
 }
+
 .toolbar .goto-source {
   margin-left: 5px;
   margin-right: 5px;
 }
 
-@import 'checkbox';
-@import 'divider';
-@import 'icon-button';
-@import 'radio';
-@import 'search';
+@import "checkbox";
+@import "divider";
+@import "icon-button";
+@import "radio";
+@import "search";