Feature: Add "suggested" widths based on media queries

[Auspicus]

I noticed that Chrome Dev Tools now has a feature to show all media query widths for a page. It might be helpful to some users of Percy to have the it automatically detect these media query widths and take screenshots at these dimensions rather than providing manual widths.

https://github.com/chromium/chromium/blob/2ca8c5037021c9d2ecc00b787d58a31ed8fc8bcb/third_party/blink/renderer/devtools/front_end/emulation/MediaQueryInspector.js

The following code spits out the breakpoints from https://www.google.com

const puppeteer = require('puppeteer');

const run = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  const client = await page.target().createCDPSession();
  await client.send('DOM.enable');
  await client.send('CSS.enable');
  const mediaQueries = await client.send('CSS.getMediaQueries');
  let breakpoints = [];
  mediaQueries.medias.forEach(mediaQuery => {
    mediaQuery.mediaList.forEach(item => {
      item.expressions.forEach(expression => {
        if (['max-width', 'min-width'].indexOf(expression.feature) !== -1) {
          breakpoints.push({
            type: expression.feature,
            value: expression.value,
            unit: expression.unit
          });
        }
      });
    });
  });

  console.group('Breakpoints');
  breakpoints = breakpoints.sort((a, b) => a.value - b.value);
  console.log(breakpoints);
  console.groupEnd();

  // Using these Percy could determine where to take screenshots.
  // For example:
  const bpMinWidth = breakpoints.filter(bp => bp.type === 'min-width');
  const bpMaxWidth = breakpoints.filter(bp => bp.type === 'max-width');
  let firstMaxWidth = bpMaxWidth[0];
  let lastMinWidth = bpMinWidth[0];

  console.log(`Need to test below ${firstMaxWidth.value}${firstMaxWidth.unit}`);
  bpMaxWidth.forEach((bp, index, arr) => {
    if (index === 0) {
      return;
    }

    const previousBp = arr[index - 1];
    console.log(`Need to test between ${previousBp.value}${previousBp.unit} and ${bp.value}${bp.unit}`);
  });
  console.log(`Need to test above ${lastMinWidth.value}${lastMinWidth.unit}`);

  await browser.close();
};

run();

/*
Breakpoints
  [ { type: 'max-width', value: 400, unit: 'px' },
    { type: 'max-width', value: 580, unit: 'px' },
    { type: 'min-width', value: 1222, unit: 'px' } ]
Need to test below 400px
Need to test between 400px and 580px
Need to test above 1222px
*/