Commit Graph

90 Commits

Author SHA1 Message Date
undergroundwires
c138f74460 Refactor to unify scripts/categories as Executable
This commit consolidates scripts and categories under a unified
'Executable' concept. This simplifies the architecture and improves code
readability.

- Introduce subfolders within `src/domain` to segregate domain elements.
- Update class and interface names by removing the 'I' prefix in
  alignment with new coding standards.
- Replace 'Node' with 'Executable' to clarify usage; reserve 'Node'
  exclusively for the UI's tree component.
2024-06-12 12:36:40 +02:00
undergroundwires
aae5434451 Bump Vue to latest and fix universal selector CSS
This commit updates the Vue package from v3.4.21 to v3.4.27.

This version change addressed styling issues introduced by changes in
CSS universal selector handling in Vue 3.4.22.
The change that has caused this:
- vuejs/core#10551
- vuejs/core#10548
- vuejs/core@54a6afa75a

This commit fixes two main issues that this has led to:

1. Universal CSS selector causing 'Revert' buttons to stretch and
   truncate incorrectly.
   This is fixed by modifying selectors to apply styles more
   specifically, maintaining correct display of toggle buttons.
2. Universal `*` selector that's used to understand parent HTML
   structure causing information tooltip icons to be misaligned.
   This is fixed by replacing `*` with a new `InfoTooltipWrapper`
   component, which manages layout concerns more explicitly and
   maintainably.
2024-05-19 15:02:38 +02:00
undergroundwires
dd71536316 Fix misaligned tooltip positions in modal dialogs
This commit fixes a bug that causes tooltips to be slightly misaligned.

Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.

One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.

This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.

Key changes:

- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.

Other supporting changes:

- Improve throttle function to support efficient recalculations of
  positions:
  - Add ability to optionally exclude the first execution (leading
    call).
  - Refactor to simplify it make it easier to follow and read.
  - Fix a bug where initial calls were incorrectly throttled if
    `dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
  This greatily introduce safety, reuse and testability of event
  listening.
2024-05-08 15:24:12 +02:00
undergroundwires
f3571abeaf Bump dependencies to latest, hold ESLint
This commit updates the project's npm dependencies to their
latest versions.

Updates to the following dependencies are on hold due to compatibility
issues:

- `@typescript-eslint/eslint-plugin`:
  - Blocked by `@vue/eslint-config-airbnb-with-typescript`
    (vuejs/eslint-config-airbnb#63).
- `@typescript-eslint/parser`:
  - Blocked by `@vue/eslint-config-airbnb-with-typescript`
    (vuejs/eslint-config-airbnb#63).
- `@vue/eslint-config-typescript`:
  - Blocked by `@vue/eslint-config-airbnb-with-typescript`
    (vuejs/eslint-config-airbnb#63).
- `eslint`:
  - Blocked by `@vue/eslint-config-airbnb-with-typescript`
    (vuejs/eslint-config-airbnb#65).
  - Blocked by `@typescript-eslint/eslint-plugin` and
    `@typescript-eslint/parser`
    (typescript-eslint/typescript-eslint#8211).

These dependencies remain at their current major versions, and
their status is documented in the `package.json` to inform future
updates.

Other supporting changes:

- Moves `@types/markdown-it` to `devDependencies` which was incorrectly
  included in `dependencies`.
- Fix error in `TreeView.spec` tests, revealed by the version bump.
- Update `markdown-it` import to match the new file.
2024-04-14 22:38:47 +02:00
undergroundwires
ae172000a6 Centralize and use global spacing variables
This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.

- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
  absolute and relative, to standardize the spacing throughout the application.
  This new approach ensures a consistent spacing logic across all components and
  layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
  harmonizes the spacing across different parts of the application, aligning with
  the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.

Other supporting changes per component:

- RatingCircle: Update style names to match convention and simplify
  hacky way to inject circle width value through CSS variables. Add
  tests for the new behavior and refactor existing tests for easier
  extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
  from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
  5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
  - Use `v-bind` instead of hacky way to inject SCSS values through variables.
  - Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
  components that it styles. Update structure documentation.

The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
2024-04-12 18:38:12 +02:00
undergroundwires
b7a20d9d41 Fix top script menu overflow on small screens
On very small screens (that can be tested with iPhone SE size), the
`All` button overflows. This makes E2E tests fail with width like
`320px`.

This commit fixes the issue by removing `whitespace: no-break` but
employing simpler and self-documenting layout.

Key changes:

- Simplify scripts menu layout instead of relying on
  `white-space: nowrap`.
- Increase gap when script menu items starts wrapping to avoid
  "squeezed" look.

Other supporting changes:

- Simplify gaps by using `column-gap` and `row-gap` properties rather
  than calculating margins.
- Use class-based styling instead of using `id`.
- Use more clear, consistent CSS class naming with prefixes in
  `TheScriptsMenu` to improve maintainability.
- Introduce `center-middle-flex-item` mixin for better documenting the
  code.
2024-04-08 12:28:38 +02:00
undergroundwires
7b546c567c Fix card arrow not being animated in sync
This commit fixes an UI inconsitency where the arrow did not animate in
sync with with the card's expansion panel during the expansion process.
The solution implemented involves the use of actual DOM element for the
arrow, rather than a pseude-element, allowing for unified animation with
the expansion panel.

Changes:

- Extraction of the expansion arrow into its own Vue component,
  `CardExpansionArrow`, improving maintainability and separation of
  concerns.
- Transition to using a real DOM element for the expansion arrow, moving
  away from the `&:before` pseudo-class. This leads to simpler codebase,
  better separation of concerns and closer alignment with HTML
  semantics.
2024-04-06 14:11:30 +02:00
undergroundwires
5d940b57ef Fix card header expansion glitch on card collapse
This commit fixes an issue where the card's header would improperly
expand to full height during card collapse, leading to a less smooth
user experience. Previously, this was caused by the indiscriminate use
of `transition: all` in the `.card__expander`, which included unwanted
properties in the transition during collapse, such as height. This is
solved by using Vue transitions to apply transition only during
expansion.

Changes:

- Introduce a new Vue component, `CardExpandAnimation`:
  - Centralizes the animation process, applying the same animation to
    both the card and its arrow for consistency.
  - Resolves the glitch by adjusting classes exclusively during the
    enter animation phase, avoiding unintended side effects during leave
    animation phase.
  - Adopts a Vue-idiomatic approach for transition management, improving
    code readability and maintainability.
  - Improves separation of concerns by isolating animation logic from
    the component's core functionality, facilitating easier updates or
    replacements.
- Remove unnecessary transitions to enhance code simplicity and
  performance:
  - Remove `transition: all` on `.card__expander`, which was identified
    as the cause of the issue.
  - Remove unnecessary `transition: all` on `.card`.
  - Adjust transitions to specifically target and affect the transform
    property (instead of `all`) to optimize animation behavior and
    eliminate potential side-effects.

These changes not only fix the issue at hand but also contribute to a
more maintainable and performant codebase by clarifying animation logic
and reducing unnecessary CSS transitions.
2024-04-03 09:51:09 +02:00
undergroundwires
557cea3f48 Fix overflow in tree node content on small screens
This commit addresses a UI issue observed on small screens, particularly
during text searches involving nested nodes.

Implementing word-breaking for the improved display of script/category
titles and their documentation prevents content overflow. This change
ensures that both the header (including the node title and documentation
icon) and the documentation text stay fully visible without overflowing.

Additionally, this fix replaces ID-based styling (`#node`) with
class-based styling, using clear, descriptive names. This enhances CSS
and JavaScript reusability and maintainability.
2024-04-01 12:34:21 +02:00
undergroundwires
79183d6417 Fix bottom gap in card expansion panel
This commit fixes an unintended bottom gap in the card expansional
panel, observed in the Windows script collection's "Advanced settings".

