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

package/lib/ui/addon/components/toolbar-reload-button.hbs

@@ -1,6 +1,6 @@
 <button
   title="Reload"
-  class="toolbar__icon-button"
+  class="toolbar-icon-button"
   ...attributes
   {{on "click" @action}}
   type="button"

package/lib/ui/addon/components/toolbar-search-field.hbs

@@ -1,4 +1,4 @@
-<div class="toolbar__search relative mx-1" ...attributes>
+<div class="toolbar-search relative mx-1" ...attributes>
   <Input
     id={{this.inputId}}
     @type="text"
@@ -9,7 +9,7 @@
 
   {{#if @value}}
     <button
-      class="toolbar__icon-button toolbar__search-clear-button absolute right-0 w-auto h-auto"
+      class="toolbar-icon-button toolbar-search-clear-button absolute right-0 w-auto h-auto"
       title="clear"
       data-test-search-field-clear-button
       {{on "click" this.clear}}

package/lib/ui/addon/styles/_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/_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/_empty-message.scss

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

package/lib/ui/addon/styles/_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/_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/_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/lib/ui/addon/styles/_object-inspector-toggle.scss

@@ -1,11 +1,11 @@
-.object-inspector-toggle.toolbar__icon-button {
-  margin-right: 0; // .toolbar__icon-button override
+.object-inspector-toggle.toolbar-icon-button {
+  margin-right: 0; // .toolbar-icon-button override
   max-height: var(--toolbar-height);
-  padding-right: 6px; // .toolbar__icon-button override
-  padding-left: 6px; // .toolbar__icon-button override
+  padding-right: 6px; // .toolbar-icon-button override
+  padding-left: 6px; // .toolbar-icon-button override
   transform: scaleX(-1);
 
-  // use .toolbar__icon-button active style AND flip horizontally
+  // use .toolbar-icon-button active style AND flip horizontally
   &:active {
     transform: translate(1px, 1px) scaleX(-1);
   }

package/lib/ui/addon/styles/_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/_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/_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,26 @@
   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-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;
 }