Commit Graph

220 Commits

Author SHA1 Message Date
undergroundwires
bc4879cfe9 Fix Chromium scrollbar-induced layout shifts
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.
2024-05-09 18:35:02 +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
ab25e0a066 Improve desktop icon quality and generation
This commit refactors the icon and logo generation process by replacing
multiple dependencies with ImageMagick. This simplifies the build
process and enhances maintainability.

Key changes:

- Remove unnecessary icon files for macOS (.icns) and Linux
  (size-specific PNGs). Electron-builder can now auto-generate these
  from a single `logo.png` starting from version 19.54.0, see:
  - electron-userland/electron-builder#1682
  - electron-userland/electron-builder#2533
- Retain `ico` generation with multiple sizes to fix pixelated/bad
  looking icons on Windows, see:
  - electron-userland/electron-builder#7328
  - electron-userland/electron-builder#3867
- Replaced `svgexport`, `icon-gen`, and `electron-icon-builder`
  dependencies with ImageMagick, addressing issues with outdated
  dependencies and unreliable CI/CD builds.
- Move electron-builder build resources to
  `src/presentation/electron/build` for better project structure.
- Improve `electron-builder` configuration file by making it
  importable/reusable without prebuilding the Electron application.
2024-05-04 12:09:42 +02:00
undergroundwires
813d820b85 Fix blank window on load on desktop version #348
This commit updates the application startup behavior to prevent showing
a blank window until it's fully loaded on all platforms. This enhancement
improves the user experience by ensuring the UI only becomes visible
when it is ready to interact with.

This fix contributes to a smoother user experience by aligning the
window display timing with content readiness, thus avoiding the brief
display of an empty screen.

Changes:

- Set window to initially hide until fully loaded using the
  `ready-to-show` event.
- Show the window, focus on it and bring it front once it is loaded.
  Windows requires additional logic to put Window to front, see
  electron/electron#2867.
- Parametrize the behavior of opening developer tools for easier
  configuration during testing.
2024-05-03 12:03:36 +02:00
undergroundwires
8c17396285 Fix script cancellation with new dialog on Linux
This commit improves the management of script execution process by
enhancing the way terminal commands are handled, paving the way for
easier future modifications and providing clearer feedback to users when
scripts are cancelled.

Previously, the UI displayed a generic error message which could lead to
confusion if the user intentionally cancelled the script execution. Now,
a specific error dialog will appear, improving the user experience by
accurately reflecting the action taken by the user.

This change affects code execution on Linux where closing GNOME terminal
returns exit code `137` which is then treated by script cancellation by
privacy.sexy to show the accurate error dialog. It does not affect macOS
and Windows as curret commands result in success (`0`) exit code on
cancellation.

Additionally, this update encapsulates OS-specific logic into dedicated
classes, promoting better separation of concerns and increasing the
modularity of the codebase. This makes it simpler to maintain and extend
the application.

Key changes:

- Display a specific error message for script cancellations.
- Refactor command execution into dedicated classes.
- Improve file permission setting flexibility and avoid setting file
  permissions on Windows as it's not required to execute files.
- Introduce more granular error types for script execution.
- Increase logging for shell commands to aid in debugging.
- Expand test coverage to ensure reliability.
- Fix error dialogs not showing the error messages due to incorrect
  propagation of errors.

Other supported changes:

- Update `SECURITY.md` with details on script readback and verification.
- Fix a typo in `IpcRegistration.spec.ts`.
- Document antivirus scans in `desktop-vs-web-features.md`.
2024-04-30 15:04:59 +02:00
undergroundwires
cb144ae472 Fix inability to tap outside modal on mobile
This commit addresses touch target size issues on mobile devices by
adjusting modal margins. The larger margin allows for easier interaction
for modal dialogs by tapping outside the modal area on smaller screens.

Key changes:

- Introduce 30px margin on larger screens and 20px on smaller devices
  around modals, adhering to accessibility guidelines.
