Bug 1580936 - [Inactive CSS] Final visual polish, Part Two r=jdescottes

Differential Revision: https://phabricator.services.mozilla.com/D46043

--HG--
extra : moz-landing-system : lando

devtools/client/shared/components/menu/MenuList.js

@@ -133,6 +133,7 @@ class MenuList extends PureComponent {
       onMouseOut: this.onMouseOutOrBlur,
       onFocus: this.onMouseOverOrFocus,
       onBlur: this.onMouseOutOrBlur,
+      className: "menu-standard-padding",
     };
 
     if (this.props.id) {
@@ -147,7 +148,7 @@ class MenuList extends PureComponent {
       }
     });
     if (hasCheckbox) {
-      attr.className = "checkbox-container";
+      attr.className = "checkbox-container menu-standard-padding";
     }
 
     return div(attr, this.props.children);

devtools/client/shared/widgets/tooltip/inactive-css-tooltip-helper.js

@@ -44,7 +44,7 @@ class InactiveCssTooltipHelper {
     doc.l10n.resumeObserving();
 
     // Size the content.
-    tooltip.setContentSize({ width: 275, height: Infinity });
+    tooltip.setContentSize({ width: 267, height: Infinity });
   }
 
   /**

devtools/client/themes/tooltips.css

@@ -79,9 +79,9 @@ strong {
 
 .devtools-tooltip-inactive-css {
   color: var(--theme-arrowpanel-color);
-  padding: 7px 14px 9px;
-  font-size: 12px;
   margin: 0;
+  padding: 10px 14px 12px 14px;
+  font-size: 12px;
 }
 
 .devtools-tooltip-inactive-css,
@@ -268,9 +268,9 @@ strong {
 /* Tooltip : doorhanger style */
 
 .tooltip-container[type="doorhanger"] > .tooltip-panel {
-  padding: 2px 0;
   color: var(--theme-arrowpanel-color);
-  margin: 4px;
+  margin: 0;
+  padding: 0;
   max-width: 320px;
 }
 
@@ -349,24 +349,9 @@ strong {
   margin-left: calc(var(--overhang) + var(--shadow-margin));
 }
 
-.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-panel {
-  /*
-   * Drop the margin between the doorhanger and the arrow and add extra
-   * padding.
-   */
-  margin-bottom: 0;
-  padding-top: 6px;
-  padding-bottom: 2px;
-}
-
-.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-panel {
-  /*
-   * Drop the margin between the doorhanger and the arrow and add extra
-   * padding.
-   */
-  margin-top: 0;
-  padding-top: 6px;
-  padding-bottom: 6px;
+.tooltip-container[type="doorhanger"] .menu-standard-padding {
+  margin: 0;
+  padding: 6px 0;
 }
 
 .tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow {