Skip to content

Commit

Permalink
Add option of specifying media features for chrome (#388)
Browse files Browse the repository at this point in the history 
* Add option of specifying media features for chrome

* Update examples baseline

* Pass story parameters to tab options

* Pass story parameters to tab options

* Add back missing references
  • Loading branch information
@rafal2228
rafal2228 committed May 10, 2022
1 parent ebc27ae commit fe2aad9
Show file tree
Hide file tree
Showing 12 changed files with 129 additions and 51 deletions.
68 changes: 34 additions & 34 deletions docs/command-line-arguments.md
View file

Large diffs are not rendered by default.

29 changes: 15 additions & 14 deletions docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,17 +112,18 @@ module.exports = {

## `configurations`

| Name | Type | Description | Targets |
| ------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| **`target`** | _string_ | Target platform, possible values are `chrome.app`, `chrome.docker`, `chrome.aws-lambda`, `ios.simulator`, `android.emulator`. | All |
| **`skipStories`** | _string_ | **DEPRECATED** Same as `loki.skipStories`, but applied to only this configuration. | All |
| **`storiesFilter`** | _string_ | Same as `loki.storiesFilter`, but applied to only this configuration. | All |
| **`chromeSelector`** | _string_ | Same as `loki.chromeSelector`, but applied to only this configuration. | `chrome.*` |
| **`preset`** | _string_ | Predefined bundled configuration, possible values are `Retina Macbook Pro 15`, `iPhone 7`, `iPhone 5`, `Google Pixel`, `A4 Paper`, and `US Letter Paper`. | `chrome.*` |
| **`userAgent`** | _string_ | Custom user agent. | `chrome.*` |
| **`width`** | _integer_ | Browser viewport width. | `chrome.*` |
| **`height`** | _integer_ | Browser viewport height. | `chrome.*` |
| **`disableAutomaticViewportHeight`** | _boolean_ | If the content goes below the viewport do not increase the height so that it fits. | `chrome.*` |
| **`deviceScaleFactor`** | _integer_ | Browser pixel density multiple, use `2` for retina, not supported in docker. | `chrome.app` |
| **`mobile`** | _boolean_ | Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more. | `chrome.*` |
| **`media`** | _string_ | Emulates the given media for CSS media queries. | _None_ |
| Name | Type | Description | Targets |
| ------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| **`target`** | _string_ | Target platform, possible values are `chrome.app`, `chrome.docker`, `chrome.aws-lambda`, `ios.simulator`, `android.emulator`. | All |
| **`skipStories`** | _string_ | **DEPRECATED** Same as `loki.skipStories`, but applied to only this configuration. | All |
| **`storiesFilter`** | _string_ | Same as `loki.storiesFilter`, but applied to only this configuration. | All |
| **`chromeSelector`** | _string_ | Same as `loki.chromeSelector`, but applied to only this configuration. | `chrome.*` |
| **`preset`** | _string_ | Predefined bundled configuration, possible values are `Retina Macbook Pro 15`, `Retina Macbook Pro 15 Dark Mode`, `iPhone 7`, `iPhone 7 Dark Mode`, `iPhone 5`, `iPhone 5 Dark Mode`, `Google Pixel`, `Google Pixel Dark Mode`, `A4 Paper`, and `US Letter Paper`. | `chrome.*` |
| **`userAgent`** | _string_ | Custom user agent. | `chrome.*` |
| **`width`** | _integer_ | Browser viewport width. | `chrome.*` |
| **`height`** | _integer_ | Browser viewport height. | `chrome.*` |
| **`disableAutomaticViewportHeight`** | _boolean_ | If the content goes below the viewport do not increase the height so that it fits. | `chrome.*` |
| **`deviceScaleFactor`** | _integer_ | Browser pixel density multiple, use `2` for retina, not supported in docker. | `chrome.app` |
| **`mobile`** | _boolean_ | Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more. | `chrome.*` |
| **`media`** | _string_ | Emulates the given media for CSS media queries. | _None_ |
| **`features`** | _array_ | Emulates the given features for CSS media queries. See [setEmulatedMedia docs](https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setEmulatedMedia) | `chrome.*` |
Binary file added examples/react/.loki/reference/chrome_a4_Media_with_dark_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/.loki/reference/chrome_a4_Media_with_light_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/.loki/reference/chrome_iphone7_Media_with_dark_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/.loki/reference/chrome_iphone7_Media_with_light_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/.loki/reference/chrome_laptop_Media_with_dark_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/react/.loki/reference/chrome_laptop_Media_with_light_scheme_queries.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions examples/react/src/api/Media.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,25 @@ export default {
export const MediaAwareComponent = () => (
<div className="MediaAwareComponent" />
);

MediaAwareComponent.storyName = 'with media queries';

export const LightSchemeComponent = () => (
<div className="FeaturesAwareComponent" />
);

LightSchemeComponent.parameters = {
loki: { features: [{ name: 'prefers-color-scheme', value: 'light' }] },
};

LightSchemeComponent.storyName = 'with light scheme queries';

export const DarkSchemeComponent = () => (
<div className="FeaturesAwareComponent" />
);

DarkSchemeComponent.parameters = {
loki: { features: [{ name: 'prefers-color-scheme', value: 'dark' }] },
};

DarkSchemeComponent.storyName = 'with dark scheme queries';
12 changes: 12 additions & 0 deletions examples/react/src/api/MediaAwareComponent.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,15 @@
content: 'Media: print';
}
}

@media (prefers-color-scheme: light) {
.FeaturesAwareComponent:before {
content: 'Features: prefers-color-scheme:light';
}
}

@media (prefers-color-scheme: dark) {
.FeaturesAwareComponent:before {
content: 'Features: prefers-color-scheme:dark';
}
}
18 changes: 15 additions & 3 deletions packages/target-chrome-core/src/create-chrome-target.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,19 @@ function createChromeTarget(
await Network.clearBrowserCookies();
}
await Emulation.setDeviceMetricsOverride(deviceMetrics);
if (options.media) {
await Emulation.setEmulatedMedia({ media: options.media });

if (options.media || options.features) {
const emulated = {};

if (options.media) {
emulated.media = options.media;
}

if (options.features) {
emulated.features = options.features;
}

await Emulation.setEmulatedMedia(emulated);
}

const pendingRequestURLMap = {};
Expand Down Expand Up @@ -376,7 +387,8 @@ function createChromeTarget(
media: options.chromeEmulatedMedia,
fetchFailIgnore: options.fetchFailIgnore,
},
configuration
configuration,
parameters.loki || {}
);
if (configuration.preset) {
if (!presets[configuration.preset]) {
Expand Down
32 changes: 32 additions & 0 deletions packages/target-chrome-core/src/presets.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,38 @@
"deviceScaleFactor": 2,
"mobile": false
},
"Retina Macbook Pro 15 Dark Mode": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36",
"width": 1440,
"height": 900,
"deviceScaleFactor": 2,
"mobile": false,
"features": [{ "name": "prefers-color-scheme", "value": "dark" }]
},
"iPhone 7 Dark Mode": {
"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Version/10.0 Mobile/14D27 Safari/602.1",
"width": 375,
"height": 667,
"deviceScaleFactor": 2,
"mobile": false,
"features": [{ "name": "prefers-color-scheme", "value": "dark" }]
},
"iPhone 5 Dark Mode": {
"userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3",
"width": 320,
"height": 568,
"deviceScaleFactor": 2,
"mobile": false,
"features": [{ "name": "prefers-color-scheme", "value": "dark" }]
},
"Google Pixel Dark Mode": {
"userAgent": "Mozilla/5.0 (Linux; Android 7.1.1; Pixel Build/NMF26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36",
"width": 360,
"height": 640,
"deviceScaleFactor": 2,
"mobile": false,
"features": [{ "name": "prefers-color-scheme", "value": "dark" }]
},
"A4 Paper": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36",
"width": 595,
Expand Down

0 comments on commit fe2aad9

Please sign in to comment.