Refactor: Rename inspection CSS classes to be fully kebab-case

Author: LaCuneta

app/assets/javascripts/beak/widgets/ractives/agent-monitor.coffee

@@ -42,13 +42,13 @@ RactiveAgentMonitor = Ractive.extend({
       viewController = @get('viewController')
       { worldWidth, worldHeight } = viewController.getWorldShape()
       windowGenerator = followAgentWithZoom(
-        @find('.inspection__agent-monitor__view-container').offsetWidth,
+        @find('.inspection-agent-monitor-view-container').offsetWidth,
         @get('viewModelAgent'),
         @get('zoomLevel'),
         Math.min(worldWidth, worldHeight) / 2
       )
       viewWindow = viewController.getNewView(
-        @find('.inspection__agent-monitor__view-container'),
+        @find('.inspection-agent-monitor-view-container'),
         'world',
         windowGenerator
       )
@@ -172,7 +172,7 @@ RactiveAgentMonitor = Ractive.extend({
   template:
     """
     <div
-      class="inspection__agent-monitor"
+      class="inspection-agent-monitor"
       on-mouseenter="['hover-agent-card', agent]"
       on-mouseleave="['unhover-agent-card', agent]"
     >
@@ -185,10 +185,10 @@ RactiveAgentMonitor = Ractive.extend({
 
   partials: {
     "titleBar": """
-      <div class="inspection__agent-monitor__title-bar">
+      <div class="inspection-agent-monitor-title-bar">
         <span class="title">{{agent.getName()}}</span>
         <div
-          class="inspection__button"
+          class="inspection-button"
           on-click=["closed-agent-monitor", agent]
         >
           <img width=15 src="assets/images/inspect/close.png"/>
@@ -198,28 +198,28 @@ RactiveAgentMonitor = Ractive.extend({
 
     "viewSection": """
       <div
-        class="inspection__agent-monitor__view-container"
+        class="inspection-agent-monitor-view-container"
         on-contextmenu="show-context-menu"
       ></div>
-      <div class="inspection__agent-monitor__view-controls">
+      <div class="inspection-agent-monitor-view-controls">
         <div
-          class="inspection__button inspection__agent-monitor__watch-button"
+          class="inspection-button inspection-agent-monitor-watch-button"
           on-click="watch-button-clicked"
         >Watch</div>
         <input type="range" min=0 max=1 step=0.01 value="{{zoomLevel}}"/>
       </div>
     """
 
     "propertyGrid": """
-      <div class="inspection__agent-monitor__property-grid">
+      <div class="inspection-agent-monitor-property-grid">
         {{#each varNames as varName}}
           <agentVarField agent={{agent}} varName={{varName}}/>
         {{/each}}
       </div>
     """
 
     "commandCenter": """
-      <div class="inspection__cmd-container" style="margin: 0;">
+      <div class="inspection-cmd-container" style="margin: 0;">
         <commandInput
           isReadOnly={{isEditing}}
           source="agent-monitor"

app/assets/javascripts/beak/widgets/ractives/agent-var-field.coffee

@@ -66,8 +66,8 @@ RactiveAgentVarField = Ractive.extend({
   }
 
   template: """
-    <div class="inspection__agent-var-name" title="{{varName}}">{{varName}}</div>
-    <input class="inspection__input-container" value={{currentInput}}
+    <div class="inspection-agent-var-name" title="{{varName}}">{{varName}}</div>
+    <input class="inspection-input-container" value={{currentInput}}
            on-focus="@this.set('hasFocus', true)"
            on-blur="@this.set('hasFocus', false)"
            on-change="['submit-input', currentInput]"/>

app/assets/javascripts/beak/widgets/ractives/inspection-pane.coffee

@@ -304,7 +304,7 @@ RactiveInspectionPane = Ractive.extend({
     @set('selections.selectedAgents', filtered)
 
   template: """
-    <div class='netlogo-tab-content inspection__pane'>
+    <div class='netlogo-tab-content inspection-pane'>
       {{>commandCenter}}
       {{>agentMonitorsScreen}}
     </div>
@@ -313,9 +313,9 @@ RactiveInspectionPane = Ractive.extend({
   # coffeelint: disable=max_line_length
   partials: {
     'commandCenter': """
-      <div class="inspection__cmd-container">
+      <div class="inspection-cmd-container">
         <div
-          class="inspection__button {{#if pointToSelectEnabled}}selected{{/if}}"
+          class="inspection-button {{#if pointToSelectEnabled}}selected{{/if}}"
           on-click="@.toggle('pointToSelectEnabled')"
           title="Point to select: click an agent in the view to inspect it ({{#if pointToSelectEnabled}}on{{else}}off{{/if}})"
         >
@@ -325,7 +325,7 @@ RactiveInspectionPane = Ractive.extend({
           />
         </div>
         <div
-          class="inspection__button {{#if updateTargetedAgentsInHistory}}selected{{/if}}"
+          class="inspection-button {{#if updateTargetedAgentsInHistory}}selected{{/if}}"
           on-click="@.toggle('updateTargetedAgentsInHistory')"
           title="Update targeted agents in history: ({{#if updateTargetedAgentsInHistory}}on{{else}}off{{/if}})"
         >
@@ -345,20 +345,20 @@ RactiveInspectionPane = Ractive.extend({
     """
 
     'agentMonitorsScreen': """
-      <div class="inspection__agent-monitor-container">
+      <div class="inspection-agent-monitor-container">
         {{#if inspectedAgents.length > 0}}
-          <div class="inspection__button-tray" style="margin-bottom: 0.5em; justify-content: space-between;">
+          <div class="inspection-button-tray" style="margin-bottom: 0.5em; justify-content: space-between;">
             <b>Agent Monitors</b>
             <div
-              class="inspection__button"
+              class="inspection-button"
               title="Remove all agent monitors"
               on-click="@.set('inspectedAgents', [])"
             >
               <img width=25 src="assets/images/inspect/close.png"/>
             </div>
           </div>
         {{/if}}
-        <div class="inspection__agent-monitor-container__inner">
+        <div class="inspection-agent-monitor-container-inner">
           {{#each inspectedAgents as agent}}
             <agentMonitor
               viewController={{viewController}}

public/stylesheets/inspection-pane.css

@@ -1,28 +1,28 @@
-.inspection__pane {
+.inspection-pane {
   padding: 1em;
   min-width: 600px;
 }
 
-.inspection__button-tray {
+.inspection-button-tray {
   display: flex;
   align-items: center;
   gap: 1em;
 }
 
-.inspection__button {
+.inspection-button {
   cursor: pointer;
   user-select: none;
   border-radius: 5px;
   background-color: white;
 }
-.inspection__button:hover {
+.inspection-button:hover {
   background-color: rgba(211, 211, 211, 0.5);
 }
-.inspection__button.selected {
+.inspection-button.selected {
   background-color: lightblue;
 }
 
-.inspection__cmd-container {
+.inspection-cmd-container {
   margin: 1em 0;
   display: flex;
   flex-direction: row;
@@ -32,20 +32,20 @@
   border-radius: 5px;
 }
 
-.inspection__agent-monitor-container {
+.inspection-agent-monitor-container {
   padding: 0.5em;
   border-radius: 5px;
   min-height: 2em;
   box-shadow: inset 0 0 0.5em gray;
 }
 
-.inspection__agent-monitor-container__inner {
+.inspection-agent-monitor-container-inner {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
 }
 
-.inspection__agent-monitor {
+.inspection-agent-monitor {
   border: 2px solid lightgray;
   border-radius: 5px;
   width: 170px;
@@ -56,50 +56,50 @@
   gap: 0.5em;
 }
 
-.inspection__agent-monitor__title-bar {
+.inspection-agent-monitor-title-bar {
   display: grid;
   grid: auto / auto auto;
   justify-content: space-between;
   align-items: start;
 }
 
-.inspection__agent-monitor__title-bar .title {
+.inspection-agent-monitor-title-bar .title {
   font-weight: 700;
 }
 
-.inspection__agent-monitor__view-controls {
+.inspection-agent-monitor-view-controls {
   display: grid;
   grid: auto / auto auto;
   align-items: center;
 }
 
-.inspection__agent-monitor__view-controls > input {
+.inspection-agent-monitor-view-controls > input {
   min-width: 0;
 }
 
-.inspection__agent-monitor__watch-button {
+.inspection-agent-monitor-watch-button {
   width: min-content;
   padding: 0.5em;
   border: 1px solid gray;
 }
 
-.inspection__agent-monitor__property-grid {
+.inspection-agent-monitor-property-grid {
   display: grid;
   grid: auto-flow / 1fr 2fr;
   gap: 0 0.5em;
 }
 
-.inspection__agent-monitor__property-grid .inspection__agent-var-name {
+.inspection-agent-monitor-property-grid .inspection-agent-var-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.inspection__agent-monitor__property-grid > input {
+.inspection-agent-monitor-property-grid > input {
   min-width: 0;
 }
 
-.inspection__input-container {
+.inspection-input-container {
   background-color: white;
   border: 1px solid gray;
 }