Some improvements to the tooltip

ember_debug/libs/view-inspection.js

@@ -29,33 +29,42 @@ function makeStylesheet(id) {
   return `
     #${prefix}-highlight-${id} {
       display: none;
+      pointer-events: none;
+      box-sizing: border-box;
       position: absolute;
-      padding: 0px;
       margin: 0px;
+      padding: 0px;
+      border: none;
       z-index: 10000;
-      pointer-events: none;
       /* https://github.com/ChromeDevTools/devtools-frontend/blob/b336f0440a8fb539352ac223ef466c3475618cf1/front_end/common/Color.js#L904 */
       background: rgba(111, 168, 220, .66);
     }
 
     #${prefix}-tooltip-${id} {
       display: none;
-      position: absolute;
       box-sizing: border-box;
-      padding: 4px 8px;
+      position: absolute;
       margin: 8px 0px;
+      padding: 4px 8px;
+      border: none;
+      border-radius: 3px;
       z-index: 10000;
       font-family: sans-serif;
       font-size: 12px;
+      font-weight: normal;
       background: white;
       box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
-      border-radius: 3px;
-      pointer-events: none;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-header {
       display: block;
       margin: 4px 0px;
+      padding: 0px;
+      border: none;
+      font-family: sans-serif;
+      font-size: 12px;
+      font-weight: normal;
+      background: transparent;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-title {
@@ -79,42 +88,94 @@ function makeStylesheet(id) {
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-details {
+      display: table;
       table-layout: auto;
       width: auto;
+      height: auto;
+      margin: 0px;
+      padding: 0px;
+      border: none;
+      border-spacing: 0px;
+      border-collapse: collapse;
+      background: transparent;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-details tbody {
+      display: table-row-group;
+      vertical-align: middle;
+      width: auto;
+      height: auto;
       margin: 0px;
       padding: 0px;
       border: none;
-      border-spacing: 0;
+      border-spacing: 0px;
       border-collapse: collapse;
+      background: transparent;
+    }
+
+    #${prefix}-tooltip-${id} .${prefix}-tooltip-details tr {
+      display: table-row;
+      vertical-align: middle;
+      width: auto;
+      height: auto;
+      margin: 0px;
+      padding: 0px;
+      border: none;
+      border-spacing: 0px;
+      border-collapse: collapse;
+      background: transparent;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-details th {
       display: block;
+      width: auto;
+      height: auto;
       margin: 4px 8px 4px 0px;
       padding: 0px;
       border: none;
+      border-spacing: 0px;
+      border-collapse: collapse;
       white-space: nowrap;
+      font-family: sans-serif;
+      font-size: 12px;
       font-weight: normal;
       text-align: left;
       color: #666;
+      background: transparent;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-details td {
-      white-space: nowrap;
+      display: table-cell;
+      width: auto;
+      height: auto;
       margin: 0px;
       padding: 0px;
       border: none;
+      border-spacing: 0px;
+      border-collapse: collapse;
+      white-space: nowrap;
+      font-family: sans-serif;
+      font-size: 12px;
+      font-weight: normal;
       text-align: right;
       color: #000;
+      background: transparent;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-arrow {
+      display: block;
+      box-sizing: border-box;
       position: absolute;
+      top: auto;
+      right: auto;
+      bottom: -20px;
+      left: 0px;
       width: 40px;
       height: 20px;
-      left: 0px;
-      bottom: -20px;
-      margin-left: -20px;
+      margin: 0px 0px 0px -20px;
+      padding: 0px;
+      border: none;
+      background: transparent;
       overflow-x: visible;
       overflow-y: hidden;
     }
@@ -127,19 +188,21 @@ function makeStylesheet(id) {
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-arrow::after {
       content: "";
+      display: block;
+      box-sizing: border-box;
       position: absolute;
-      width: 0px;
-      height: 0px;
       top: 0px;
+      right: auto;
+      bottom: auto;
       left: 50%;
-      margin-left: -8px;
-      box-sizing: border-box;
+      width: 0px;
+      height: 0px;
+      margin: 0px 0px 0px -8px;
       border: 6px solid white;
       border-color: transparent transparent white white;
+      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
       transform-origin: 0 0;
       transform: rotate(-45deg);
-      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
-      pointer-events: none;
     }
   `;
 }
@@ -159,6 +222,7 @@ export default class ViewInspection {
     this.isPinned = false;
 
     this.onMouseMove = this.onMouseMove.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
     this.onClick = this.onClick.bind(this);
 
     this.setup();
@@ -170,6 +234,7 @@ export default class ViewInspection {
     this.tooltip = this._insertHTML(makeTooltip(id));
     this._insertStylesheet(makeStylesheet(id));
 
+    document.body.addEventListener('keydown', this.onKeyDown, { capture: true });
     document.body.addEventListener('click', this.onClick, { capture: true });
   }
 
@@ -201,8 +266,24 @@ export default class ViewInspection {
     this.inspectNearest(event.target, false);
   }
 
+  onKeyDown(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      if (this.isPinned) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+      } else if (this.isInspecting) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.stop();
+      }
+    }
+  }
+
   onClick(event) {
-    if (this.isPinned) {
+    if (this.isPinned && !this.tooltip.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
       this.hide();
     } else if (this.isInspecting && event.button === 0) {
       event.preventDefault();