This issue arrives from a `min-height` CSS property that no longer
aligns with the current method for achieving balanced padding. It's only
visible when an action (a card) contains too few scripts (nodes).
2024-03-26 09:56:50 +01:00
undergroundwires
a721e82a4f Bump TypeScript to 5.3 with verbatimModuleSyntax
This commit upgrades TypeScript to the latest version 5.3 and introduces
`verbatimModuleSyntax` in line with the official Vue guide
recommendatinos (vuejs/docs#2592).

By enforcing `import type` for type-only imports, this commit improves
code clarity and supports tooling optimization, ensuring imports are
only bundled when necessary for runtime.

Changes:

- Bump TypeScript to 5.3.3 across the project.
- Adjust import statements to utilize `import type` where applicable,
  promoting cleaner and more efficient code.
2024-02-27 04:20:22 +01:00
undergroundwires
fb08f03765 Add UI animations for expand/collapse actions
This commit improves the user experience by adding smooth transitions
for expanding and collapsing tree node items and documentation sections.
The introduction of these animations makes the interface feel more
dynamic and responsive to user interactions.

Key changes:

- Implement a new `ExpandCollapseTransition` component to wrap UI
  elements requiring expand/collapse animations.
- Utiliz the `ExpandCollapseTransition` in tree view nodes and
  documentation sections to animate visibility changes.
- Refactor CSS to remove obsolete transition mixins, leveraging Vue's
  transition system for consistency and maintainability.
2024-02-18 22:38:32 +01:00
undergroundwires
faa7a38a7d Apply global styles for visual consistency
This commit centralizes the styling of key UI elements across the
project to ensure:

- Consistent look and feel.
- Enhanced code reusability.
- Simpified maintenance, improving development speed.

It establishes a uniform foundation that can be leveraged across
different parts of the project, even enabling the styling to be shared
across different websites (supporting issue #49).

Key changes:

- Apply the following shared styles globally:
  * Styling of code, blockquotes, superscripts, horizontal rules and
    anchors.
  * Vertical and horizontal spacing.
- Segregate base styling into dedicated SCSS files for clearer structure
  and increased maintainability.
- Remove custom styling from affected components, enabling global style
  reuse for visual uniformity, reduced redundancy, and enhanced
  semantics.

Other supporting changes:

- Rename `globals.scss` to `base.scss` for better clarity.
- Add `.editorconfig` for `.scss` files to ensure consistent whitespace
  usage.
- Remove `2` file from the project root, that was included in the source
  code by mistake.
- Remove unused font-face imports
2024-02-17 23:09:58 +01:00
undergroundwires
d5bbc321f9 Change fonts for improved readability
Key changes:

- Change main font to Roboto Slab for enhanced readability.
- Change code font to 'Source Code Pro' for consistent monospace code
  rendering.
- Import and set code font explicitly for uniform appearance across
  platforms.
- Update Slabo 27px (logo font) version from v6 to v14.
- Update Yesteryear (cursive font) version from v8 to v18.
- Drop support for historic browser-specific formats, retaining only
  WOFF2 for modern and TTF for legacy browsers.
- Use `font-display: swap` to improve perceived load times and minimize
  layout shifts.

Supporting changes:

- Simplify font-weight usage to 'normal' and 'bold' for consistency.
- Adjust inline code padding for better scalability and prevent
  overflow.
- Introduce `$font-main` as main font variable.
- Remove specification of main font as it's best practice to rely on the
  default font defined on `body` style.
- Specify font in code area to ensure it uses the code font consistently
  as the rest of the application.
- Remove local font search through `local` to simplify the import logic
  and prioritize consistency over performance.
- Import bold font explicitly (`font-weight: 700`) for smooth and
  consistent rendering.
- Move `font-family` definitions to `_typography.scss` to better adhere
  to the common standards and conventions.
- Refactor font variables to have `font-family-` prefix instead of
  `font-` to improve clarity and differentiation between `font-size`
  variables.
- Rename 'artistic' font to 'cursive' for preciseness and clarity.
- Use smaller font sizes to match the new main font size, as Roboto Slab
  is relatively larger.
- Add missing fallbacks for serif fonts to improve fault tolerance.
- Change padding slightly on toggle switch for revert buttons to align
  well with new main font and its sizing.
2024-02-16 11:27:31 +01:00
undergroundwires
6142f3a297 Extend search by including documentation content
This commit broadens the search functionality within privacy.sexy by
including documentation text in the search scope. Users can now find
scripts and categories not only by their names but also by content in
their documentation. This improvement aims to make the discovery of
relevant scripts and information more intuitive and comprehensive.

Key changes:

- Documentation text is now searchable, enhancing the ability to
  discover scripts and categories based on content details.

Other supporting changes:

- Remove interface prefixes (`I`) from related interfaces to adhere to
  naming conventions, enhancing code readability.
- Refactor filtering to separate actual filtering logic from filter
  state management, improving the structure for easier maintenance.
- Improve test coverage to ensure relability of existing and new search
  capabilities.
- Test coverage expanded to ensure the reliability of the new search
  capabilities.
2024-02-14 12:10:49 +01:00
undergroundwires
55fa7eae71 Add 'Revert All Selection' feature #68
This commit introduces 'Revert: None - Selected' toggle, enabling users
to revert all reversible scripts with a single action, improving user
safety and control over script effects.

This feature addresses user-reported concerns about the ease of
reverting script changes. This feature should enhance the user experience
by streamlining the revert process along with providing essential
information about script reversibility.

Key changes:

- Add buttons to revert all selected scripts or setting all selected
  scripts to non-revert state.
- Add tooltips with detailed explanations about consequences of
  modifying revert states, includinginformation about irreversible
  script changes.

Supporting changes:

- Align items on top menu vertically for better visual consistency.
- Rename `SelectionType` to `RecommendationStatusType` for more clarity.
- Rename `IReverter` to `Reverter` to move away from `I` prefix
  convention.
- The `.script` CSS class was duplicated in `TheScriptsView.vue` and
  `TheScriptsArea.vue`, leading to style collisions in the development
  environment. The class has been renamed to component-specific classes
  to avoid such issues in the future.
2024-02-11 22:47:34 +01:00
undergroundwires
a54e16488c Change slogan and refactor project info naming
The project's slagon has been updated back to "Privacy is sexy" from
"Now you have the choice" for enhanced brand clarity and memorability.

This change also reflects the community's preference and aligns with the
project's established identity.

This commit also refactors naming and structure of project information
(metadata) struct to enhance clarity and maintainability in relation to
changing the slogan.

Key changes include:

- Update UI components to display the revised slogan.
- Remove period from project slogan in code area for consistency with a
  explanatory comment for future maintainability.
- Refactor header container and class names for clarity.
- Standardize project metadata usage in `TheCodeArea.vue` to ensure
  consistency.
- Improve code clarity by renaming `IProjectInformation` to
  `ProjectDetails` and `ProjectInformation` to `GitHubProjectDetails`.
- Organize `ProjectDetails` under a dedicated `Project` directory within
  the domain layer for better structure.

These changes are expected to improve the project's appeal and
streamline future maintenance and development efforts.
2024-02-10 18:50:56 +01:00
undergroundwires
b9c89b701f Render bracket references as superscript text
This commit improves markdown rendering to convert reference labels
(e.g., `[1]`) to superscripts, improving document readability without
cluttering the text. This improvement applies documentation of all
scripts and categories.

Changes:

- Implement superscript conversion for reference labels within markdown
  content, ensuring a cleaner presentation of textual references.
- Enable HTML content within markdown, necessary for inserting `<sup>`
  elements due to limitations in `markdown-it`, see
  markdown-it/markdown-it#999 for details.
- Refactor markdown rendering process for improved testability and
  adherence to the Single Responsibility Principle.
- Create `_typography.scss` with font size definitions, facilitating
  better control over text presentation.
- Adjust external URL indicator icon sizing for consistency, aligning
  images with the top of the text to maintain a uniform appearence.
- Use normal font-size explicitly for documentation text to ensure
  consistency.
- Remove text size specification in `markdown-styles` mixin, using `1em`
  for spacing to simplify styling.
- Rename font sizing variables for clarity, distinguishing between
  absolute and relative units.
- Change `font-size-relative-smaller` to be `80%`, browser default for
  `font-size: smaller;` CSS style and use it with `<sup>` elements.
- Improve the logic for converting plain URLs to hyperlinks, removing
  trailing whitespace for cleaner link generation.
- Fix plain URL to hyperlink (autolinking) logic removing trailing
  whitespace from the original markdown content. This was revealed by
  tests after separating its logic.
- Increase test coverage with more tests.
- Add types for `markdown-it` through `@types/markdown-it` package for
  better editor support and maintainability.
- Simplify implementation of adding custom anchor attributes in
  `markdown-it` using latest documentation.
2024-02-09 16:25:05 +01:00
undergroundwires
311fcb1813 Improve UI code styling for all platforms
This commit standardizes the visual styling of inline code and code
blocks, ensuring consistency across macOS, Android, Linux and Windows
platforms.

The discrepancies observed in font rendering on macOS, which caused the
inline code font to appear larger, have been addressed. This behavior
was only observed on macOS using different browsers such as Firefox,
Safari, Chromium-based browsers including Electron.

Key changes:

- Standardize font size relative to the parent element.
- Remove font-weight for uniformity, especially when the specific weight
  is not included with the application.
- Add a consistent background color to inline codes, aligning their look
  with code blocks.
- Refactor code styling into a separate SCSS file for improved
  modularity and maintainability.
- Update the documentation to reflect these visual design choices for
  privacy.sexy's UI.

These changes enhance the overall user experience by providing a
consistent look and feel for code elements within the UI, regardless of
the user's platform or browser.
2024-02-06 12:35:51 +01:00
undergroundwires
937f4593d1 Change 'revert' button to title case
- Switch 'revert' button text to title case for consistency and more
  formal and professional look.
- Update related styles to reflect the new case usage.
- Adjust tests to match the new button label casing.
- Remove reduntant visibility switch between to elements to simpify the
  DOM and style rules.
2024-02-01 17:20:11 +01:00
undergroundwires
4da306b9f7 Normalize and improve font sizes
This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.

- Introduce variables for standard font sizes, enhancing
  maintainability.
- Remove explicit pixel values, replaced with scalable units based on
  root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.
2024-01-31 19:54:11 +01:00
undergroundwires
a5ffed4cd6 Add markdown support for script/category names
Add markdown rendering for script and category titles to improve the
presentation of textual content.

- Introduce reusable `MarkdownText` for markdown rendering.
- Incorporate markdown styling into dedicated SCSS file for clarity.
- Define explicit font sizes for consistent visual experience.
- Apply `MarkdownText` usage across UI for unified markdown rendering.
- Streamline related styles and layout for improved maintainability
- Set font sizes explicitly for better consistency and to avoid
  unexpected inheritence.

This enhancement enables richer text formatting and improves the user
interface's flexibility in displaying content.
2024-01-30 16:36:55 +01:00
undergroundwires
d277139dd5 Expand script names to take full available width
This commit improves consistency in the UI by ensuring that all nodes in
the tree component expand to take full available width. This approach
eliminates layout shifts that were previously observed when toggling
documentation.
2024-01-28 09:08:37 +01:00
undergroundwires
7af8daa341 Improve selection type documentation
- Refine tooltip documentation with clearer information.
- Introduce privacy ranking indicator for intuitive user guidance.
- Adopt a consistent format throughout documentation.
- Switch from emojis to icons to maintain visual uniformity.
2024-01-26 15:40:20 +01:00
undergroundwires
728584240c Fix touch, cursor and accessibility in slider
This commit improves the horizontal slider between the generated code
area and the script list. It enhances interaction, accessibility and
performance. It provides missing touch responsiveness, improves
accessibility by using better HTML semantics, introduces throttling and
refactors cursor handling during drag operations with added tests.

These changes provides smoother user experience, better support for
touch devices, reduce load during interactions and ensure the
component's behavior is intuitive and accessible across different
devices and interactions.

- Fix horizontal slider not responding to touch events.
- Improve slider handle to be a `<button>` for improved accessibility
  and native browser support, improving user interaction and keyboard
  support.
- Add throttling in the slider for performance optimization, reducing
  processing load during actions.
- Fix losing dragging state cursor on hover over page elements such as
  input boxes and buttons during dragging.
- Separate dragging logic into its own compositional hook for clearer
  separation of concerns.
- Refactor global cursor mutation process.
- Increase robustness in global cursor changes by preserving and
  restoring previous cursor style to prevent potential side-effects.
- Use Vue 3.2 feature for defining cursor CSS style in `<style>`
  section.
- Expand unit test coverage for horizontal slider, use MouseEvent and
  type cast it to PointerEvent as MouseEvent is not yet supported by
  `jsdom` (see jsdom/jsdom#2527).
2024-01-08 23:08:10 +01:00
undergroundwires
bf7fb0732c Bump ESLint Typescript dependencies to latest
- Bump all ESLint dependencies related to TypeScript to their latest
  version. This was made possible by the resolution of compatibility
  issues with `@vue/eslint-config-airbnb-with-typescript`.
  See vuejs/eslint-config-airbnb#58 for details.
- Refactor code to comply with the latest linting configuration.
- Improve documentation in the ESLint configuration file to better
  describe the functionality and limitations of
  `@vue/typescript/recommended`.
  See vuejs/eslint-config-typescript#67 for details.
- Document functionality and limitation of `@vue/typescript/recommended`
  more clearly in ESLint configuration file.
2024-01-05 14:18:50 +01:00
undergroundwires
86fde6d7dc Fix button inconsistencies and macOS layout shifts
This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.
2023-12-29 17:26:40 +01:00
undergroundwires
645c333787 Fix unresponsive circle icon in revert button
This commit fixes a UI bug where the circle icon of the revertbutton was
unresponsive to clicks. The solution involves replacing the
pseudo-element (`:before`) with an actual HTML element, enabling direct
event binding.

Additional improvements include:

- Removal of redundant `z-index` properties to simplify click event
  handling and reduce complexity.
- Programmatic toggle of `isChecked` on click, providing more controlled
  and explicit behavior and avoiding issues with native checkbox
  behavior, especially when overlaid on a pseudo-element.
2023-12-19 10:44:54 +01:00
undergroundwires
efa05f42bc Improve security by isolating code execution more
This commit enhances application security against potential attacks by
isolating dependencies that access the host system (like file
operations) from the renderer process. It narrows the exposed
functionality to script execution only, adding an extra security layer.

The changes allow secure and scalable API exposure, preparing for future
functionalities such as desktop notifications for script errors (#264),
improved script execution handling (#296), and creating restore points
(#50) in a secure and repeatable way.

Changes include:

- Inject `CodeRunner` into Vue components via dependency injection.
- Move `CodeRunner` to the application layer as an abstraction for
  better domain-driven design alignment.
- Refactor `SystemOperations` and related interfaces, removing the `I`
  prefix.
- Update architecture documentation for clarity.
- Update return types in `NodeSystemOperations` to match the Node APIs.
- Improve `WindowVariablesProvider` integration tests for better error
  context.
- Centralize type checks with common functions like `isArray` and
  `isNumber`.
- Change `CodeRunner` to use `os` parameter, ensuring correct window
  variable injection.
- Streamline API exposure to the renderer process:
  - Automatically bind function contexts to prevent loss of original
    context.
  - Implement a way to create facades (wrapper/proxy objects) for
    increased security.
2023-12-18 17:30:56 +01:00
undergroundwires
20633972e9 Fix touch-enabled Chromium highlight on tree nodes
This commit resolves issues with the touch highlight behavior on tree
nodes in touch-enabled Chromium browsers (such as Google Chrome).

The fix addresses two issues:

1. Dual color transition issue during tapping actions on tree nodes.
2. Not highlighting full visible width of the node on keyboard focus.

Other changes include:

- Create `InteractableNode.vue` to centralize click styling and logic.
- Remove redundant click/hover/touch styling from `LeafTreeNode.vue` and
  `HierarchicalTreeNode.vue`.
2023-12-15 08:00:46 +01:00
undergroundwires
3457fe18cf Fix OS switching not working on tree view UI
This commit resolves a rendering bug in the tree view component.
Previously, updating the tree collection prior to node updates led to
rendering errors due to the presence of non-existent nodes in the new
collection.

Changes:

- Implement manual control over the rendering process in tree view. This
  includes clearing the rendering queue and currently rendered nodes
  before updates, aligning the rendering process with the updated
  collection.
- Add Cypress E2E tests to test switching between all operating systems
  and script views, ensuring no uncaught errors and preventing
  regression.
- Replace hardcoded operating system lists in the download URL list view
  with a unified `getSupportedOsList()` method from the application,
  reducing duplication and simplifying future updates.
- Rename `initial-nodes` to `nodes` in `TreeView.vue` to reflect their
  mutable nature.
- Centralize the function for getting operating system names into
  `OperatingSystemNames.ts`, improving reusability in E2E tests.
2023-12-14 09:51:42 +01:00
undergroundwires
fe3de498c8 win: improve disabling of Application Experience
This commit improves disabling of Application Experience component by
improving the categorization, documentation, existing scripts and adding
new scripts. It renames the scripts to be more user-friendly but still
technically accurate.

- Rename scripts to make them easier for non-technical users to
  understand.
- Improve existing documentation and add more documentation.
- Add new scripts for:
  - 'Disable "MareBackup" task'
  - 'Disable "SdbinstMergeDbTask" task'
  - 'Disable "PcaPatchDbTask" task'
- Improve `CompatTelRunner.exe` disabling to soft-delete the file.
2023-12-13 09:14:01 +01:00
undergroundwires
15134ea04b Fix tree view alignment and padding issues
This commit addresses issues with the tree view not fully utilizing the
available width (appearing squeezed on the left) on bigger screens, and
inconsistent padding during searches.

The changes centralize padding and script tree rendering logic to
enforce consistency and prevent regression.

Changes:

- Fix tree view width utilization.
- Refactor SCSS variables for better IDE support.
- Unify padding and tree background color logic for consistent padding
  and coloring around the tree component.
- Fix no padding around the tree in tree view.
- Centralize color SCSS variable for script background for consistent
  application theming.
2023-12-12 03:44:02 +01:00
undergroundwires
d328f08952 Fix incorrect URL rendering in documentation texts
This commit addresses incorrect URL rendering within documentation text
by improving auto-linkified URL labels, handling `+` symbols as spaces,
enhancing readability of encoded path segments and manually updating
some of the documetation.

Key improvements:

- Parse `+` as whitespace in URLs for accurate script labeling.
- Interpret multiple whitespaces as single for robustness.
- Decode path segments for clearer links.
- Refactor markdown renderer.
- Expand unit tests for comprehensive coverage.

Documentation has been updated to fix inline URL references and improve
linkification across several scripts, ensuring more readable and
user-friendly content.

Affected files and documentation sections have been adjusted
accordingly, including script and category names for consistency and
clarity.

Some of the script/category documentation changing fixing URL rendering
includes:

- 'Disable sending information to Customer Experience Improvement
  Program':
  - Fix reference URLs being inlined.
- 'Disable "Secure boot" button in "Windows Security"':
  - Fix rendering issue due to auto-linkification of `markdown-it`.
- 'Clear Internet Explorer DOMStore':
  - Fix rendering issue due to auto-linkification of `markdown-it`.
- 'Disable "Windows Defender Firewall" service':
  - Fix rendering issue due to auto-linkification of `markdown-it`.
  - Convert YAML comments to markdown comments visible by users.
  - Add breaking behavior to script name, changing script name to.
- 'Disable Microsoft Defender Firewall services and drivers':
  - Remove information about breaking behavior to avoid duplication and
    be consistent with the documentation of the rest of the collections.
- Use consistent styling for warning texts starting with `Caution:`.
- Rename 'Remove extensions' category to 'Remove extension apps' for
  consistency with names of its sibling categories.
2023-11-27 05:17:58 +01:00
undergroundwires
9845a7cd68 Fix rendering of inline code blocks for docs
Styling of codeblocks:

- Uniform margins as other documentation elements.
- Add small margin for inline code-blocks.
- Use different background color for inline code-blocks.
- Introduce `inline-code` and `code-block` mixins for clarity in
  styling.

Overflowing of codeblocks:

- Improve flex layout of the tree component to be handle overflowing
  content and providing maximum available width. To be able to correctly
  provide maximum available width in card content, card expansion layout
  is changed so both close button and the content gets their full width.
- Other refactorings to support this:
  - Introduce separate Vue component for checkboxes of nodes for better
    separation of concerns and improved maintainability.
  - Refactor `LeafTreeNode` to make it simpler, separating layout concerns
    from other styling.
  - `ScriptsTree.vue`: Prefer `<div>`s instead of `<span>`s as they
    represent large content.
  - Remove unnecessary `<div>`s and use `<template>`s to reduce HTML
    complexity.
  - Update script documentation to not include unnecessary left padding
    on script code blocks.
  - Refactor SCSS variable names in `DocumentationText.vue` for clarity.
2023-11-25 11:03:33 +01:00
undergroundwires
1442f62633 Fix spacing in documentation for readability
This commit improves the readability of the script/category
documentations by refining the vertical and horizontal spacing. The
adjustments aim to create more visually consistent layout.

Styling changes include:

- Add more and consistent spacing between text parts (such as lists,
  tables, paragraphs etc.).
- Remove top/bottom spacing at the start and end of the text.
- Add more horizontal spacing (padding on left) for lists.
- Improve blockquote styling with a border and similar spacing as other
  parts.
2023-11-23 07:39:11 +01:00
undergroundwires
cb42f11b97 Fix code highlighting and optimize category select
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.
2023-11-18 22:23:27 +01:00
undergroundwires
4531645b4c Refactor to Vue 3 recommended ESLint rules
These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.

- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
  `--max-warnings=0` flag. This enforces stricter code quality controls
  provided by Vue 3 rules.
2023-11-17 13:57:13 +01:00
undergroundwires
bf3426f91b Fix card list UI layout shifts (jumps) on load
This commit fixes layout shifts that occur on card list part of the page
when the page is initially loaded.

- Resolve issue where card list starts with minimal width, leading
  to jumps in UI until correct width is calculated on medium and
  big screens.
- Dispose of existing `ResizeObserver` properly before creating a new
  one. This prevents leaks and incorrect width calculations if
  `containerElement` changes.
- Throttle resize events to minimize width/height calculation changes,
  enhancing performance and reducing the chances for layout shifts.

Supporting CI/CD improvements:

- Enable artifact upload in CI/CD even if E2E tests fail.
- Distinguish uploaded artifacts by operating system for clarity.
2023-11-16 16:06:33 +01:00
undergroundwires
3864f04218 win: improve disabling of scheduled tasks
This commit:

- Reduces false-positive error messages when disabling scheduled tasks.
  E.g., `ERROR: The specified task name ... does not exist in the system.`
- Centralizes and unifies the logic for disabling scheduled tasks.
- Adds additional documentation, including the existence status of tasks
  on default installations.
- Updates and improves the scripts that disable scheduled tasks.
- Improves consistency of headers in documentation text by removing the
  top margin introduces by headers.

Introduces `DisableScheduledTask` templating function:

- It provides a unified way of disabling scheduled tasks.
- It displays user-friendly messages if a task cannot be found.
- It can now handle multiple tasks found matching a pattern.
- The script now exits with the correct error code.
- It skips enable/disable actions if it's not necessary.

Improve existing scripts:

- 'Disable Google update services':
  - Rename to 'Disable Google background automatic updates'.
  - Add missing scheduled tasks observed in newer versions of Chrome.
  - Change the recommendation for disabling certain tasks to `Strict`,
    as they may interfere with Google Credential Provider as
    side-effect.
  - Separate into more categories/scripts for better granularity and
    documentation.
- 'Disable Adobe Acrobat update services':
  - Rename to 'Disable Adobe background automatic updates'.
  - Separate into more categories/scripts for enhanced granularity and
    documentation.
  - Remove end-of-life `Adobe Flash Player Updater` scheduled task and
    `adobeflashplayerupdatesvc`.
- 'Disable Dropbox automatic update services':
  - Rename to 'Disable Dropbox background automatic updates'.
  - Seperate into more categories/scripts.
- 'Disable Webcam Telemetry (`devicecensus.exe`)':
  - Rename to 'Disable census data collection'.
  - Add the disabling of the "Device User" task under it.
- 'Disable `devicecensus.exe` (telemetry) process':
  - Rename to 'Disable device and configuration data collection tool'.
- 'Disable Nvidia telemetry services':
  - Rename to 'Disable Nvidia telemetry scheduled tasks'.
  - Converted into a category for better granularity.
  - Improve documentation.
- 'Disable Defender tasks':
  - Rename to 'Disable Defender scheduled tasks'.
- 'Disable "Windows Defender ExploitGuard" task':
  - Rename to 'Disable "ExploitGuard MDM policy Refresh" task'.
- 'Remove Nvidia telemetry tasks':
  - Rename to 'Remove Nvidia telemetry packages', as "tasks" often
    refers to scheduled tasks.
- 'Disable Microsoft Office Subscription Heartbeat'
  - Rename to 'Disable "Microsoft Office Subscription Heartbeat" task'.
  - Remove disabling of the undocumented `Office 16 Subscription
    Heartbeat` task.
- 'Disable OneDrive scheduled tasks':
  - Improve documentation.
  - Add disabling of 'OneDrive Per-Machine Standalone Update' task.
- 'Disable Customer Experience Improvement Program'
  - Rename to 'Disable "Customer Experience Improvement Program"
    scheduled tasks' for clarity.
2023-11-15 21:30:42 +01:00
undergroundwires
949fac1a7c Refactor to enforce strictNullChecks
This commit applies `strictNullChecks` to the entire codebase to improve
maintainability and type safety. Key changes include:

- Remove some explicit null-checks where unnecessary.
- Add necessary null-checks.
- Refactor static factory functions for a more functional approach.
- Improve some test names and contexts for better debugging.
- Add unit tests for any additional logic introduced.
- Refactor `createPositionFromRegexFullMatch` to its own function as the
  logic is reused.
- Prefer `find` prefix on functions that may return `undefined` and
  `get` prefix for those that always return a value.
2023-11-12 22:54:00 +01:00
undergroundwires
7ab16ecccb Refactor watch sources for reliability
This commit changes `WatchSource` signatures into `Readonly<Ref>`s.

It provides two important benefits:

1. Eliminates the possibility of `undefined` states, that's result of
   using `WatchSource`s. This previously required additional null checks.
   By using `Readonly<Ref>`, the state handling becomes simpler and less
   susceptible to null errors.
2. Optimizes performance by using references:
   - Avoids the reactive layer of `computed` references when not needed.
   - The `watch` syntax, such as `watch(() => ref.value)`, can introduce
     side effects. For example, it does not account for `triggerRef` in
     scenarios where the value remains unchanged, preventing the watcher
     from running (vuejs/core#9579).
2023-11-11 13:55:21 +01:00
undergroundwires
58cd551a30 Refactor user selection state handling using hook
This commit introduces `useUserSelectionState` compositional hook. it
centralizes and allows reusing the logic for tracking and mutation user
selection state across the application.

The change aims to increase code reusability, simplify the code, improve
testability, and adhere to the single responsibility principle. It makes
the code more reliable against race conditions and removes the need for
tracking deep changes.

Other supporting changes:

- Introduce `CardStateIndicator` component for displaying the card state
  indicator icon, improving the testability and separation of concerns.
- Refactor `SelectionTypeHandler` to use functional code with more clear
  interfaces to simplify the code. It reduces complexity, increases
  maintainability and increase readability by explicitly separating
  mutating functions.
- Add new unit tests and extend improving ones to cover the new logic
  introduced in this commit. Remove the need to mount a wrapper
  component to simplify and optimize some tests, using parameter
  injection to inject dependencies intead.
2023-11-10 13:16:53 +01:00
undergroundwires
7770a9b521 Refactor DI for simplicity and type safety
This commit improves the dependency injection mechanism by introducing a
custom `injectKey` function.

Key improvements are:

- Enforced type consistency during dependency registration and
  instantiation.
- Simplified injection process, abstracting away the complexity with a
  uniform API, regardless of the dependency's lifetime.
- Eliminated the possibility of `undefined` returns during dependency
  injection, promoting fail-fast behavior.
- Removed the necessity for type casting to `symbol` for injection keys
  in unit tests by using existing types.
- Consalidated imports, combining keys and injection functions in one
  `import` statement.
2023-11-09 13:17:38 +01:00
undergroundwires
af7219f6e1 Fix tree node check states not being updated
This commit fixes a bug where the check states of tree nodes were not
correctly updated upon selecting predefined groups like "Standard",
"Strict", "None" and "All".

It resolves the issue by manually triggering of updates for mutated
array containing selected scripts.

It enhances test coverage to prevent regression and verify the correct
behavior of state updates.

This bug was introduced in commit
4995e49c46, which optimized reactivity by
removing deep state tracking.
2023-11-07 01:14:38 +01:00
undergroundwires
ca81f68ff1 Migrate to Vue 3.0 #230
- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"

Changes in detail:

- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
  - Move `provide`s for global dependencies to a bootsrapper from
    `App.vue`.
  - Remove `productionTip` setting (not in Vue 3).
  - Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
  - Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
  - Remove unused `shims-tsx.d.ts`.
  - Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
  - Remove old typing workaround for mounting components.
  - Rename `propsData` to `props`.
  - Remove unneeded `any` cast workarounds.
  - Move stubs and `provide`s under `global` object.

Other changes:

- Add `dmg-license` dependency explicitly due to failing electron builds
  on macOS (electron-userland/electron-builder#6520,
  electron-userland/electron-builder#6489). This was a side-effect of
  updating dependencies for this commit.
2023-11-01 13:39:39 +01:00
undergroundwires
4995e49c46 Improve UI performance by optimizing reactivity
- Replace `ref`s with `shallowRef` when deep reactivity is not needed.
- Replace `readonly`s with `shallowReadonly` where the goal is to only
  prevent `.value` mutation.
- Remove redundant `ref` in `SizeObserver.vue`.
- Remove redundant nested `ref` in `TooltipWrapper.vue`.
- Remove redundant `events` export from `UseCollectionState.ts`.
- Remove redundant `computed` from `UseCollectionState.ts`.
- Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary
  after using `shallowRef`.
- Add missing unit tests for `UseTreeViewFilterEvent`.
- Add missing stub for `FilterChangeDetails`.
2023-10-31 13:57:57 +01:00
undergroundwires
79b46bf210 Improve performance of rendering during search
Optimize the tree view rendering during searches by enhancing the render
queue ordering. This update changes the rendering order to prioritize
visible nodes, leading to faster appearance of these nodes during
searches. The ordering logic now ignores the depth in the hierarchy and
instead focused on the node order. The collapsed check for the node
itself is removed, ensuring that visible collapsed parents are first
while their invisible children are rendered later.
2023-10-18 16:44:49 +02:00
undergroundwires
48730bca05 Implement new UI component for icons #230
- Introduce `AppIcon.vue`, offering improved performance over the
  previous `fort-awesome` dependency. This implementation reduces bundle
  size by 67.31KB (tested for web using `npm run build -- --mode prod`).
- Migrate Font Awesome 5 icons to Font Awesome 6.

This commit facilitates migration to Vue 3.0 (#230) and ensures no Vue
component remains tightly bound to a specific Vue version, enhancing
code portability.

Font Awesome license is not included because Font Awesome revokes its
right:

> "Attribution is no longer required as of Font Awesome 3.0"
>
> Sources:
>
> - https://fontawesome.com/v4/license/ (archived: https://web.archive.org/web/20231003213441/https://fontawesome.com/v4/license/, https://archive.ph/Yy9j5)
> - https://github.com/FortAwesome/Font-Awesome/wiki (archived: https://web.archive.org/web/20231003214646/https://github.com/FortAwesome/Font-Awesome/wiki, https://archive.ph/C6sXv)

This commit removes following third-party production dependencies:

- `@fortawesome/vue-fontawesome`
- `@fortawesome/free-solid-svg-icons`
- `@fortawesome/free-regular-svg-icons`
- `@fortawesome/free-brands-svg-icons`
- `@fortawesome/fontawesome-svg-core`
2023-10-11 18:38:19 +02:00
undergroundwires
bd2082e8c5 Fix slow appearance of nodes on tree view
The tree view rendering performance is optimized by improving the node
render queue ordering. The node rendering order is modified based on the
expansion state and the depth in the hierarchy, leading to faster
rendering of visible nodes. This optimization is applied when the tree
nodes are not expanded to improve the rendering speed.

This new ordering ensures that nodes are rendered more efficiently,
prioritizing nodes that are collapsed and are at a higher level in the
hierarchy.
2023-09-25 14:21:29 +02:00