Bug 1551174 - Inactive CSS - visual polish r=pbro
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Tue, 21 May 2019 16:29:49 +0000
changeset 474782 9580f1df7a53b17cbda444f9d2809aeb63912743
parent 474781 62ffe3570de446a92c0eed4c22c81e6c50fb840b
child 474783 1a57fadeb896c57dcea6fd4812b97510811d4754
push id113171
push useraiakab@mozilla.com
push dateTue, 21 May 2019 21:56:33 +0000
treeherdermozilla-inbound@d3280055a40e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1551174, 1552146
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/themes/images/alert.svg
devtools/client/themes/images/alerticon-unused.svg
devtools/client/themes/rules.css
devtools/client/themes/tooltips.css
--- a/devtools/client/themes/images/alert.svg
+++ b/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>
--- a/devtools/client/themes/images/alerticon-unused.svg
+++ b/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>
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -360,18 +360,22 @@
   background-clip: content-box;
 }
 
 .ruleview-warning,
 .ruleview-unused-warning {
   display: inline-block;
   width: 12px;
   height: 12px;
+  background-size: cover;
+}
+
+.ruleview-warning {
   background-image: url(chrome://devtools/skin/images/alert.svg);
-  background-size: cover;
+  background-position: 0.73px 0.4px;
   -moz-context-properties: fill;
   fill: var(--yellow-60);
 }
 
 .ruleview-unused-warning {
   background-image: url(chrome://devtools/skin/images/alerticon-unused.svg);
   background-color: var(--theme-sidebar-background);
   -moz-context-properties: fill, stroke;
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -77,22 +77,32 @@ strong {
   color: var(--theme-body-color);
   padding: 2px;
 }
 
 /* Tooltip: Inactive CSS tooltip */
 
 .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;
 }
 
 .devtools-tooltip-inactive-css .link {
   color: var(--theme-highlight-blue);
   cursor: pointer;
 }
 
@@ -105,17 +115,16 @@ strong {
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
 }
 
 .tooltip-container {
   display: none;
   position: fixed;
   z-index: 9999;
-  display: none;
   background: transparent;
   pointer-events: none;
   overflow: hidden;
   filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
 }
 
 .tooltip-xul-wrapper {
   -moz-appearance: none;
@@ -340,17 +349,17 @@ strong {
 }
 
 .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-bottom: 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;