- Remove `max-height: 90vh;` in favor of consistent vertical margins,
  centralizing the spacing control via the `margin` property.
- Remove `max-height: 90v;` used to display scroll-bars as the vertical
  margin is now handled by `margin` property in single place.
2024-04-15 09:21:31 +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
bc7e1faa1c Fix horizontal layout shift after script selection
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.
2024-04-02 12:17:20 +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
ec34ac1124 Fix tooltip styling inconsistency
This commit fixes inconsistent tooltip styling by setting the font
explicitly on the tooltip container to ensure uniform tooltip fonts.

As tooltip is rendered inside the parent elements' DOM, styling parent
element's font was also styling the font's font due to style
propogation, but setting fonts explicitly on tooltip ensure this does
not happen.
2024-03-19 09:09:29 +01:00
undergroundwires
840adf9429 Bump Electron to latest and use native ESM
This commit bumps Electron and related dependencies to their latest
versions to leverage native ESM support. It adjusts build configuration
to use native ESM support instead of relying on CommonJS bundling.

Key changes:

- Bump Electron to latest v29.
  Electron v28 ships with native ESM/ECMAScript modules support.
  Details on Electron ESM support:
    - electron/electron#21457
    - electron/electron#37535
- Bump `electron-builder` to latest v24.13.
  `electron-builder` is used to package and publish the application.
  It supports ESM since 24.10.
  Details on `electron-builder` ESM support:
    - electron-userland/electron-builder#7936
    - electron-userland/electron-builder#7935
- Bump `electron-log` to latest v5.1.
  `electron-log` supports ESM since version 5.0.4.
  Details on `electron-log` ESM support:
    - megahertz/electron-log#390.
- Change `electron-vite` configuration to bundle as ESM instead of
  CommonJS to leverage Electron's native ESM support.

Other supporting changes:

- Add type hint for electron-builder configuration file.
- Update import statements for `electron-updater` as it still is a
  CommonJS module and does not support ESM.
  Details:
    - electron-userland/electron-builder#7976
- Improve `electron-builder` configuration file to dynamically locate
  main entry files, supporting various JavaScript file extensions
  (`.js`, `.mjs` and `.cjs`) to facilitate easier future changes.
- Change comment about Electron process-specific module alias
  registration. This issue has been fixed in `electron-vite`, but
  subpath module imports for Electron still do not work when building
  tests (`npm run test:unit`).
  Details:
   - alex8088/electron-vite#372
- Add `electron-log` in bundling process instead of externalizing to
  workaround Electron ESM loader issues with subpath imports (inability
  to do `electron-log/main`).
  Details:
    - alex8088/electron-vite#401
    - electron/electron#41241
- Improve desktop runtime error checks' assertion message for better
  clarity.
2024-03-18 11:55:56 +01:00
undergroundwires
4ac1425f76 Migrate to Vite 5 and adjust configurations
This commit updates the `vite` dependency to the latest version (5.1.X)
and makes necessary adjustments to accommodate deprecations and new
features introduced in Vite 5.1.X.

Changes include:

- Modify the import statement for SVG files to use `query: '?raw'` syntax
  due to the deprecation of the `as: raw` option.
- Update `moduleResolution` setting to `Bundler` in `tsconfig.json` to
  support the new TypeScript 5 option, aligning with Vite 5's migration
  guide for Rollup 4 compatibility without requiring file extensions on
  relative imports.

Plugin migrations for Vite 5 support:

- Bump `@modyfi/vite-plugin-yaml`, see @modyfi/vite-plugin-yaml#22.
- Bump `electron-vite`, see alex8088/electron-vite#335.
- Bump `vitejs/plugin-legacy`.
- Bump `vitejs/vite-plugin-vue`, see vitejs/vite-plugin-vue#290.
2024-03-13 09:49:26 +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
19645248ab Fix tooltip falling behind elements on fade out
This commit ensures that the tooltip maintains its `z-index` during both
visibility and invisibility transitions. This prevents the tooltip from
falling behind other elements during its fade-in and fade-out
animations, providing smoother and more visually consistent user
experience.
2024-02-23 14:00:37 +01:00
undergroundwires
c7fa4b6d02 Update meta title and description
This commit changes outdated meta description which suggested
privacy.sexy is only for Windows.

It also changes title to use `Maximize your privacy` instead of using
the word "enforce".
2024-02-21 00:34:39 +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
ebd82853dd Remove 'preview' label from Linux options
Since the 0.12.0 release, Linux support has undergone extensive testing
and all reported issues have been addressed. This change removes the
'preview' label from all UI elements related to Linux, signifying that
Linux support is mature and fully integrated.

- The 'preview' text next to Linux in the operating system selection
  and other related UI elements has been omitted.
- Users can now select Linux without the implication of it being an
  experimental feature, encouraging trust and wider adoption.
2024-02-15 21:28:09 +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
aa4205ff7a Remove playful emojis (🍑🍆)
Improve title, documentation and metadata readability by removing
emojis.

Rationale:

- Visual clutter.
- Inconsistent look across different browsers
- Informal tone.
2024-02-02 15:38:17 +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
6ab6dacd1b Limit tooltip width for improved readability
Tooltip content now has a maximum width set to accommodate an optimal
character count per line, enhancing readability and interface
cleanliness.

This limit is grounded in typographic research suggesting that 50-75
characters per line is ideal for text readability, with tooltips being
targeted to the lower end of this spectrum to maintain brevity and
clarity.
2024-01-29 15:46:54 +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
6ada8d425c Improve script error dialogs #304
- Include the script's directory path #304.
- Exclude Windows-specific instructions on non-Windows OS.
- Standardize language across dialogs for consistency.

Other supporting changes:

- Add script diagnostics data collection from main process.
- Document script file storage and execution tamper protection in
  SECURITY.md.
- Remove redundant comment in `NodeReadbackFileWriter`.
- Centralize error display for uniformity and simplicity.
- Simpify `WindowVariablesValidator` to omit checks when not on the
  renderer process.
