Remove browser selection control from chart panels

frontend/src/static/js/components/test/webstatus-stats-global-feature-count-chart-panel.test.ts

@@ -23,7 +23,6 @@ import {
   BrowserReleaseFeatureMetric,
   BrowsersParameter,
 } from '../../api/client.js';
-import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace';
 import {
   LineChartMetricData,
   WebstatusLineChartPanel,
@@ -195,26 +194,4 @@ describe('WebstatusStatsGlobalFeatureCountChartPanel', () => {
     );
     expect(options.hAxis?.viewWindow?.max).to.deep.equal(expectedEndDate);
   });
-
-  it('handles browser selection', async () => {
-    const dropdown = el.shadowRoot!.querySelector(
-      '#global-feature-support-browser-selector',
-    ) as SlMenu;
-    const menuItems = Array.from(dropdown.querySelectorAll('sl-menu-item'));
-
-    // Simulate selecting Chrome and Firefox
-    const chromeItem = menuItems.find(
-      item => item.value === 'chrome',
-    ) as SlMenuItem;
-    const firefoxItem = menuItems.find(
-      item => item.value === 'firefox',
-    ) as SlMenuItem;
-
-    if (chromeItem) chromeItem.click();
-    if (firefoxItem) firefoxItem.click();
-
-    await el.updateComplete;
-
-    expect(el.supportedBrowsers).to.deep.equal(['chrome', 'firefox']);
-  });
 });

frontend/src/static/js/components/test/webstatus-stats-missing-one-impl-chart-panel.test.ts

@@ -22,7 +22,6 @@ import {
   BrowserReleaseFeatureMetric,
   BrowsersParameter,
 } from '../../api/client.js';
-import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace';
 import {
   LineChartMetricData,
   WebstatusLineChartPanel,
@@ -75,8 +74,6 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
       BrowserReleaseFeatureMetric[]
     >([
       ['chrome', [{timestamp: '2024-01-01', count: 10}]],
-      // TODO(#1104) - Add edge back in when allow users to dynamically select the range.
-      // ['edge', [{timestamp: '2024-01-01', count: 8}]],
       ['firefox', [{timestamp: '2024-01-01', count: 9}]],
       ['safari', [{timestamp: '2024-01-01', count: 7}]],
     ]);
@@ -116,7 +113,6 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
 
     const expectedMap = new Map([
       ['chromium', [{timestamp: '2024-01-01', count: 10}]],
-      // ['edge', [{timestamp: '2024-01-01', count: 8}]],
       ['firefox', [{timestamp: '2024-01-01', count: 9}]],
       ['safari', [{timestamp: '2024-01-01', count: 7}]],
     ]);
@@ -126,36 +122,12 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
   it('generates chart options correctly', () => {
     const options = el.generateDisplayDataChartOptions();
     expect(options.vAxis?.title).to.equal('Number of features missing');
-    // Only browsers.
+    // Only browsers (except Edge).
     expect(options.colors).eql(['#FF0000', '#F48400', '#4285F4']);
-    // TODO(#1104) For now exclude edge.
-    // expect(options.colors).eql(['#FF0000', '#F48400', '#4285F4', '#0F9D58']);
     expect(options.hAxis?.viewWindow?.min).to.deep.equal(el.startDate);
     const expectedEndDate = new Date(
       el.endDate.getTime() + 1000 * 60 * 60 * 24,
     );
     expect(options.hAxis?.viewWindow?.max).to.deep.equal(expectedEndDate);
   });
-
-  it('handles browser selection', async () => {
-    const dropdown = el.shadowRoot!.querySelector(
-      '#missing-one-implementation-browser-selector',
-    ) as SlMenu;
-    const menuItems = Array.from(dropdown.querySelectorAll('sl-menu-item'));
-
-    // Simulate selecting Chrome and Firefox
-    const chromeItem = menuItems.find(
-      item => item.value === 'chrome',
-    ) as SlMenuItem;
-    const firefoxItem = menuItems.find(
-      item => item.value === 'firefox',
-    ) as SlMenuItem;
-
-    if (chromeItem) chromeItem.click();
-    if (firefoxItem) firefoxItem.click();
-
-    await el.updateComplete;
-
-    expect(el.supportedBrowsers).to.deep.equal(['chrome', 'firefox']);
-  });
 });

frontend/src/static/js/components/webstatus-feature-page.ts

@@ -21,7 +21,6 @@ import {customElement, state} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {type components} from 'webstatus.dev-backend';
-import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace/dist/shoelace.js';
 
 import {
   ALL_BROWSERS,
@@ -279,21 +278,6 @@ export class FeaturePage extends BaseChartsPage {
     });
   }
 
