Show "Not available" tooltip. (#1134)

* Show "Not available" tooltip.

* lint-fix

Author: jrobbins

frontend/src/static/js/components/test/webstatus-overview-cells.test.ts

@@ -454,7 +454,7 @@ describe('renderDesktopAvailablity', () => {
     const div = el.querySelector('div');
     expect(div).to.exist;
     expect(div!.getAttribute('class')).to.equal('browser-impl-available');
-    expect(div!.innerHTML).to.not.include('disabled');
+    expect(div!.innerHTML).to.include('Since ');
     expect(div!.innerHTML).to.include('chrome_24x24.png');
   });
   it('renders a grayscale icon for an available feature', async () => {
@@ -475,7 +475,7 @@ describe('renderDesktopAvailablity', () => {
     const div = el.querySelector('div');
     expect(div).to.exist;
     expect(div!.getAttribute('class')).to.equal('browser-impl-unavailable');
-    expect(div!.innerHTML).to.include('disabled');
+    expect(div!.innerHTML).to.include('Not available');
     expect(div!.innerHTML).to.include('chrome_24x24.png');
   });
 });

frontend/src/static/js/components/webstatus-overview-cells.ts

@@ -281,8 +281,9 @@ export const renderDesktopAvailablity: CellRenderer = (
   return html`
     <div class="browser-impl-${browserImplStatus}">
       <sl-tooltip
-        ?disabled=${browserImplVersion === undefined}
-        content="Since version ${browserImplVersion}"
+        content=${browserImplVersion
+          ? `Since version ${browserImplVersion}`
+          : 'Not available'}
       >
         <img src="/public/img/${browser}_24x24.png" />
       </sl-tooltip>

frontend/src/static/js/components/webstatus-overview-table.ts

@@ -76,7 +76,7 @@ export class WebstatusOverviewTable extends LitElement {
         .baseline-date-block {
           padding-top: var(--content-padding-quarter);
         }
-        .browser-impl-unavailable {
+        .browser-impl-unavailable img {
           filter: grayscale(1);
           opacity: 50%;
         }