FF87 Color scheme simulation updates (#2562)

* Experimental features: remove color-scheme-simulation pref

* Cross link the media query to the developer tools

* Initial work on Examine/edit CSS page

* Fix up images and docs

* Add release note for FF87

* Also add see also link to page inspector tools

* Compressed images

* Fixes following feedback

* updates following bcd feedback

* small correction

Co-authored-by: Chris Mills <cmills@mozilla.com>

files/en-us/mozilla/firefox/experimental_features/index.html

@@ -1656,46 +1656,6 @@ <h2 id="Developer_tools">Developer tools</h2>
 
 <p>Mozilla's developer tools are constantly evolving. We experiment with new ideas, add new features, and test them on the Nightly and Developer Edition channels before letting them go through to beta and release. The features below are the current crop of experimental developer tool features.</p>
 
-<h4 id="Color_scheme_simulation">Color scheme simulation</h4>
-
-<p>Adds an option to simulate different color schemes allowing to test {{cssxref("@media/prefers-color-scheme", "@prefers-color-scheme")}} media queries. Using this media query lets your style sheet specify whether it prefers a light or dark user interface. This feature lets you test your code without having to change settings in your browser (or operating system, if the browser follows a system-wide color scheme setting). (See {{bug(1550804)}} and {{bug(1137699)}} for more details.)</p>
-
-<table class="standard-table" style="max-width: 42rem;">
- <thead>
-  <tr>
-   <th scope="col" style="vertical-align: bottom;">Release channel</th>
-   <th scope="col" style="vertical-align: bottom;">Version added</th>
-   <th scope="col" style="vertical-align: bottom;">Enabled by default?</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Nightly</th>
-   <td>72</td>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Developer Edition</th>
-   <td>72</td>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Beta</th>
-   <td>72</td>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Release</th>
-   <td>72</td>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Preference name</th>
-   <th colspan="2"><code>devtools.inspector.color-scheme-simulation.enabled</code></th>
-  </tr>
- </tbody>
-</table>
-
 <h4 id="Execution_context_selector">Execution context selector</h4>
 
 <p>This feature displays a button on the console's command line that lets you change the context in which the expression you enter will be executed. (See {{bug(1605154)}} and {{bug(1605153)}} for more details.)</p>

files/en-us/mozilla/firefox/releases/87/index.html

@@ -15,9 +15,8 @@ <h2 id="Changes_for_web_developers">Changes for web developers</h2>
 
 <h3 id="Developer_Tools">Developer Tools</h3>
 
-
-
 <ul>
+  <li>Developers can now use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme">Page Inspector</a> to simulate {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} media queries, without having to change the operating system to light or dark mode ({{bug(1679408)}} and {{bug(1692272)}}).</li>
   <li>Developers can now use the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#viewing_common_pseudo-classes">Page Inspector</a> to toggle the {{cssxref(":target")}} pseudo-class for the currently selected element (in addition to the pseudo-classes that were previously supported: {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}}, {{cssxref(":focus-within")}}, {{cssxref(":focus-visible")}}, and {{cssxref(":visited")}}). ({{bug(1689899)}}).</li>
   <li>Firefox <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#rule_display">Page Inspector</a> improvements and bug fixes related to inactive CSS rules:
     <ul>

files/en-us/tools/page_inspector/how_to/examine_and_edit_css/index.html

@@ -14,15 +14,15 @@ <h2 id="Examine_CSS_rules">Examine CSS rules</h2>
 
 <p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#rules_view">Rules view</a> lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p>
 
-<p><img alt="Rules view panel as of Firefox 72" src="rules_view_fx_72.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
+<p><img alt="Rules view panel as of Firefox 87" src="rules_view_ff_87.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
 
-<p>The four buttons on the right top of the rules view allow you to change the display of certain CSS and rules view features. You can:</p>
+<p>The six buttons on the right top of the rules view allow you to change the display of certain CSS and rules view features. You can:</p>
 
 <ul>
  <li><a href="#viewing_common_pseudo-classes">toggle pseudo-classes</a>;</li>
  <li><a href="#viewing_and_changing_classes_on_an_element">toggle classes</a>;</li>
  <li>add a new rule;</li>
- <li>change the display based on the color scheme preference (as of Firefox 72, you must set <code>devtools.inspector.color-scheme-simulation.enabled</code> to <strong>true</strong> in the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> to enable this feature);</li>
+ <li>change the display based on <a href="#view_media_rules_for_prefers-color-scheme"><code>prefers-color-scheme</code> media rules</a>.</li>
  <li>change the display based on <a href="#view_media_rules_for_print">print media rules</a>.</li>
 </ul>
 
@@ -38,8 +38,9 @@ <h3 id="Browser_compat_warnings">Browser compat warnings</h3>
 
 <p>CSS properties have varied level of support across different browsers. From Firefox 81, compatibility tooltips may be displayed next to any CSS properties that have known compatibility issues, as shown below.</p>
 
-<div class="note">
-<p>This feature is enabled from Firefox 81 by setting the preference <code>devtools.inspector.ruleview.inline-compatibility-warning.enabled</code> to <code>true</code> (open <code>about.config</code> in the URL bar to view/set Firefox preferences).</p>
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>This feature is enabled from Firefox 81 by setting the preference <code>devtools.inspector.ruleview.inline-compatibility-warning.enabled</code> to <code>true</code> (open <code>about.config</code> in the URL bar to view/set Firefox preferences).</p>
 </div>
 
 <p><img alt="Tooltip displayed next to CSS element. Hover to find out browsers with compatibility issues." src="firefox_compatibility_tootips.jpg"></p>
@@ -96,8 +97,9 @@ <h3 id="Filtering_rules">Filtering rules</h3>
 
 <p><img alt="" src="filtered_rules.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;">Click the "X" at the end of the search box to remove the filter.</p>
 
-<div class="note">
-<p>While in the Rules view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>While in the Rules view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
 </div>
 
 <p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
@@ -196,15 +198,9 @@ <h3 id="View_media_rules_for_Print">View @media rules for Print</h3>
 
 <p>When on, any rules defined for printing the page will be displayed similar to the "Print Preview" mode that many word processing applications provide.</p>
 
-<h3 id="View_media_rules_for_color-scheme-preference">View @media rules for color-scheme-preference</h3>
+<h3 id="View_media_rules_for_prefers-color-scheme">View @media rules for prefers-color-scheme</h3>
 
-<div class="notecard note">
-<p>As of Firefox 72, you must set <code>devtools.inspector.color-scheme-simulation.enabled</code> to <strong>true</strong> in the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> to enable this feature.</p>
-
-<p>If you have set <code>privacy.resistFingerprinting</code> to <strong>true</strong>, <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme"> </a>preference is overridden to <code>light</code>. In order to use this simulator, you must set <code>privacy.resistFingerprinting</code> to <strong>false</strong>.</p>
-</div>
-
-<p>You can use the color scheme simulator to see how the styles display based on the <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> media query, if it is defined for the page. The color scheme simulator has four states, which you can cycle through by clicking the button repeatedly:</p>
+<p>The color scheme simulator buttons can be used to test the rendering of styles based on the <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> media query (if any are defined for the page). There are two buttons, which enable the light and dark preference, respectively. Selecting either button deselects the other. If neither button is selected then the simulator does not set a preference, and the browser renders using the default feature value set by the operating system.</p>
 
 <table class="standard-table">
  <thead>
@@ -218,22 +214,33 @@ <h3 id="View_media_rules_for_color-scheme-preference">View @media rules for colo
   <tr>
    <td><img alt="" src="color_scheme_null.png" style="border-style: solid; border-width: 1px;"></td>
    <td>null</td>
-   <td>The <code>prefers-color-scheme</code> media feature is not defined.</td>
+   <td>The <code>prefers-color-scheme</code> media feature is not set by the simulator.
+  </td>
   </tr>
   <tr>
    <td><img alt="" src="color_scheme_light.png" style="border-style: solid; border-width: 1px;"></td>
    <td><code>light</code></td>
-   <td>The user prefers a light interface.</td>
+   <td>The <code>prefers-color-scheme</code> media feature is set to <code>light</code>.</td>
   </tr>
   <tr>
-   <td><img alt="" src="color_scheme_dark.png" style="border-style: solid; border-width: 0px;"></td>
+   <td><img alt="" src="color_scheme_dark.png" style="border-style: solid; border-width: 1px;"></td>
    <td><code>dark</code></td>
-   <td>The user prefers a dark interface.</td>
+   <td>The <code>prefers-color-scheme</code> media feature is set to <code>dark</code>.</td>
   </tr>
  </tbody>
 </table>
 
-<p>Note that the first three states of the button may be difficult to distinguish visually. They typically produce a similar effect.</p>
+<p>Note that if the operating system mode is set to a particular mode, then simulating that mode will not change page rendering (i.e. simulating dark mode when the operating system is using dark mode will not change the display).</p>
+
+<div class="notecard note">
+  <h4>Note</h4> 
+  <p>If <code>privacy.resistFingerprinting</code> has been set <strong>true</strong>, the <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> preference is forced to <code>light</code>. You must set <code>privacy.resistFingerprinting</code> to <strong>false</strong> in order to use this feature.</p>
+</div>
+
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>Before Firefox 87 this feature is behind the preference <code>devtools.inspector.color-scheme-simulation.enabled</code>.</p>
+</div>
 
 <h2 id="Examine_computed_CSS">Examine computed CSS</h2>
 
@@ -251,8 +258,9 @@ <h2 id="Examine_computed_CSS">Examine computed CSS</h2>
 
 <p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.</p>
 
-<div class="note">
-<p>While in the Computed view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>While in the Computed view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
 </div>
 
 <h2 id="Edit_rules">Edit rules</h2>
@@ -299,9 +307,10 @@ <h3 id="Track_changes">Track changes</h3>
 <p><img alt="" src="track_changes.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
 
 <div class="notecard note">
-<p><strong>Note:</strong> You can view changes made to the rules view only. If you edit the CSS using the Style Editor, the changes will not be shown in the changes pane.</p>
-
-<p>Also remember, as noted above, that changes you make to the CSS rules are temporary and will be reset if you reload the page.</p>
+  <h4>Note</h4>
+  <p>You can view changes made to the rules view only. If you edit the CSS using the Style Editor, the changes will not be shown in the changes pane.</p>
+
+  <p>Also remember, as noted above, that changes you make to the CSS rules are temporary and will be reset if you reload the page.</p>
 </div>
 
 <p>If you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. Right-click on the changes panel and select <strong>Copy Rule</strong> from the context menu.</p>

files/en-us/web/css/@media/prefers-color-scheme/index.html

@@ -9,20 +9,17 @@
   - media feature
   - prefers-color-scheme
 ---
-<div class="notecard note">
-<p>If you have set <code>privacy.resistFingerprinting</code> to <strong>true</strong>, {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} preference is overridden to <code>light</code>.<br>
- Alternately, users can create the numeric preference <code>ui.systemUsesDarkTheme</code> to override the default behavior and return <code>light</code> (value: 0), <code>dark</code> (value: 1), or <code>no-preference</code> (value: 2). (Any other value causes Firefox to return <code>light</code>.)</p>
-</div>
+<p>The <strong><code>prefers-color-scheme</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features">media feature</a> is used to detect if the user has requested a light or dark color theme.</p>
 
-<p>The <strong><code>prefers-color-scheme</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is used to detect if the user has requested the system use a light or dark color theme.</p>
+<p>The user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting.</p>
 
 <h2 id="Syntax">Syntax</h2>
 
 <dl>
  <dt><code><dfn>light</dfn></code></dt>
- <dd>Indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an active preference.</dd>
+ <dd>Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.</dd>
  <dt><code><dfn>dark</dfn></code></dt>
- <dd>Indicates that user has notified the system that they prefer an interface that has a dark theme.</dd>
+ <dd>Indicates that user has notified that they prefer an interface that has a dark theme.</dd>
 </dl>
 
 <h2 id="Examples">Examples</h2>
@@ -94,6 +91,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme">Simulate prefers-color-scheme in Firefox</a> (Firefox Page Inspector > Examine and edit CSS)</li>
  <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li>
  <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
  <li>Changing color schemes in <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> and <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a>.</li>