feat(styles): Convert the info panel into an door hanger with arrow

system-addon/content-src/components/Base/_Base.scss

@@ -37,7 +37,7 @@ main {
 
 .section-top-bar {
   height: 16px;
-  margin-bottom: 12px;
+  margin-bottom: 16px;
 }
 
 .section-title {

system-addon/content-src/components/Search/_Search.scss

@@ -7,7 +7,7 @@
   $search-glyph-image: url('chrome://browser/skin/search-glass.svg');
   $glyph-forward: url('chrome://browser/skin/forward.svg');
   $search-glyph-size: 16px;
-  $search-glyph-fill: rgba($grey-90, 0.4);
+  $search-glyph-fill: $grey-90-40;
   // This is positioned so it is visually (not metrically) centered. r=abenson
   $search-glyph-left-position: 12px;
 
@@ -60,12 +60,12 @@
 
     &:focus,
     &:hover {
-      background-color: rgba($grey-90, 0.1);
+      background-color: $grey-90-10;
       cursor: pointer;
     }
 
     &:active {
-      background-color: rgba($grey-90, 0.15);
+      background-color: $grey-90-20;
     }
 
     &:dir(rtl) {

system-addon/content-src/components/Sections/_Sections.scss

@@ -1,4 +1,5 @@
 .section-top-bar {
+  $info-active-color: $grey-90-10;
   position: relative;
 
   .section-info-option {
@@ -30,22 +31,46 @@
   }
 
   .info-option-icon[aria-expanded="true"] {
+    background-color: $info-active-color;
+    border-radius: 1px; // The shadow below makes this the desired larger radius
+    box-shadow: 0 0 0 5px $info-active-color;
     fill: $fill-primary;
   }
 
   .section-info-option .info-option {
+    $arrow-height: 10px;
+    $arrow-offset-end: 7px;
+    $arrow-width: 18px;
     visibility: hidden;
     opacity: 0;
     transition: visibility 0.2s, opacity 0.2s $photon-easing;
 
+    &::after,
     &::before {
       content: "";
-      display: block;
-      height: 32px;
-      left: 50%;
+      offset-inline-end: 0;
       position: absolute;
-      right: 0;
-      top: -32px;
+    }
+
+    &::before {
+      $before-height: 32px;
+      background-image: url(chrome://global/skin/arrow/panelarrow-vertical-themed.svg), url(chrome://global/skin/arrow/panelarrow-vertical@2x.png);
+      background-position: calc(100% - #{$arrow-offset-end}) bottom;
+      background-repeat: no-repeat;
+      background-size: $arrow-width $arrow-height;
+      height: $before-height;
+      top: -$before-height;
+      width: 43px;
+    }
+
+    &:dir(rtl)::before {
+      background-position-x: $arrow-offset-end;
+    }
+
+    &::after {
+      height: $arrow-height;
+      offset-inline-start: 0;
+      top: -$arrow-height;
     }
   }
 
@@ -65,7 +90,7 @@
     line-height: 120%;
     margin-inline-end: -9px;
     offset-inline-end: 0;
-    top: 20px;
+    top: 26px;
     width: 320px;
     padding: 24px;
     box-shadow: $shadow-secondary;

system-addon/content-src/components/TopSites/_TopSites.scss

@@ -262,13 +262,20 @@
 
 .edit-topsites-wrapper {
   .edit-topsites-button {
-    position: absolute;
-    offset-inline-end: 21px;
-    top: -2px;
-
+    border-right: $border-secondary;
+    line-height: 13px;
+    offset-inline-end: 24px;
     opacity: 0;
+    padding: 0 10px;
+    position: absolute;
+    top: 2px;
     transition: opacity 0.2s $photon-easing;
 
+    &:dir(rtl) {
+      border-left: $border-secondary;
+      border-right: 0;
+    }
+
     &:focus, &:active {
       opacity: 1;
     }

system-addon/content-src/styles/_variables.scss

@@ -1,4 +1,4 @@
-// Photon colors from http://design.firefox.com/photon/visual/color.html
+// Photon colors from http://design.firefox.com/photon/visuals/color.html
 $blue-50: #0A84FF;
 $blue-60: #0060DF;
 $grey-10: #F9F9FA;
@@ -11,6 +11,17 @@ $grey-90: #0C0C0D;
 $teal-70: #008EA4;
 $red-60: #D70022;
 
+// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
+$grey-90-10: rgba($grey-90, 0.1);
+$grey-90-20: rgba($grey-90, 0.2);
+$grey-90-30: rgba($grey-90, 0.3);
+$grey-90-40: rgba($grey-90, 0.4);
+$grey-90-50: rgba($grey-90, 0.5);
+$grey-90-60: rgba($grey-90, 0.6);
+$grey-90-70: rgba($grey-90, 0.7);
+$grey-90-80: rgba($grey-90, 0.8);
+$grey-90-90: rgba($grey-90, 0.9);
+
 // Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html
 $photon-easing: cubic-bezier(.07, .95, 0, 1);
 
@@ -19,20 +30,20 @@ $background-primary: $grey-10;
 $background-secondary: $grey-20;
 $border-primary: 1px solid $grey-40;
 $border-secondary: 1px solid $grey-30;
-$fill-primary: rgba($grey-90, 0.8);
-$fill-secondary: rgba($grey-90, 0.6);
+$fill-primary: $grey-90-80;
+$fill-secondary: $grey-90-60;
 $fill-tertiary: $grey-30;
 $input-primary: $blue-60;
 $input-secondary: $grey-10;
 $link-primary: $blue-60;
 $link-secondary: $teal-70;
 $shadow-primary: 0 0 0 5px $grey-30;
-$shadow-secondary: 0 1px 4px 0 rgba($grey-90, 0.1);
+$shadow-secondary: 0 1px 4px 0 $grey-90-10;
 $text-primary: $grey-90;
 $text-conditional: $grey-60;
 $text-secondary: $grey-50;
-$input-border: solid 1px rgba($grey-90, 0.20);
-$input-border-active: solid 1px rgba($grey-90, 0.40);
+$input-border: solid 1px $grey-90-20;
+$input-border-active: solid 1px $grey-90-40;
 $input-error-border: solid 1px $red-60;
 $input-error-boxshadow: 0 0 0 2px rgba($red-60, 0.35);
 
@@ -66,7 +77,7 @@ $card-text-line-height: 19px;
 $topic-margin-top: 12px;
 
 $context-menu-button-size: 27px;
-$context-menu-button-boxshadow: 0 2px rgba($grey-90, 0.1);
+$context-menu-button-boxshadow: 0 2px $grey-90-10;
 $context-menu-border-color: rgba(0, 0, 0, 0.2);
 $context-menu-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px $context-menu-border-color;
 $context-menu-font-size: 14px;