Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Focus Mode] New screenshots and instructions for the most important pages #2724

Merged
merged 352 commits into from
Dec 7, 2023

Conversation

captainbrosset
Copy link
Contributor

@captainbrosset captainbrosset commented Jul 21, 2023

Rendered articles in DevTools TOC bucket (some showing Focus Mode):
https://review.learn.microsoft.com/microsoft-edge/devtools-guide-chromium/overview?branch=pr-en-us-2724

This PR is the result of an ongoing collaboration to redo the screenshots in the docs (and adapting the text instructions) to match Focus Mode in the DevTools docset.

Here is the list of markdown file which we focused on:

  • microsoft-edge/devtools-guide-chromium/about-tools.md
  • microsoft-edge/devtools-guide-chromium/console/console-debug-javascript.md
  • microsoft-edge/devtools-guide-chromium/console/console-javascript.md
  • microsoft-edge/devtools-guide-chromium/console/index.md
  • microsoft-edge/devtools-guide-chromium/css/inspect.md
  • microsoft-edge/devtools-guide-chromium/customize/extensions.md
  • microsoft-edge/devtools-guide-chromium/customize/index.md
  • microsoft-edge/devtools-guide-chromium/customize/localization.md
  • microsoft-edge/devtools-guide-chromium/customize/placement.md
  • microsoft-edge/devtools-guide-chromium/customize/shortcuts.md
  • microsoft-edge/devtools-guide-chromium/customize/theme.md
  • microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables.md
  • microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md
  • microsoft-edge/devtools-guide-chromium/device-mode/index.md
  • microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode.md
  • microsoft-edge/devtools-guide-chromium/ie-mode/index.md
  • microsoft-edge/devtools-guide-chromium/javascript/disable.md
  • microsoft-edge/devtools-guide-chromium/memory-problems/allocation-profiler.md
  • microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md
  • microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots.md
  • microsoft-edge/devtools-guide-chromium/memory-problems/index.md
  • microsoft-edge/devtools-guide-chromium/memory-problems/memory-101.md
  • microsoft-edge/devtools-guide-chromium/network/index.md
  • microsoft-edge/devtools-guide-chromium/network/reference.md
  • microsoft-edge/devtools-guide-chromium/overview.md
  • microsoft-edge/devtools-guide-chromium/sources/index.md
  • microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md
  • microsoft-edge/devtools-guide-chromium/storage/cache.md
  • microsoft-edge/devtools-guide-chromium/storage/cookies.md
  • microsoft-edge/devtools-guide-chromium/storage/localstorage.md
  • microsoft-edge/devtools-guide-chromium/experimental-features/index.md
  • microsoft-edge/devtools-guide-chromium/javascript/index.md
  • microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md
  • microsoft-edge/devtools-guide-chromium/search/search-tool.md
  • microsoft-edge/devtools-guide-chromium/command-menu/index.md
  • microsoft-edge/devtools-guide-chromium/network-console/network-console-tool.md
  • microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md
  • microsoft-edge/devtools-guide-chromium/workspaces/index.md
  • microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md
  • microsoft-edge/devtools-guide-chromium/javascript/overrides.md
  • microsoft-edge/devtools-guide-chromium/issues/index.md
  • microsoft-edge/devtools-guide-chromium/console/console-log.md
  • microsoft-edge/devtools-guide-chromium/storage/sessionstorage.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-color-blindness.md
  • microsoft-edge/devtools-guide-chromium/storage/application-tool.md
  • microsoft-edge/devtools-guide-chromium/javascript/snippets.md
  • microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md
  • microsoft-edge/devtools-guide-chromium/storage/indexeddb.md
  • microsoft-edge/devtools-guide-chromium/console/console-dom-interaction.md
  • microsoft-edge/devtools-guide-chromium/css/index.md
  • microsoft-edge/devtools-guide-chromium/dom/index.md
  • microsoft-edge/devtools-guide-chromium/network-request-blocking/network-request-blocking-tool.md
  • microsoft-edge/devtools-guide-chromium/javascript/reference.md
  • microsoft-edge/devtools-guide-chromium/resources/index.md
  • microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md
  • microsoft-edge/devtools-guide-chromium/javascript/breakpoints.md
  • microsoft-edge/devtools-guide-chromium/security/index.md
  • microsoft-edge/devtools-guide-chromium/performance-monitor/performance-monitor-tool.md
  • microsoft-edge/devtools-guide-chromium/coverage/index.md
  • microsoft-edge/devtools-guide-chromium/console/utilities.md
  • microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md
  • microsoft-edge/devtools-guide-chromium/evaluate-performance/reference.md
  • microsoft-edge/devtools-guide-chromium/css/print-preview.md
  • microsoft-edge/devtools-guide-chromium/3d-view/index.md
  • microsoft-edge/devtools-guide-chromium/changes/changes-tool.md
  • microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md
  • microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md
  • microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md
  • microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md
  • microsoft-edge/devtools-guide-chromium/accessibility/focus.md
  • microsoft-edge/devtools-guide-chromium/accessibility/narrow.md
  • microsoft-edge/devtools-guide-chromium/accessibility/navigation.md
  • microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md
  • microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation.md
  • microsoft-edge/devtools-guide-chromium/accessibility/reference.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-accessibility-tree.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-analyze-no-focus-indicator.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-analyze-no-keyboard-support.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-blurred-vision.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-dark-mode.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-inspect-states.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-inspect-text-contrast.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-inspect-tool.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-reduced-ui-motion.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-tab-enter-keys.md
  • microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md