- Improve and centralize Electron environment detection.
- Use more emphatic language (don't worry) in error messages.
2024-01-17 23:59:05 +01:00
undergroundwires
f03fc24098 Add AD detection on desktop app #264, #304
This commit addresses issues #264 and #304, where users were not
receiving error messages when script execution failed due to
antivirus intervention, particularly with Microsoft Defender.
Now, desktop app users will see a detailed error message with
guidance on next steps if script saving or execution fails due
to antivirus removal.

Key changes:

- Implement a check to detect failure in file writing,
  including reading the written file back. This method effectively
  detects antivirus interventions, as the read operation triggers
  an antivirus scan, leading to file deletion by the antivirus.
- Introduce a specific error message for scenarios where an
  antivirus intervention is detected.
2024-01-16 22:26:28 +01:00
undergroundwires
756c736e21 Add Windows save instructions UI and fix URL #296
- Add Windows instruction dialog when saving scripts for Windows.
- Fix incorrect macOS download URL given for Linux instructions.
- Refactor UI rendering, eleminating the use of `v-html` and JavaScript
  variables to hold HTML code.
2024-01-15 22:38:39 +01:00
undergroundwires
e09db0f1bd Show save/execution error dialogs on desktop #264
This commit introduces system-native error dialogs on desktop
application for code save or execution failures, addressing user confusion
described in issue #264.

This commit adds informative feedback when script execution or saving
fails.

Changes:

- Implement support for system-native error dialogs.
- Refactor `CodeRunner` and `Dialog` interfaces and their
  implementations to improve error handling and provide better type
  safety.
- Introduce structured error handling, allowing UI to display detailed
  error messages.
- Replace error throwing with an error object interface for controlled
  handling. This ensures that errors are propagated to the renderer
  process without being limited by Electron's error object
  serialization limitations as detailed in electron/electron#24427.
- Add logging for dialog actions to aid in troubleshooting.
- Rename `fileName` to `defaultFilename` in `saveFile` functions
  to clarify its purpose.
- Centralize message assertion in `LoggerStub` for consistency.
- Introduce `expectTrue` in tests for clearer boolean assertions.
- Standardize `filename` usage across the codebase.
- Enhance existing test names and organization for clarity.
- Update related documentation.
2024-01-14 22:35:53 +01:00
undergroundwires
c546a33eff Show native save dialogs in desktop app #50, #264
This commit introduces native operating system file dialogs in the
desktop application replacing the existing web-based dialogs.

It lays the foundation for future enhancements such as:

- Providing error messages when saving or executing files, addressing
  #264.
- Creating system restore points, addressing #50.

Documentation updates:

- Update `desktop-vs-web-features.md` with added functionality.
- Update `README.md` with security feature highlights.
- Update home page documentation to emphasize security features.

Other supporting changes include:

- Integrate IPC communication channels for secure Electron dialog API
  interactions.
- Refactor `IpcRegistration` for more type-safety and simplicity.
- Introduce a Vue hook to encapsulate dialog functionality.
- Improve errors during IPC registration for easier troubleshooting.
- Move `ClientLoggerFactory` for consistency in hooks organization and
  remove `LoggerFactory` interface for simplicity.
- Add tests for the save file dialog in the browser context.
- Add `Blob` polyfill in tests to compensate for the missing
  `blob.text()` function in `jsdom` (see jsdom/jsdom#2555).

Improve environment detection logic:

- Treat test environment as browser environments to correctly activate
  features based on the environment. This resolves issues where the
  environment is misidentified as desktop, but Electron preloader APIs
  are missing.
- Rename `isDesktop` environment identification variable to
  `isRunningAsDesktopApplication` for better clarity and to avoid
  confusion with desktop environments in web/browser/test environments.
- Simplify `BrowserRuntimeEnvironment` to consistently detect
  non-desktop application environments.
- Improve environment detection for Electron main process
  (electron/electron#2288).
2024-01-13 18:04:23 +01:00
undergroundwires
b404a91ada Fix invisible script execution on Windows #264
This commit addresses an issue in the privacy.sexy desktop application
where scripts executed as administrator on Windows were running in the
background. This was observed in environments like Windows Pro VMs on
Azure, where operations typically run with administrative privileges.

Previously, the application used the `"$path"` shell command to execute
scripts. This mechanism failed to activate the logic for requesting
admin privileges if the app itself was running as an administrator.
To resolve this, the script execution process has been modified to
explicitly ask for administrator privileges using the `VerbAs` method.
This ensures that the script always runs in a new `cmd.exe` window,
enhancing visibility and user interaction.

Other supporting changes:

- Rename the generated script file from `run-{timestamp}-{extension}` er
  to `{timestamp}-privacy-script-{extension}` for clearer identification
  and better file sorting.
- Refactor `ScriptFileCreator` to parameterize file extension and
  script name.
- Rename `OsTimestampedFilenameGenerator` to
  `TimestampedFilenameGenerator` to better reflect its new and more
  scoped functionality after refactoring mentioned abvoe.
- Remove `setAppName()` due to ineffective behavior in Windows.
- Update `SECURITY.md` to highlight that the app doesn't require admin
  rights for standard operations.
- Add `.editorconfig` settings for PowerShell scripts.
- Add a integration test for script execution logic. Improve environment
  detection for more reliable test execution.
- Disable application logging during unit/integration tests to keep test
  outputs clean and focused.
2024-01-09 20:44:06 +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
c84a1bb74c Fix script deletion during execution on desktop
This commit fixes an issue seen on certain Windows environments (Windows
10 22H2 and 11 23H2 Pro Azure VMs) where scripts were being deleted
during execution due to temporary directory usage. To resolve this,
scripts are now stored in a persistent directory, enhancing reliability
for long-running scripts and improving auditability along with
troubleshooting.

Key changes:

- Move script execution logic to the `main` process from `preloader` to
  utilize Electron's `app.getPath`.
- Improve runtime environment detection for non-browser environments to
  allow its usage in Electron main process.
- Introduce a secure module to expose IPC channels from the main process
  to the renderer via the preloader process.

Supporting refactorings include:

- Simplify `CodeRunner` interface by removing the `tempScriptFolderName`
  parameter.
- Rename `NodeSystemOperations` to `NodeElectronSystemOperations` as it
  now wraps electron APIs too, and convert it to class for simplicity.
- Rename `TemporaryFileCodeRunner` to `ScriptFileCodeRunner` to reflect
  its new functinoality.
- Rename `SystemOperations` folder to `System` for simplicity.
- Rename `HostRuntimeEnvironment` to `BrowserRuntimeEnvironment` for
  clarity.
- Refactor main Electron process configuration to align with latest
  Electron documentation/recommendations.
- Refactor unit tests `BrowserRuntimeEnvironment` to simplify singleton
  workaround.
- Use alias imports like `electron/main` and `electron/common` for
  better clarity.
2024-01-06 18:47:58 +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
40f5eb8334 Fix handling special chars in script paths
This commit improves the handling of paths with spaces or special
characters during script execution in the desktop application.

Key improvements:

- Paths are now quoted for macOS/Linux, addressing issues with
  whitespace or single quotes.
- Windows paths are enclosed in double quotes to handle special
  characters.

Other supporting changes:

- Add more documentation for terminal execution commands.
- Refactor terminal script file execution into a dedicated file for
  improved separation of concerns.
- Refactor naming of `RuntimeEnvironment` to align with naming
  conventions (no interface with I prefix) and for clarity.
- Refactor `TemporaryFileCodeRunner` to simplify it by removing the `os`
  parameter and handling OS-specific logic within the filename generator
  instead.
- Refactor `fileName` to `filename` for consistency.
2024-01-02 16:16:31 +01:00
undergroundwires
cdc32d1f12 Improve desktop script runs with timestamps & logs
Improve script execution in the desktop app by introducing timestamped
filenames and detailed logging. These changes aim to facilitate easier
debugging, auditing and overall better user experience.

Key changes:

- Add timestamps in filenames for temporary files to aid in
  troubleshooting and auditing.
- Add application logging throughout the script execution process to
  enhance troubleshooting capabilities.

Other supporting changes:

- Refactor `TemporaryFileCodeRunner` with subfunctions for improved
  readability, maintenance, reusability and extensibility.
- Refactor unit tests for `TemporaryFileCodeRunner` for improved
  granularity and simplicity.
- Create centralized definition of supported operating systems by
  privacy.sexy to ensure robust and consistent test case creation.
- Simplify the `runCode` method by removing the file extension
  parameter; now handled internally by `FileNameGenerator`.
2023-12-31 14:28:58 +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
2f06043559 Bump Node.js environment to 18.x
- Bump Node.js to version 18. This change is necessary as Node.js v16
  will reach end-of-life on 2023-09-11. It also ensure compatibility
  with dependencies requiring minimum of Node.js v18, such as `vite`,
  `@vitejs`plugin-legacy` and `icon-gen`.
- Bump `setup-node` action to v4.
- Recommend using the `nvm` tool for managing Node.js versions in the
  documentation.
- Update documentation to point to code reference for required Node.js
  version. This removes duplication of information, and keeps the code
  as single source of truth for required Node.js version.
- Refactor code to adopt the `node:` protocol for Node API imports as
  per Node.js 18 standards. This change addresses ambiguities and aligns
  with Node.js best practices (nodejs/node#38343). Currently, there is
  no ESLint rule to enforce this protocol, as noted in
  import-js/eslint-plugin-import#2717.
- Replace `cross-fetch` dependency with the native Node.js fetch API
  introduced in Node.js 18. Adjust type casting for async iterable read
  streams to align with the latest Node.js APIs, based on discussions in
  DefinitelyTyped/DefinitelyTyped#65542.
2023-12-28 11:57:38 +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