More functional classes and data-test selectors (#1168)

* More functional classes and data-test selectors

* Fix broken object inspector tests

app/components/app-picker.hbs

@@ -1,6 +1,6 @@
-<div class="dropdown">
+<div class="h-7 text-base13">
   <select
-    class="dropdown__select"
+    class="box-border block w-full h-full m-0 border-0 pr-4 pl-1 text-base text-base13 bg-transparent appearance-none outline-none"
     onchange={{action "selectApp" value="target.value"}}
   >
     {{#each-in this.apps as |id name|}}
@@ -12,5 +12,5 @@
       </option>
     {{/each-in}}
   </select>
-  {{svg-jar "dropdown-arrow" class="dropdown__arrow"}}
+  {{svg-jar "dropdown-arrow" class="dropdown__arrow fill-current absolute opacity-75 pointer-events-none"}}
 </div>

app/components/deprecation-item.hbs

@@ -1,5 +1,5 @@
 <Ui::Disclosure as |disclosure|>
-  <div class="deprecation-item px-3" data-test-deprecation-item>
+  <div class="deprecation-item px-3 text-lg" data-test-deprecation-item>
     <div class="flex items-center">
       <div
         class="flex items-center flex-grow py-2"

app/components/object-inspector.hbs

@@ -2,43 +2,53 @@
   <div class="split__panel__hd">
     <div class="toolbar">
       <button
-        class="toolbar__icon-button {{if this.isNested "enabled" "disabled"}} js-object-inspector-back"
+        class="toolbar__icon-button {{if this.isNested "enabled" "disabled"}}"
         {{on "click" this.popStack}}
+        data-test-object-inspector-back
       >
         {{svg-jar "arrow-back" width="21px" height="21px"}}
       </button>
 
-      <Ui::ToolbarDivider />
-
-      <code class="object-inspector-object-name js-object-name">
+      <code
+        class="flex-auto truncate font-bold"
+        data-test-object-name
+      >
         {{@model.firstObject.name}}
       </code>
 
       <button
-        class="send-to-console js-send-object-to-console-btn"
+        class="send-to-console"
         title="Send to Console"
         {{on "click" (fn this.sendObjectToConsole @model.lastObject)}}
+        data-test-send-object-to-console-btn
       >
         {{svg-jar "send-with-text" width="20px" height="10px"}}
       </button>
     </div>
 
     {{#if this.trail}}
-      <code class="object-trail js-object-trail">{{this.trail}}</code>
+      <code
+        class="object-trail mb-1 break-all"
+        data-test-object-trail
+      >
+        {{this.trail}}
+      </code>
     {{/if}}
   </div>
 
   <div class="split__panel__bd">
     <div class="toolbar object-inspector-toolbar">
       <button
-        class="toolbar__radio toolbar__radio--first js-object-display-type-grouped {{if (eq this.propDisplayType "grouped") "active"}}"
+        class="toolbar__radio toolbar__radio--first {{if (eq this.propDisplayType "grouped") "active"}}"
         {{on "click" (fn this.setPropDisplay "grouped")}}
+        data-test-object-display-type-grouped
       >
         Grouped
       </button>
       <button
-        class="toolbar__radio js-object-display-type-all {{if (eq this.propDisplayType "all") "active"}}"
+        class="toolbar__radio {{if (eq this.propDisplayType "all") "active"}}"
         {{on "click" (fn this.setPropDisplay "all")}}
+        data-test-object-display-type-all
       >
         All
       </button>

app/components/object-inspector/dependent-keys.hbs

@@ -1,8 +1,8 @@
-<li class="mixin__property-dependency-list">
+<li class="mixin__property-dependency-list relative">
   {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
-  <ul>
+  <ul class="m-0 p-0 list-none">
     {{#each @keys as |depKey|}}
-      <li class="mixin__property-dependency-item">
+      <li class="mixin__property-dependency-item relative text-base12 text-sm">
         {{svg-jar
           "dependent-key-bullet"
           width="9px"

app/components/object-inspector/errors.hbs

@@ -1,20 +1,20 @@
-<div class="mixin mixin_props_no js-object-inspector-errors">
-  <h2 class="mixin__name mixin__name--errors">
+<div class="mixin mixin_props_no" data-test-object-inspector-errors>
+  <h2 class="mixin__name mixin__name--errors bg-base00">
     Errors
     <button
-      class="send-to-console send-to-console--chevron-only js-send-errors-to-console"
+      class="send-to-console send-to-console--chevron-only ml-1"
       {{on "click" @traceErrors}}
+      data-test-send-errors-to-console
     >
       {{svg-jar "send-with-chevron" width="6px" height="9px"}}
       Trace in the Console
     </button>
   </h2>
-  <div class="mixin__properties">
+  <div class="mixin__properties m-0 text-base font-mono">
     {{#each @errors as |error|}}
-      <div class="mixin__error js-object-inspector-error">
+      <div class="py-0 px-5 mr-1 text-spec01" data-test-object-inspector-error>
         Error while computing: {{error.property}}
       </div>
     {{/each}}
   </div>
 </div>
-

app/components/object-inspector/properties-all.hbs

@@ -1,5 +1,5 @@
 {{#if this.flatPropertyList.length}}
-  <ul class="mixin__properties">
+  <ul class="mixin__properties m-0 text-base font-mono list-none">
     <ObjectInspector::SortProperties
       @properties={{this.flatPropertyList}} as |sortedProperties|
     >

app/components/object-inspector/properties-grouped.hbs

@@ -1,22 +1,27 @@
 {{#each @model.mixins as |mixin|}}
   <ObjectInspector::Accordion @mixin={{mixin}} as |accordion|>
     <div
-      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin_state_expanded"}} {{if mixin.properties.length "mixin_props_yes" "mixin_props_no"}} js-object-detail"
+      class="mixin {{mixin.type}} {{if accordion.isExpanded "mixin_state_expanded"}} {{if mixin.properties.length "mixin_props_yes" "mixin_props_no"}}"
+      data-test-object-detail
     >
       {{#if mixin.properties.length}}
         <h2
-          class="mixin__name js-object-detail-name"
+          class="mixin__name sticky top-0 truncate select-none cursor-default text-base15 bg-base01"
           {{on "click" accordion.toggle}}
+          data-test-object-detail-name
         >
           {{mixin.name}}
         </h2>
       {{else}}
-        <h2 class="mixin__name mixin__name--no-props js-object-detail-name">
+        <h2
+          class="mixin__name mixin__name--no-props sticky top-0 truncate select-none text-base09 cursor-default bg-base01"
+          data-test-object-detail-name
+        >
           {{mixin.name}}
         </h2>
       {{/if}}
       {{#if accordion.isExpanded}}
-        <ul class="mixin__properties">
+        <ul class="mixin__properties m-0 text-base font-mono list-none">
           <ObjectInspector::SortProperties
             @properties={{mixin.properties}} as |sortedProperties|
           >
@@ -29,7 +34,7 @@
                 @sendToConsole={{fn this.sendToConsole prop}}
               />
             {{else}}
-              <li class="mixin__property">No Properties</li>
+              <li class="mixin__property flex relative flex-row items-center truncate">No Properties</li>
             {{/each}}
           </ObjectInspector::SortProperties>
         </ul>

app/components/object-inspector/property.hbs

@@ -1,5 +1,6 @@
 <li
-  class="{{if this.isOverridden "mixin__property_state_overridden"}} mixin__property js-object-property"
+  class="{{if this.isOverridden "mixin__property-state-overridden line-through"}} mixin__property flex flex-row relative items-center truncate"
+  data-test-object-property
 >
   {{!-- Disclosure Triangle --}}
   {{#if this.hasDependentKeys}}
@@ -19,26 +20,32 @@
   {{/if}}
 
   {{!-- Property Icon --}}
-  <span class="mixin__property-icon-container" title={{if @model.code @model.code this.iconInfo.title}}
+  <span
+    class="mixin__property-icon-container flex-shrink-0"
+    title={{if @model.code @model.code this.iconInfo.title}}
     {{on "click" this.toggleDeps}}
   >
-    <span class="mixin__property-icon mixin__property-icon--{{this.iconInfo.type}}"></span>
+    <span class="mixin__property-icon mixin__property-icon--{{this.iconInfo.type}} inline-block rounded font-mono text-md text-white text-center select-none"></span>
   </span>
 
   {{!-- Property Name --}}
-  <span class="mixin__property-name js-object-property-name">
+  <span
+    class="mixin__property-name text-base14 truncate"
+    data-test-object-property-name
+  >
     {{#if this.isService}}
       <span
         title="service"
-        class="js-property-name-service mixin__property--group"
+        class="mixin__property--group"
+        data-test-property-name-service
       >
         {{@model.name}}
       </span>
     {{else}}
       {{#if this.hasDependentKeys}}
         <span
           title="computed"
-          class="js-property-name-computed mixin__property--group"
+          class="mixin__property--group"
         >
           {{@model.name}}
         </span>
@@ -48,60 +55,67 @@
     {{/if}}
   </span>
 
-  <span class="mixin__property-value-separator">: </span>
+  <span class="mr-1">: </span>
 
   {{#if this.isEdit}}
     {{#if this.isDate}}
       {{date-property-field
         allowInput=true
         date=(readonly this.dateValue)
         dateFormat="Y-m-d"
-        class="mixin__property-value-txt js-object-property-value-date"
+        class="mixin__property-value-txt flex-1 text-base14 outline-none text-base bg-base01 js-object-property-value-date"
         onChange=this.dateSelected
         onClose=this.finishedEditing
       }}
     {{else}}
       <ObjectInspector::PropertyField
-        class="mixin__property-value-txt js-object-property-value-txt"
+        class="mixin__property-value-txt flex-1 text-base14 text-base bg-base01 outline-none"
         @value={{this.txtValue}}
         @insert-newline={{fn this.save}}
         @escape-press={{fn this.finishedEditing}}
         @focus-out={{fn this.finishedEditing}}
+        data-test-object-property-value-txt
       />
     {{/if}}
   {{else}}
     {{#if this.canCalculate}}
       <button
-        class="mixin__calc-btn js-calculate"
+        class="mixin__calc-btn"
         title="compute property"
         {{on "click" @calculate bubbles=false}}
+        data-test-calculate
       >
         {{svg-jar "calculate" width="16px" height="16px"}}
       </button>
     {{/if}}
     {{#if this.isDate}}
       <span
-        class="{{this.valueType}} mixin__property-value js-object-property-value"
+        class="{{this.valueType}} mixin__property-value truncate"
         {{on "click" this.dateClick}}
+        data-test-object-property-value
       >
         {{@model.value.inspect}}
       </span>
     {{else}}
       <span
-        class="{{this.valueType}} {{if this.isService "type-service"}} mixin__property-value js-object-property-value"
+        class="{{this.valueType}} {{if this.isService "type-service"}} mixin__property-value truncate"
         {{on "click" this.valueClick}}
+        data-test-object-property-value
       >
         {{@model.value.inspect}}
       </span>
     {{/if}}
   {{/if}}
 
-  <span class="mixin__property-overridden-by">(Overridden by {{@model.overridden}})</span>
+  <span class="mixin__property-overridden-by absolute right-0 no-underline bg-spec00">
+    (Overridden by {{@model.overridden}})
+  </span>
 
   <button
-    class="mixin__send-btn send-to-console js-send-to-console-btn"
+    class="mixin__send-btn flex-shrink-0 send-to-console"
     title="Send to console"
     {{on "click" @sendToConsole}}
+    data-test-send-to-console-btn
   >
     {{svg-jar "send-with-text" width="20px" height="10px"}}
   </button>

app/components/promise-item.hbs

@@ -55,9 +55,10 @@
     <div class="list__cell-helper">
       {{#if this.isError}}
         <button
-          class="send-to-console send-to-console--chevron-only js-send-to-console-btn"
+          class="send-to-console send-to-console--chevron-only"
           title="Send stack trace to the console"
           {{action @sendValueToConsole @model}}
+          data-test-send-to-console-btn
         >
           {{svg-jar "send-with-chevron" width="6px" height="9px"}}
           Stack Trace

app/components/route-cell-objects.hbs

@@ -1,8 +1,9 @@
 <div class="route-cell-objects">
   <span
-    class="is-link js-route-handler"
+    class="is-link inline-block"
     title={{@route.value.routeHandler.className}}
     {{on "click" @inspectRoute}}
+    data-test-route-handler
   >
     Route
   </span>

app/styles/deprecations.scss

@@ -1,6 +1,5 @@
 .deprecation-item {
   border-bottom: 1px solid var(--base01);
-  font-size: 1.4rem;
 
   .send-to-console {
     font-size: inherit;

app/styles/dropdown.scss

@@ -1,40 +1,6 @@
-/**
- DROP-DOWN
- =========
-*/
-
-.dropdown {
-  flex: auto;
-  height: 28px;
-  position: relative;
-}
-
-.dropdown__select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  background-color: var(--transparent);
-  border: 0;
-  box-sizing: border-box;
-  color: var(--base13);
-  display: block;
-  font-size: 1.2rem;
-  height: 100%;
-  margin: 0;
-  padding: 0 16px 0 5px;
-  width: 100%;
-}
-
-.dropdown__select:focus {
-  outline: none;
-}
-
 .dropdown__arrow {
-  opacity: 0.7;
-  pointer-events: none;
-  position: absolute;
   right: 5px;
-  top: 9px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 6px;
-
-  path { fill: var(--base13); }
 }