Bug 1688942 - Fix newtabExperience focus highlights. r=prathiksha,JulianWels, a=pascalc

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

Author: Erica Wright

browser/components/newtab/content-src/components/Base/_Base.scss

@@ -157,7 +157,7 @@ main {
 .personalize-button {
   font-size: 12px;
   font-weight: 600;
-  border: 1px solid transparent;
+  border: 0;
   border-radius: 4px;
   background-color: var(--newtab-background-button-color);
   color: var(--newtab-background-button-text-color);
@@ -174,8 +174,6 @@ main {
   }
 
   &:focus-visible {
-    border-color: var(--newtab-focus-border);
-    outline: 0;
-    box-shadow: 0 0 0 2px var(--newtab-focus-outline);
+    @include ds-focus-nte;
   }
 }

browser/components/newtab/content-src/components/Card/_Card.scss

@@ -1,7 +1,20 @@
+// Special styling for the New Tab Experience styles,
+// This is to be incorporated once the styles are made permanent
 .outer-wrapper.newtab-experience {
   .card-outer {
     border-radius: $border-radius-new;
 
+    &:is(:focus):not(.placeholder) {
+      @include ds-focus-nte;
+
+      transition: none;
+    }
+
+    &:hover {
+      box-shadow: none;
+      transition: none;
+    }
+
     .card {
       box-shadow: 0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow);
       border-radius: $border-radius-new;
@@ -10,6 +23,23 @@
     .card-preview-image-outer {
       border-radius: $border-radius-new $border-radius-new 0 0;
     }
+
+    // Temporary fix to have the context button focus blend in with other New Tab Experience context menu focus
+    .context-menu-button {
+      &:is(:active, :focus) {
+        outline: 0;
+        fill: var(--newtab-primary-action-background);
+        border: 1px solid var(--newtab-primary-action-background);
+      }
+    }
+
+    > a {
+      &:is(:focus) {
+        .card {
+          @include ds-focus-nte;
+        }
+      }
+    }
   }
 }
 

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -1,6 +1,8 @@
 $col4-header-line-height: 20;
 $col4-header-font-size: 14;
 
+// Special styling for the New Tab Experience styles,
+// This is to be incorporated once the styles are made permanent
 .outer-wrapper.newtab-experience {
   .ds-card-grid {
     &.ds-card-grid-border {
@@ -15,9 +17,8 @@ $col4-header-font-size: 14;
     }
 
     .ds-card-link:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--newtab-focus-outline);
-      border: 1px solid var(--newtab-focus-border);
+      @include ds-focus-nte;
+      transition: none;
       border-radius: $border-radius-new;
     }
   }

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -280,3 +280,34 @@ $excerpt-line-height: 20;
     margin: 0;
   }
 }
+
+// Special styling for the New Tab Experience styles,
+// This is to be incorporated once the styles are made permanent
+.outer-wrapper.newtab-experience {
+  .ds-card {
+    // Temporary fix to have the context button focus blend in with other New Tab Experience context menu focus
+    .context-menu-button {
+      &:is(:active, :focus) {
+        outline: 0;
+        fill: var(--newtab-primary-action-background);
+        border: 1px solid var(--newtab-primary-action-background);
+      }
+    }
+
+    .ds-card-link {
+      &:focus {
+        @include ds-focus-nte;
+
+        transition: none;
+
+        header {
+          @include dark-theme-only {
+            color: $blue-40;
+          }
+
+          color: $blue-60;
+        }
+      }
+    }
+  }
+}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss

@@ -36,12 +36,8 @@
     // This is the override layer.
     .top-sites {
       .top-site-outer {
-        .top-site-inner > a:is(.active, :focus) .top-site-inner {
-          @include ds-fade-in;
-
-          @include dark-theme-only {
-            @include ds-fade-in($blue-40-40);
-          }
+        .top-site-inner > a:is(.active, :focus) .tile {
+          @include ds-focus-nte;
         }
 
         .top-site-inner > a:is(:hover) .top-site-inner {

browser/components/newtab/content-src/components/TopSites/_TopSites.scss

@@ -119,7 +119,6 @@ $letter-fallback-color: $white;
     font-weight: 200;
     justify-content: center;
     text-transform: uppercase; // sass-lint:disable-line no-disallowed-properties
-    transition: box-shadow $hover-transition-duration;
 
     .icon-wrapper {
       border-radius: 4px;
@@ -569,6 +568,7 @@ $letter-fallback-color: $white;
       .tile {
         height: $top-sites-size;
         width: $top-sites-size;
+        transition: box-shadow $hover-transition-duration;
       }
 
       .top-site-icon {
@@ -687,7 +687,6 @@ $letter-fallback-color: $white;
         box-shadow: $inner-box-shadow-nte, $tile-shadow-second;
         background-color: var(--newtab-topsites-background-color);
         justify-content: center;
-        transition: box-shadow $hover-transition-duration;
         margin: 0 auto;
         height: $top-sites-size-nte;
         width: $top-sites-size-nte;
@@ -706,8 +705,7 @@ $letter-fallback-color: $white;
         .sponsored-label {
           font-size: 12px;
         }
-    }
-
+      }
 
       .default-icon,
       .search-topsite {

browser/components/newtab/content-src/styles/_theme.scss

@@ -87,6 +87,7 @@ body {
   --newtab-topsites-icon-shadow: inset #{$inner-box-shadow};
   --newtab-topsites-label-color: inherit;
   --newtab-topsites-outer-card-hover: #{$newtab-card-hover-color};
+  --newtab-topsites-context-menu-hover: #{$newtab-card-hover-color};
 
   // Cards
   --newtab-card-active-outline-color: #{$grey-30};
@@ -188,6 +189,7 @@ body {
     --newtab-topsites-icon-shadow: none;
     --newtab-topsites-label-color: #{$grey-10-80};
     --newtab-topsites-outer-card-hover: #{$newtab-card-darktheme-hover-color};
+    --newtab-topsites-context-menu-hover: #{$newtab-card-darktheme-hover-color};
 
     // Cards
     --newtab-card-active-outline-color: #{$grey-60};

browser/components/newtab/content-src/styles/_variables.scss

@@ -225,21 +225,33 @@ $customize-menu-border-tint: 1px solid $newtab-card-tint;
   transition: box-shadow 150ms;
 }
 
+@mixin ds-focus-nte {
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
+}
+
 @mixin context-menu-button-newtab-experience {
   .context-menu-button {
     background-image: url('chrome://global/skin/icons/more.svg');
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     fill: var(--newtab-icon-primary-color);
+    -moz-context-properties: fill;
     height: 20px;
+    width: 20px;
     inset-inline-end: -9px;
     opacity: 0;
     position: absolute;
     top: -20px;
     transition: opacity 200ms;
 
     &:is(:active, :focus) {
+      outline: 0;
       opacity: 1;
+      background-color: var(--newtab-topsites-context-menu-hover);
+      fill: var(--newtab-primary-action-background);
     }
   }
 }

browser/components/newtab/css/activity-stream-linux.css

@@ -76,6 +76,7 @@ body {
   --newtab-topsites-icon-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
   --newtab-topsites-label-color: inherit;
   --newtab-topsites-outer-card-hover: rgba(0, 0, 0, 0.05);
+  --newtab-topsites-context-menu-hover: rgba(0, 0, 0, 0.05);
   --newtab-card-active-outline-color: #D7D7DB;
   --newtab-card-background-color: #FFF;
   --newtab-card-hairline-color: rgba(0, 0, 0, 0.1);
@@ -156,6 +157,7 @@ body {
     --newtab-topsites-icon-shadow: none;
     --newtab-topsites-label-color: rgba(249, 249, 250, 0.8);
     --newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1);
+    --newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1);
     --newtab-card-active-outline-color: #4A4A4F;
     --newtab-card-background-color: #38383D;
     --newtab-card-hairline-color: rgba(249, 249, 250, 0.1);
@@ -521,7 +523,7 @@ main {
 .personalize-button {
   font-size: 12px;
   font-weight: 600;
-  border: 1px solid transparent;
+  border: 0;
   border-radius: 4px;
   background-color: var(--newtab-background-button-color);
   color: var(--newtab-background-button-text-color);
@@ -533,9 +535,9 @@ main {
   .personalize-button:active {
     background-color: var(--newtab-background-button-active-color); }
   .personalize-button:focus-visible {
-    border-color: var(--newtab-focus-border);
+    border: 0;
     outline: 0;
-    box-shadow: 0 0 0 2px var(--newtab-focus-outline); }
+    box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); }
 
 .as-error-fallback {
   align-items: center;
@@ -637,8 +639,7 @@ main {
     font-size: 32px;
     font-weight: 200;
     justify-content: center;
-    text-transform: uppercase;
-    transition: box-shadow 150ms; }
+    text-transform: uppercase; }
     .top-site-outer .tile .icon-wrapper {
       border-radius: 4px;
       width: 48px;
@@ -963,7 +964,8 @@ main {
 
 .outer-wrapper:not(.newtab-experience) .top-site-outer .tile {
   height: 96px;
-  width: 96px; }
+  width: 96px;
+  transition: box-shadow 150ms; }
 
 .outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon {
   box-shadow: var(--newtab-topsites-icon-shadow); }
@@ -1038,24 +1040,29 @@ main {
   .outer-wrapper.newtab-experience .top-site-outer .context-menu-button {
     background-image: url("chrome://global/skin/icons/more.svg");
     border: 0;
+    border-radius: 4px;
     cursor: pointer;
     fill: var(--newtab-icon-primary-color);
+    -moz-context-properties: fill;
     height: 20px;
+    width: 20px;
     inset-inline-end: -9px;
     opacity: 0;
     position: absolute;
     top: -20px;
     transition: opacity 200ms; }
     .outer-wrapper.newtab-experience .top-site-outer .context-menu-button:is(:active, :focus) {
-      opacity: 1; }
+      outline: 0;
+      opacity: 1;
+      background-color: var(--newtab-topsites-context-menu-hover);
+      fill: var(--newtab-primary-action-background); }
   .outer-wrapper.newtab-experience .top-site-outer .edit-button {
     background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); }
   .outer-wrapper.newtab-experience .top-site-outer .tile {
     border-radius: 8px;
     box-shadow: 0 3px 8px var(--newtab-inner-box-shadow-color-nte), 0 0 2px var(--newtab-tile-shadow-secondary);
     background-color: var(--newtab-topsites-background-color);
     justify-content: center;
-    transition: box-shadow 150ms;
     margin: 0 auto;
     height: 80px;
     width: 80px; }
@@ -1874,11 +1881,27 @@ main {
 
 .outer-wrapper.newtab-experience .card-outer {
   border-radius: 8px; }
+  .outer-wrapper.newtab-experience .card-outer:is(:focus):not(.placeholder) {
+    border: 0;
+    outline: 0;
+    box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
+    transition: none; }
+  .outer-wrapper.newtab-experience .card-outer:hover {
+    box-shadow: none;
+    transition: none; }
   .outer-wrapper.newtab-experience .card-outer .card {
     box-shadow: 0 3px 8px var(--newtab-card-first-shadow), 0 0 2px var(--newtab-card-second-shadow);
     border-radius: 8px; }
   .outer-wrapper.newtab-experience .card-outer .card-preview-image-outer {
     border-radius: 8px 8px 0 0; }
+  .outer-wrapper.newtab-experience .card-outer .context-menu-button:is(:active, :focus) {
+    outline: 0;
+    fill: var(--newtab-primary-action-background);
+    border: 1px solid var(--newtab-primary-action-background); }
+  .outer-wrapper.newtab-experience .card-outer > a:is(:focus) .card {
+    border: 0;
+    outline: 0;
+    box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); }
 
 .outer-wrapper:not(.newtab-experience) .card-outer:is(:hover, :focus, .active):not(.placeholder) {
   box-shadow: 0 0 0 5px var(--newtab-card-active-outline-color);
@@ -2509,9 +2532,10 @@ main {
     border-radius: 8px 8px 0 0; }
 
 .outer-wrapper.newtab-experience .ds-card-grid .ds-card-link:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--newtab-focus-outline);
-  border: 1px solid var(--newtab-focus-border);
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
+  transition: none;
   border-radius: 8px; }
 
 .ds-card-grid {
@@ -3179,16 +3203,10 @@ main {
 .outer-wrapper:not(.newtab-experience) .ds-top-sites .top-sites .top-sites-list {
   margin: 0 -12px; }
 
-.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .top-site-inner {
-  box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3);
-  transition: box-shadow 150ms;
-  border-radius: 4px;
-  outline: none; }
-  [lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .top-site-inner {
-    box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4);
-    transition: box-shadow 150ms;
-    border-radius: 4px;
-    outline: none; }
+.outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); }
 
 .outer-wrapper.newtab-experience .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
   box-shadow: 0 0 0 5px #D7D7DB;
@@ -3526,6 +3544,21 @@ main {
     [lwt-newtab-brighttext] .ds-card p {
       color: #F9F9FA; }
 
+.outer-wrapper.newtab-experience .ds-card .context-menu-button:is(:active, :focus) {
+  outline: 0;
+  fill: var(--newtab-primary-action-background);
+  border: 1px solid var(--newtab-primary-action-background); }
+
+.outer-wrapper.newtab-experience .ds-card .ds-card-link:focus {
+  border: 0;
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border);
+  transition: none; }
+  .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header {
+    color: #0060DF; }
+    [lwt-newtab-brighttext] .outer-wrapper.newtab-experience .ds-card .ds-card-link:focus header {
+      color: #45A1FF; }
+
 .story-footer {
   color: var(--newtab-text-secondary-color);
   inset-inline-start: 0;