This commit addresses an issue in Chromium on Linux and Windows where
the appearance of a vertical scrollbar causes unexpected horizontal
layout shifts. This behavior typically occurs when the window is
resized, a card is opened or a script is selected, resulting in content
being pushed to the left.
The solution implemented involves using `scrollbar-gutter: stable` to
ensure space is always allocated for the scrollbar, thus preventing any
shift in the page layout. This fix primarily affects Chromium-based
browsers on Linux and Windows. It has no impact on Firefox on any
platform, or any browser on macOS (including Chromium). Because these
render the scrollbar as an overlay, and do not suffer from this issue.
Steps to reproduce the issue using Chromium browser on Linux/Windows:
1. Open the app with a height large enough where a vertical scrollbar is
not visible.
2. Resize the window to a height that triggers a vertical scrollbar.
3. Notice the layout shift as the body content moves to the right.
Changes:
- Add a CSS mixin to handle scrollbar gutter allocation with a fallback.
- Add support for modal dialog background lock to handle
`scrollbar-gutter: stable;` in calculations to avoid layout shift when
a modal is open.
- Add E2E test to avoid regression.
- Update DevToolkit to accommodate new scrollbar spacing.
This commit addresses false negative failures in Cypress due to a known
Chrome issue.
The included change prevents Cypress tests from failing because of the
non-critical `ResizeObserver loop limit exceeded` error, which occurs
inconsistently during CI/CD runs with GitHub runners. This error has
been documented in CHrome and does not affect actual browser usage or
local test runs. This commit implements a widely recommended workaround
that ignores this specific error during test execution.
Error from Cypress:
```
Error: The following error originated from your application code, not from Cypress.
> ResizeObserver loop limit exceeded
```
The solution follows community-driven advice and past discussions on
handling this benign exception within test scenarios. It contributes to
more reliable CI/CD results by filtering out irrelevant error noise.
For detailed background and discussion on this error, see:
- Cypress issues: cypress-io/cypress#8418, cypress-io/cypress#20341
- Cypress PRs: cypress-io/cypress#20257, cypress-io/cypress#20284
- Discussion in Quasar: quasarframework/quasar#2233
- Discussion in specification repository: WICG/resize-observer#38
This commit resolves an issue causing horizontal UI layout shift when a
script is selected for the first time, and when all selected scripts are
deselected. This issue was only observed on Chromium-based browsers on
Linux environment when using macOS and Windows script collections.
The underlying cause was identified as the use of percentage-based
values for CSS margin and padding. To resolve this issue, these values
were updated to absolute measurements. This adjustment maintains layout
consistency across user interactions without compromising the
responsiveness.
The underlying cause was identified as the use of percentage-based values
for CSS margin and padding within certain elements. To resolve this issue,
these values were updated to absolute measurements. This adjustment
maintains layout consistency across user interactions without compromising
the responsiveness of the application.
Additionally, an end-to-end (E2E) test has been introduced to monitor
for future regressions of this layout shift bug, ensuring that the fix
remains effective over subsequent updates.
This commit improves the user interface in modal display.
- Prevent layout shifts caused by background scrollbars when modals are
active.
- Fix unintended overflow of modals on small screens, preventing parts
of the modal from being cut off on the right side.
- Refactor DOM manipulation, enhancing modularity, reusability,
extensibility, and separation of concerns.
- Centralize viewport test scenarios for different sizes in a single
definition for E2E tests.
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
This commit progresses the migration from Vue CLI to Vite (#230).
TypeScript migration:
- Convert JavaScript Cypress tests and configurations to TypeScript.
- Introduce `tsconfig.json` for Cypress, following official
recommendation.
Test execution:
- Use Cypress CLI to run the tests.
- Rename Cypress commands to reflect official naming conventions.
- Start Vue server prior to Cypress execution, using
`start-server-and-test` package based on official documentation.
- Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`).
Configuration standardization (based on Cypress docs):
- Delete unused `plugins/` directory.
- Move test (spec) files to to the root directory.
- Add official ESLint plugin (`eslint-plugin-cypress`).
Changes for importing `vite.config.ts` into `cypress.config.ts`:
- Add TypeScript import assertations to files importing JSON files.
- Use ESM friendly way instead of `__dirname` to solve `ReferenceError:
__dirname is not defined in ES module scrope`.
Other changes:
- Simplify comments in placeholder files.
- Create Cypress specific `.gitignore` for enhanced maintainability,
clarity and scalability.
- Remove redundant `vue.config.cjs`.
Major refactoring using ESLint with rules from AirBnb and Vue.
Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.
Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.
Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
