ember-inspector 4.13.1-alpha.2024.8.9 → 4.13.1-alpha.2025.10.2

package/app/styles/object_inspector.scss

@@ -4,16 +4,17 @@
 
 .object-inspector-toolbar.toolbar {
   border-bottom: 1px solid var(--base03);
+
   // override default .toolbar height
   // based on table view header height
   min-height: 30px;
 
-  .toolbar__radio--first {
+  .toolbar-radio-first {
     margin-left: 7px;
   }
 }
 
-.mixin__property-dependency-list {
+.mixin-property-dependency-list {
   margin-bottom: 5px;
   margin-top: 2px;
   padding-top: 2px;
@@ -27,13 +28,13 @@
   }
 }
 
-.mixin__property-dependency-item {
+.mixin-property-dependency-item {
   margin-bottom: 2px;
   margin-left: 55px;
 
-  &:before {
+  &::before {
     background-color: var(--base08);
-    content: '';
+    content: "";
     height: 8px;
     left: -9px;
     position: absolute;
@@ -53,69 +54,77 @@
   }
 }
 
-.mixin__property-dependency-name.subkey {
+.mixin-property-dependency-name.subkey {
   left: -11px;
   position: relative;
 }
 
-.mixin__property-dependency-item:first-child:before {
+.mixin-property-dependency-item:first-child::before {
   display: none;
 }
 
-.mixin__property-icon-container {
+.mixin-property-icon-container {
   width: $mixin-left-padding;
 }
 
-.mixin__property-icon {
+.mixin-property-icon {
   height: 17px;
   line-height: 17px;
   width: 17px;
 }
 
-.mixin__property-icon--service {
+.mixin-property-icon-service {
   background-color: var(--spec08);
 
-  &:before {
+  &::before {
     content: "S";
   }
 }
 
-.mixin__property-icon--computed {
+.mixin-property-icon-computed {
   background-color: var(--spec07);
 
-  &:before {
+  &::before {
     content: "C";
   }
 }
 
-.mixin__property-icon--property {
+.mixin-property-icon-property {
   background-color: var(--base06);
 
-  &:before {
+  &::before {
     content: "P";
   }
 }
 
-.mixin__property-icon--getter {
+.mixin-property-icon-getter {
   background-color: var(--spec07);
 
-  &:before {
+  &::before {
     content: "G";
   }
 }
 
-.mixin__property-icon--function {
+.mixin-property-icon-function {
   background-color: var(--base08);
 
-  &:before {
+  &::before {
     content: "ƒ";
   }
 }
 
-.mixin__property-icon--tracked {
+.mixin-property-icon-tracked {
   background-color: var(--tracked-icon-bg);
 
-  &:before {
+  &::before {
     content: "T";
   }
 }
+
+.mixin-property-icon-owner {
+  background-color: var(--spec02);
+
+  &::before {
+    content: "O";
+  }
+}

package/{lib/ui/addon/styles → app/styles/ui}/_disclosure-triangle.scss

@@ -1,7 +1,9 @@
 .disclosure-triangle {
   padding: 0 2px;
 
-  &:focus { outline: none; }
+  &:focus {
+    outline: none;
+  }
 
   svg {
     transition-duration: 0.1s;

package/{lib/ui/addon/styles → app/styles/ui}/_drag-handle.scss

@@ -14,15 +14,15 @@
   z-index: 500;
 }
 
-.drag-handle--right {
+.drag-handle-right {
   margin-right: calc(var(--drag-handle-width) / 2 * -1);
 }
 
-.drag-handle--left {
+.drag-handle-left {
   margin-left: calc(var(--drag-handle-width) / 2 * -1);
 }
 
-.drag-handle__border {
+.drag-handle-border {
   border-left: 1px solid var(--base06);
   margin-left: calc(var(--drag-handle-width) / 2);
   width: 1px;
@@ -31,19 +31,19 @@
 .drag-handle:active {
   width: var(--drag-handle-active-width);
 
-  &.drag-handle--right {
+  &.drag-handle-right {
     margin-right: calc(var(--drag-handle-active-width) / 2 * -1);
   }
 
-  &.drag-handle--left {
+  &.drag-handle-left {
     margin-left: calc(var(--drag-handle-active-width) / 2 * -1);
   }
 
-  .drag-handle__border {
+  .drag-handle-border {
     margin-left: calc(var(--drag-handle-active-width) / 2);
   }
 }
 
-.drag-handle--faded {
+.drag-handle-faded {
   opacity: 0.3;
 }

package/{lib/ui/addon/styles → app/styles/ui}/_empty-message.scss

@@ -4,6 +4,6 @@
   }
 }
 
-.empty-message__content {
+.empty-message-content {
   max-width: 40rem;
 }

package/{lib/ui/addon/styles → app/styles/ui}/_error-page.scss

@@ -5,7 +5,7 @@
   For example: when application is not detected.
 */
 
-.error-page__content {
+.error-page-content {
   border: 1px solid var(--base04);
   width: 530px;
 
@@ -13,7 +13,7 @@
     list-style-type: disc;
     padding-left: var(--unit4);
   }
-  
+
   li {
     padding: 2px 0;
   }
@@ -24,7 +24,7 @@
   }
 }
 
-.error-page__header {
+.error-page-header {
   border-bottom: 1px solid var(--base04);
   top: -25px;
 
@@ -33,21 +33,22 @@
     flex-shrink: 0;
     height: 89px;
     width: 128px;
-    animation: tomsterReveal 0.4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
+    animation: tomster-reveal 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     animation-delay: 0.75s;
     animation-fill-mode: forwards;
   }
 }
 
-@keyframes tomsterReveal {
+@keyframes tomster-reveal {
   from {
     transform: translateY(90px);
   }
+
   to {
-    transform: translateY(0px);
+    transform: translateY(0);
   }
 }
 
-.error-page__body {
+.error-page-body {
   border-bottom: 1px solid var(--base04);
 }

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;