-  async handleBrowserSelection(event: Event) {
-    const menu = event.target as SlMenu;
-    const menuItemsArray: Array<SlMenuItem> = Array.from(menu.children).filter(
-      child => child instanceof SlMenuItem,
-    ) as Array<SlMenuItem>;
-
-    // Build the list of values of checked menu-items.
-    this.featureSupportBrowsers = menuItemsArray
-      .filter(menuItem => menuItem.checked)
-      .map(menuItem => menuItem.value) as BrowsersParameter[];
-    // Regenerate data and redraw.  We should instead just filter it.
-    await this._startFeatureSupportTask();
-    this.generateFeatureSupportChartOptions();
-  }
-
   createDataFromMap<T>(
     data: Map<string, T[]>,
     browsers: BrowsersParameter[],
@@ -820,32 +804,6 @@ export class FeaturePage extends BaseChartsPage {
         <div class="hbox">
           <div slot="header">Implementation progress</div>
           <div class="spacer"></div>
-          <div class="hbox wrap valign-items-end">
-            <sl-dropdown
-              style="display:none"
-              id="feature-support-browser-selector"
-              multiple
-              stay-open-on-select
-              .value="${this.featureSupportBrowsers.join(' ')}"
-            >
-              <sl-button slot="trigger">
-                <sl-icon slot="suffix" name="chevron-down"></sl-icon>
-                Browsers
-              </sl-button>
-              <sl-menu @sl-select=${this.handleBrowserSelection}>
-                <sl-menu-item type="checkbox" value="chrome"
-                  >Chrome</sl-menu-item
-                >
-                <sl-menu-item type="checkbox" value="edge">Edge</sl-menu-item>
-                <sl-menu-item type="checkbox" value="firefox"
-                  >Firefox</sl-menu-item
-                >
-                <sl-menu-item type="checkbox" value="safari"
-                  >Safari</sl-menu-item
-                >
-              </sl-menu>
-            </sl-dropdown>
-          </div>
         </div>
 
         <webstatus-gchart
@@ -873,26 +831,6 @@ export class FeaturePage extends BaseChartsPage {
         <div class="hbox">
           <div slot="header">Feature Usage</div>
           <div class="spacer"></div>
-          <div class="spacer"></div>
-          <div class="hbox wrap valign-items-end">
-            <sl-dropdown
-              style="display:none"
-              id="feature-usage-browser-selector"
-              multiple
-              stay-open-on-select
-              .value="${this.featureUsageBrowsers.join(' ')}"
-            >
-              <sl-button slot="trigger">
-                <sl-icon slot="suffix" name="chevron-down"></sl-icon>
-                Browsers
-              </sl-button>
-              <sl-menu @sl-select=${this.handleBrowserSelection}>
-                <sl-menu-item type="checkbox" value="chrome"
-                  >Chrome</sl-menu-item
-                >
-              </sl-menu>
-            </sl-dropdown>
-          </div>
         </div>
 
         <webstatus-gchart

frontend/src/static/js/components/webstatus-line-chart-panel.ts

@@ -148,16 +148,6 @@ export abstract class WebstatusLineChartPanel extends LitElement {
         .vbox {
           gap: var(--content-padding-large);
         }
-        /*  Make the dropdown menu button icon rotate when the menu is open,
-            so it looks like sl-select. */
-        sl-dropdown > sl-button > sl-icon {
-          rotate: 0deg;
-          transition: var(--sl-transition-medium) rotate ease;
-        }
-        sl-dropdown[open] > sl-button > sl-icon {
-          rotate: -180deg;
-          transition: var(--sl-transition-medium) rotate ease;
-        }
         sl-card {
           display: block;
           width: auto;

frontend/src/static/js/components/webstatus-stats-global-feature-count-chart-panel.ts

@@ -15,7 +15,7 @@
  */
 
 import {Task} from '@lit/task';
-import {TemplateResult, html} from 'lit';
+import {TemplateResult, html, nothing} from 'lit';
 import {
   LineChartMetricData,
   WebstatusLineChartPanel,
@@ -28,7 +28,6 @@ import {
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
 } from '../api/client.js';
-import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace';
 import {customElement, state} from 'lit/decorators.js';
 
 @customElement('webstatus-stats-global-feature-chart-panel')
@@ -127,40 +126,6 @@ export class WebstatusStatsGlobalFeatureCountChartPanel extends WebstatusLineCha
     return 'Global feature support';
   }
   renderControls(): TemplateResult {
-    return html`
-      <sl-dropdown
-        id="${this.getPanelID()}-browser-selector"
-        multiple
-        stay-open-on-select
-        .value="${this.supportedBrowsers.join(' ')}"
-      >
-        <sl-button slot="trigger">
-          <sl-icon slot="suffix" name="chevron-down"></sl-icon>
-          Browsers
-        </sl-button>
-        <sl-menu @sl-select=${this.handleBrowserSelection}>
-          <sl-menu-item type="checkbox" value="chrome">Chrome</sl-menu-item>
-          <sl-menu-item type="checkbox" value="edge">Edge</sl-menu-item>
-          <sl-menu-item type="checkbox" value="firefox">Firefox</sl-menu-item>
-          <sl-menu-item type="checkbox" value="safari">Safari</sl-menu-item>
-        </sl-menu>
-      </sl-dropdown>
-    `;
-  }
-
-  // TODO(#1104) - Consolidate this into a new common browser specific panel for charts only used on the stats page.
-  // Do not add it to the main base abstract class because that panel will be used for the feature detail page charts
-  // too. And those do not have browser dropdowns.
-  handleBrowserSelection(event: Event) {
-    const menu = event.target as SlMenu;
-    const menuItemsArray: Array<SlMenuItem> = Array.from(menu.children).filter(
-      child => child instanceof SlMenuItem,
-    ) as Array<SlMenuItem>;
-
-    // Build the list of values of checked menu-items.
-    this.supportedBrowsers = menuItemsArray
-      .filter(menuItem => menuItem.checked)
-      .map(menuItem => menuItem.value) as BrowsersParameter[];
-    // Regenerate data and redraw.  We should instead just filter it.
+    return html`${nothing}`;
   }
 }

frontend/src/static/js/components/webstatus-stats-missing-one-impl-chart-panel.ts

@@ -15,7 +15,7 @@
  */
 
 import {Task} from '@lit/task';
-import {TemplateResult, html} from 'lit';
+import {TemplateResult, html, nothing} from 'lit';
 import {
   LineChartMetricData,
   WebstatusLineChartPanel,
@@ -26,7 +26,6 @@ import {
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
 } from '../api/client.js';
-import {SlMenu, SlMenuItem} from '@shoelace-style/shoelace';
 import {customElement, state} from 'lit/decorators.js';
 
 @customElement('webstatus-stats-missing-one-impl-chart-panel')
@@ -122,42 +121,6 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
     return 'Features missing in only 1 browser';
   }
   renderControls(): TemplateResult {
-    return html`
-      <sl-dropdown
-        id="${this.getPanelID()}-browser-selector"
-        multiple
-        stay-open-on-select
-        .value="${this.supportedBrowsers.join(' ')}"
-      >
-        <sl-button slot="trigger">
-          <sl-icon slot="suffix" name="chevron-down"></sl-icon>
-          Browsers
-        </sl-button>
-        <sl-menu @sl-select=${this.handleBrowserSelection}>
-          <!-- The API still uses chrome as the browser. But change the text to Chromium -->
-          <sl-menu-item type="checkbox" value="chrome">Chromium</sl-menu-item>
-          <!-- For now, remove edge. Add back in once we add correct interaction in #1104-->
-          <!-- <sl-menu-item type="checkbox" value="edge">Edge</sl-menu-item> -->
-          <sl-menu-item type="checkbox" value="firefox">Firefox</sl-menu-item>
-          <sl-menu-item type="checkbox" value="safari">Safari</sl-menu-item>
-        </sl-menu>
-      </sl-dropdown>
-    `;
-  }
-
-  // TODO(#1104) - Consolidate this into a new common browser specific panel for charts only used on the stats page.
-  // Do not add it to the main base abstract class because that panel will be used for the feature detail page charts
-  // too. And those do not have browser dropdowns.
-  handleBrowserSelection(event: Event) {
-    const menu = event.target as SlMenu;
-    const menuItemsArray: Array<SlMenuItem> = Array.from(menu.children).filter(
-      child => child instanceof SlMenuItem,
-    ) as Array<SlMenuItem>;
-
-    // Build the list of values of checked menu-items.
-    this.supportedBrowsers = menuItemsArray
-      .filter(menuItem => menuItem.checked)
-      .map(menuItem => menuItem.value) as BrowsersParameter[];
-    // Regenerate data and redraw.  We should instead just filter it.
+    return html`${nothing}`;
   }
 }

frontend/src/static/js/components/webstatus-stats-page.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {type TemplateResult, html, CSSResultGroup, css, nothing} from 'lit';
+import {type TemplateResult, html, nothing} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {getFeaturesLaggingFlag} from '../utils/urls.js';
 import {BaseChartsPage} from './webstatus-base-charts-page.js';
@@ -26,23 +26,6 @@ import './webstatus-stats-missing-one-impl-chart-panel.js';
 export class StatsPage extends BaseChartsPage {
   // Change the default start date to Jan 1, 2020.
   override startDate: Date = new Date(2020, 0, 1);
-  static get styles(): CSSResultGroup {
-    return [
-      super.styles!,
-      css`
-        /*  Make the dropdown menu button icon rotate when the menu is open,
-            so it looks like sl-select. */
-        sl-dropdown > sl-button > sl-icon {
-          rotate: 0deg;
-          transition: var(--sl-transition-medium) rotate ease;
-        }
-        sl-dropdown[open] > sl-button > sl-icon {
-          rotate: -180deg;
-          transition: var(--sl-transition-medium) rotate ease;
-        }
-      `,
-    ];
-  }
   constructor() {
     super();
   }