Use ha-card for dev tool "Services" + visual tweaks (#7364)

src/panels/developer-tools/service/developer-tools-service.js

@@ -7,6 +7,7 @@ import "../../../components/buttons/ha-progress-button";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
 import "../../../components/ha-service-picker";
+import "../../../components/ha-card";
 import { ENTITY_COMPONENT_DOMAINS } from "../../../data/entity";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import LocalizeMixin from "../../../mixins/localize-mixin";
@@ -38,17 +39,19 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           margin-top: 8px;
         }
 
-        .description {
+        ha-card {
-          margin-top: 24px;
+          margin-top: 12px;
-          white-space: pre-wrap;
         }
 
-        .header {
+        .description {
-          @apply --paper-font-title;
+          margin-top: 12px;
+          white-space: pre-wrap;
         }
 
         .attributes th {
           text-align: left;
+          background-color: var(--card-background-color);
+          border-bottom: 1px solid var(--primary-text-color);
         }
 
         :host([rtl]) .attributes th {
@@ -78,10 +81,6 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           font-family: var(--code-font-family, monospace);
         }
 
-        h1 {
-          white-space: normal;
-        }
-
         td {
           padding: 4px;
         }
@@ -105,7 +104,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
       >
       </app-localstorage-document>
       <app-localstorage-document
-        key="[[_computeServicedataKey(domainService)]]"
+        key="[[_computeServiceDataKey(domainService)]]"
         data="{{serviceData}}"
       >
       </app-localstorage-document>
@@ -146,58 +145,59 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           </ha-progress-button>
         </div>
 
-        <template is="dom-if" if="[[!domainService]]">
+        <ha-card>
-          <h1>
+          <div class="card-header">
-            [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
+            <template is="dom-if" if="[[!domainService]]">
-          </h1>
+                [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
-        </template>
+            </template>
 
-        <template is="dom-if" if="[[domainService]]">
+            <template is="dom-if" if="[[domainService]]">
-          <template is="dom-if" if="[[!_description]]">
+              <template is="dom-if" if="[[!_description]]">
-            <h1>
+                [[localize('ui.panel.developer-tools.tabs.services.no_description')]]
-              [[localize('ui.panel.developer-tools.tabs.services.no_description')]]
+              </template>
-            </h1>
+              <template is="dom-if" if="[[_description]]">
-          </template>
+                [[_description]]
-          <template is="dom-if" if="[[_description]]">
+              </template>
-            <div class="desc-container">
+            </template>
-              <h3>[[_description]]</h3>
+          </div>
-            </div>
+          <div class="card-content">
-
+            <template is="dom-if" if="[[_description]]">
-            <table class="attributes">
-              <tr>
-                <th>
-                  [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]]
-                </th>
-                <th>
-                  [[localize('ui.panel.developer-tools.tabs.services.column_description')]]
-                </th>
-                <th>
-                  [[localize('ui.panel.developer-tools.tabs.services.column_example')]]
-                </th>
-              </tr>
               <template is="dom-if" if="[[!_attributes.length]]">
-                <tr>
+                [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]]
-                  <td colspan="3">
-                    [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]]
-                  </td>
-                </tr>
               </template>
-              <template is="dom-repeat" items="[[_attributes]]" as="attribute">
-                <tr>
-                  <td><pre>[[attribute.key]]</pre></td>
-                  <td>[[attribute.description]]</td>
-                  <td>[[attribute.example]]</td>
-                </tr>
-              </template>
-            </table>
 
-            <template is="dom-if" if="[[_attributes.length]]">
+              <template is="dom-if" if="[[_attributes.length]]">
-              <mwc-button on-click="_fillExampleData">
+                <table class="attributes">
-                [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
+                  <tr>
-              </mwc-button>
+                    <th>
+                      [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]]
+                    </th>
+                    <th>
+                      [[localize('ui.panel.developer-tools.tabs.services.column_description')]]
+                    </th>
+                    <th>
+                      [[localize('ui.panel.developer-tools.tabs.services.column_example')]]
+                    </th>
+                  </tr>
+                  <template is="dom-repeat" items="[[_attributes]]" as="attribute">
+                    <tr>
+                      <td><pre>[[attribute.key]]</pre></td>
+                      <td>[[attribute.description]]</td>
+                      <td>[[attribute.example]]</td>
+                    </tr>
+                  </template>
+                </table>
+              </template>
+
+              <template is="dom-if" if="[[_attributes.length]]">
+                <mwc-button on-click="_fillExampleData">
+                  [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
+                </mwc-button>
+              </template>
             </template>
           </template>
-        </template>
+          </div>
+        </ha-card>
       </div>
     `;
   }
@@ -247,6 +247,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
         type: String,
         computed: "_computeDescription(hass, _domain, _service)",
       },
+
       rtl: {
         reflectToAttribute: true,
         computed: "_computeRTL(hass)",
@@ -276,7 +277,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
     return serviceDomains[domain][service].description;
   }
 
-  _computeServicedataKey(domainService) {
+  _computeServiceDataKey(domainService) {
     return `panel-dev-service-state-servicedata.${domainService}`;
   }
 

src/panels/developer-tools/state/developer-tools-state.js

@@ -237,6 +237,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         computed:
           "computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
       },
+
       rtl: {
         reflectToAttribute: true,
         computed: "_computeRTL(hass)",

src/panels/developer-tools/template/developer-tools-template.ts

@@ -155,20 +155,20 @@ class HaPanelDevTemplate extends LitElement {
             ? ""
             : this._templateResult.listeners.all
             ? html`
-                <h3 class="all_listeners">
+                <p class="all_listeners">
                   ${this.hass.localize(
                     "ui.panel.developer-tools.tabs.templates.all_listeners"
                   )}
-                </h3>
+                </p>
               `
             : this._templateResult.listeners.domains.length ||
               this._templateResult.listeners.entities.length
             ? html`
-                <h3>
+                <p>
                   ${this.hass.localize(
                     "ui.panel.developer-tools.tabs.templates.listeners"
                   )}
-                </h3>
+                </p>
                 <ul>
                   ${this._templateResult.listeners.domains
                     .sort()

src/resources/styles.ts

@@ -3,7 +3,7 @@ import { css } from "lit-element";
 export const darkStyles = {
   "primary-background-color": "#111111",
   "card-background-color": "#1c1c1c",
-  "secondary-background-color": "#1e1e1e",
+  "secondary-background-color": "#202020",
   "primary-text-color": "#e1e1e1",
   "secondary-text-color": "#9b9b9b",
   "disabled-text-color": "#6f6f6f",