Bug 1551174 - Inactive CSS - visual polish r=pbro

Depends on: D31986

### Summary

- [X] Extra margin between paragraphs (about 14px, or whatever 1em is)
- [X] Same amount of padding on all sides - match left spacing. Looks like we need 4px less on the side with the arrow, 2px less on the other side.
- [X] Fully opaque, white-colored background
- [X] Drop shadow should be half as dark (I think this is the MacOS doubled dropshadow issue - it should match the meatball menu's shadow)
- [X] Less space between ending icons and CSS - seems like we can just remove margin-inline-start: 5px
- [X] I think florens may have a better info icon that will be more legible at this small size
      !!I just created a new one!!
- [X] Warning icon should be smaller now to match the size of the info icon :)
      It was an illusion but I have made it slightly smaller and changed the background position to make it look closer to the same size.
- [X] Seems like it would be helpful if you could select the tooltip text

- Whole tooltip 1px to the right and 2px lower !!I have moved this out to bug 1552146!!

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

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

devtools/client/themes/images/alert.svg

@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.5 12.7" width="12" height="12">
   <path fill="context-fill" d="M6 0a1 1 0 0 1 .89.54l5 9.6A1 1 0 0 1 11 11.6H1a1 1 0 0 1-.89-1.46l5-9.6A1 1 0 0 1 6 0zm-.25 8a.75.75 0 0 0-.75.75v.5c0 .41.34.75.75.75h.5c.41 0 .75-.34.75-.75v-.5A.75.75 0 0 0 6.25 8h-.5zM7 3.7a1 1 0 1 0-2 0v2.6a1 1 0 1 0 2 0V3.7z" />
 </svg>

devtools/client/themes/images/alerticon-unused.svg

@@ -1,8 +1,8 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
-  <path stroke="context-stroke" fill="none" d="M15.5 8.5C15.5 12.36 12.36 15.5 8.5 15.5C4.63 15.5 1.5 12.36 1.5 8.5C1.5 4.64 4.63 1.5 8.5 1.5C12.36 1.5 15.5 4.64 15.5 8.5Z"/>
-  <path fill="context-fill" d="M8.98 7.47C9.52 7.47 9.96 7.91 9.96 8.45C9.96 9.42 9.96 11.33 9.96 12.29C9.96 12.83 9.52 13.27 8.98 13.27C8.59 13.27 8.4 13.27 8.01 13.27C7.47 13.27 7.03 12.83 7.03 12.29C7.03 11.33 7.03 9.42 7.03 8.45C7.03 7.91 7.47 7.47 8.01 7.47C8.4 7.47 8.59 7.47 8.98 7.47Z"/>
-  <path fill="context-fill" d="M9.96 5.36C9.96 6.16 9.3 6.81 8.49 6.81C7.69 6.81 7.03 6.16 7.03 5.36C7.03 4.57 7.69 3.92 8.49 3.92C9.3 3.92 9.96 4.57 9.96 5.36Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 14 14">
+  <path stroke="context-stroke" fill="none" d="M13 7C13 10.31 10.31 13 7 13C3.69 13 1 10.31 1 7C1 3.69 3.69 1 7 1C10.31 1 13 3.69 13 7Z"/>
+  <path fill="context-fill" d="M7.54 5.88C8.02 5.88 8.41 6.26 8.41 6.74C8.41 7.6 8.41 9.29 8.41 10.15C8.41 10.63 8.02 11.02 7.54 11.02C7.2 11.02 7.05 11.02 6.71 11.02C6.23 11.02 5.84 10.63 5.84 10.15C5.84 9.29 5.84 7.6 5.84 6.74C5.84 6.26 6.23 5.88 6.71 5.88C7.05 5.88 7.2 5.88 7.54 5.88Z"/>
+  <path fill="context-fill" d="M8.41 4.11C8.41 4.82 7.83 5.4 7.12 5.4C6.42 5.4 5.84 4.82 5.84 4.11C5.84 3.4 6.42 2.83 7.12 2.83C7.83 2.83 8.41 3.4 8.41 4.11Z"/>
 </svg>

devtools/client/themes/rules.css

@@ -365,8 +365,12 @@
   display: inline-block;
   width: 12px;
   height: 12px;
-  background-image: url(chrome://devtools/skin/images/alert.svg);
   background-size: cover;
+}
+
+.ruleview-warning {
+  background-image: url(chrome://devtools/skin/images/alert.svg);
+  background-position: 0.73px 0.4px;
   -moz-context-properties: fill;
   fill: var(--yellow-60);
 }

devtools/client/themes/tooltips.css

@@ -82,12 +82,22 @@ strong {
 
 .devtools-tooltip-inactive-css {
   color: var(--theme-body-color);
-  padding: 7px 10px;
+  padding: 5px 7px;
   margin: 0;
 }
 
+.devtools-tooltip-inactive-css,
+.devtools-tooltip-inactive-css strong {
+  -moz-user-select: text;
+  -moz-user-focus: normal;
+}
+
 .devtools-tooltip-inactive-css p {
   margin-block-start: 0;
+  margin-block-end: 1em;
+}
+
+.devtools-tooltip-inactive-css p:last-child {
   margin-block-end: 0;
 }
 
@@ -110,7 +120,6 @@ strong {
   display: none;
   position: fixed;
   z-index: 9999;
-  display: none;
   background: transparent;
   pointer-events: none;
   overflow: hidden;
@@ -345,7 +354,7 @@ strong {
    * padding.
    */
   margin-bottom: 0;
-  padding-bottom: 6px;
+  padding-bottom: 2px;
 }
 
 .tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-panel {