Bug 1644361 - Changed WNP message layout to grid, to better manage content/icon width r=andreio
authoremcminn <emcminn@mozilla.com>
Fri, 12 Jun 2020 15:02:05 +0000
changeset 535491 6b65aedb21364a8eac153a6e81389ad391b430a3
parent 535490 1de589017a6b1235e436eaa88a9c71a95378ba13
child 535492 7d3bffbc7ad1a10db270809365ce3a17443c6566
push id37501
push usernbeleuzu@mozilla.com
push dateSat, 13 Jun 2020 03:21:52 +0000
treeherdermozilla-central@80b6f21783a3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersandreio
bugs1644361
milestone79.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 1644361 - Changed WNP message layout to grid, to better manage content/icon width r=andreio Differential Revision: https://phabricator.services.mozilla.com/D78942
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1932,16 +1932,21 @@ panelview:not([mainview]) #PanelUI-whats
   content: "";
   display: block;
   height: 1px;
   width: 104%;
   margin-inline-start: -2%;
   background: var(--panel-separator-color);
 }
 
+#PanelUI-whatsNew .has-icon::before {
+  /* the width of the icon + the grid margin */
+  width: calc(104% + 40px);
+}
+
 #PanelUI-whatsNew .whatsNew-message-date + .whatsNew-message-body::before {
   display: none;
 }
 
 #PanelUI-whatsNew .whatsNew-message-date {
   font-size: .85em;
   margin: -12px;
   margin-top: 0;
@@ -1963,63 +1968,68 @@ panelview:not([mainview]) #PanelUI-whats
 
 #protections-popup-message .whatsNew-message-body {
   /* -10px to compensate for the margin on the container. We can't get rid of that
      because it helps position the background image. */
   margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
 }
 
 #PanelUI-whatsNew .whatsNew-message-body.has-icon {
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: auto 32px;
+  grid-template-rows: 0;
+  grid-gap: 0 8px;
 }
 
 #PanelUI-whatsNew .whatsNew-message-icon {
-  inset-inline-end: 6px;
   height: 32px;
-  position: absolute;
-  top: 24px;
   width: 32px;
+  margin: 14px auto;
+  display: grid;
+  grid-column-start: 2; 
 }
 
 #PanelUI-whatsNew .whatsNew-message-title,
 #protections-popup-message .whatsNew-message-title {
-  display: block;
-  padding-inline-end: 46px;
+  display: grid;
   font-size: 1.3em;
   font-weight: 600;
   line-height: 1.4em;
   margin: 14px 0 0;
+  grid-column-start: 1; 
 }
 
 #PanelUI-whatsNew .whatsNew-message-title-large {
   font-size: 2.1em;
   margin: 2px 0;
   font-weight: 300;
+  grid-column-start: 1;
 }
 
 #PanelUI-whatsNew .whatsNew-message-subtitle {
   margin: 2px 0;
   font-size: .8em;
   color: #949494;
   font-weight: normal;
+  grid-column-start: 1;
 }
 
 #PanelUI-whatsNew .whatsNew-message-content {
-  display: block;
+  display: grid;
   margin: 5px 0 10px;
+  grid-column-start: 1;
 }
 
 #PanelUI-whatsNew .text-link {
   background: none;
   border: 0;
   color: #45a1ff;
   cursor: pointer;
   font-size: .9em;
+  grid-column-start: 1;
 }
 
 #protections-popup-message .text-link {
   color: white;
   font-weight: 600;
 }
 
 #protections-popup-message .text-link:hover {