Here is the list of original PRs we worked on that got merged in this big PR:

AB#38045560

@captainbrosset captainbrosset added cat: devtools DevTools-related content. focus-mode-screenshots These PRs are about renewing screenshots in the DevTools docs for Focus Mode labels Jul 21, 2023
captainbrosset and others added 3 commits December 6, 2023 09:33
…icles (#2960)

* Removed long a11y overview doc

Deleted the article.
Preserved what wasn't already elsewhere in the reference doc.
Removed/updated existing links.
Added redirection rule.

* Focus Mode images and content for a11y tab article

* Focus Mode images and content for color picker page

* images and content for emulate vision deficiencie s

* Images and content for the tracking focus article

* images and content for the narrow viewport article

* Updated content for the keyboard navigation article

* Images and content for reduced motion simulation article

* Images and content for the test a11y tree article

* Images and content for the focus indicator article

* Images and content for the keyboard support article

* Images and content for the test blurred vision article

* Some images and content for the test dark mode article

* Images and content for the test inspect state article

* Finalized test-inspect-states.md

* New images and content for inspect text contrast article

* Updated date

* Images and content for test-inspect-tool.md

Removed 2 sections that are completely unrelated to accessibility and that are already documented elsewhere.
I think they are confusing here.

* Images and content for test-reduced-ui-motion.md

* Images and content for test-tab-enter-keys.md

* Images and content for test-tab-key-source-order-viewer.md

* Remove dead links

* Keep tables at start

* Writer/Editor pass

* Subheading: Further testing

* at MDN

* Singular pseudo-class rule

---------

Co-authored-by: Michael Hoffman <[email protected]>
@captainbrosset
Copy link
Contributor Author

The previous warning seems like a bug. The redirection rule was added here: https://github.com/MicrosoftDocs/edge-developer/blob/user/pabrosse/focus-mode-july-2023/.openpublishing.redirection.json#L1033-L1035

@captainbrosset captainbrosset removed the on-hold The changes are currently on-hold and awaiting further evaluation. label Dec 7, 2023
@captainbrosset
Copy link
Contributor Author

The previous warning seems like a bug. The redirection rule was added here: https://github.com/MicrosoftDocs/edge-developer/blob/user/pabrosse/focus-mode-july-2023/.openpublishing.redirection.json#L1033-L1035

The rule was incorrect. Just pushed a commit to fix it.

Copy link

Learn Build status updates of commit 27b5e4b:

✅ Validation status: passed

File Status Preview URL Details
.openpublishing.redirection.json ✅Succeeded View
microsoft-edge/accessibility/index.md ✅Succeeded View
microsoft-edge/accessibility/test.md ✅Succeeded View
microsoft-edge/developer/index.yml ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index.md ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/composited-layers-tab.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/composited-layers-tab-galaxy.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/dom-tab.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/more-tools-icon.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/tool-in-activity-bar.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/tool-in-quick-view.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/3d-view/index-images/z-index-tab.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/about-tools.md ✅Succeeded View
microsoft-edge/devtools-guide-chromium/about-tools-images/all-default-tools.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/about-tools-images/all-optional-tools.png ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/about-tools-images/command-menu-panel-vs-drawer-tools.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/about-tools-images/move-from-quickview-to-activitybar.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/about-tools-images/remove-from-activitybar.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab.md ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab-images/accessibility-elements-accessibility.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab-images/accessibility-elements-accessibility-aria-attributes.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab-images/accessibility-elements-accessibility-computed-properties.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-tab-images/accessibility-elements-accessibility-tree.png ✅Succeeded View
microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md ✅Succeeded n/a (file deleted or renamed)
microsoft-edge/devtools-guide-chromium/accessibility/color-picker.md ✅Succeeded View

This comment lists only the first 25 files in the pull request.
For more details, please refer to the build report.

For any questions, please:

@captainbrosset captainbrosset merged commit e4a0152 into main Dec 7, 2023
2 checks passed
@captainbrosset captainbrosset deleted the user/pabrosse/focus-mode-july-2023 branch December 7, 2023 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cat: devtools DevTools-related content. focus-mode-screenshots These PRs are about renewing screenshots in the DevTools docs for Focus Mode
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants