From 6a79383082e80b914db4a4cb80c764fe09aab3cf Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 26 Jun 2026 14:10:41 +0200 Subject: [PATCH] :bug: Blur info doesn't show on inspect in certain shapes (#10427) * :bug: Blur info doesn't show on inspect in certain shapes * :tada: Add test --- .../playwright/ui/specs/inspect-tab.spec.js | 47 +++++++++++++++++ .../src/app/main/ui/inspect/attributes.cljs | 28 +++++------ .../app/main/ui/inspect/attributes/blur.cljs | 50 +++++++++++++------ .../main/ui/inspect/attributes/geometry.cljs | 2 +- .../main/ui/inspect/attributes/layout.cljs | 2 +- .../ui/inspect/attributes/layout_element.cljs | 2 +- .../main/ui/inspect/attributes/shadow.cljs | 3 +- .../app/main/ui/inspect/attributes/svg.cljs | 2 +- .../app/main/ui/inspect/attributes/text.cljs | 2 +- frontend/src/app/main/ui/inspect/styles.cljs | 3 +- .../main/ui/inspect/styles/panels/blur.cljs | 24 +++++---- .../app/util/code_gen/style_css_formats.cljs | 2 +- 12 files changed, 118 insertions(+), 49 deletions(-) diff --git a/frontend/playwright/ui/specs/inspect-tab.spec.js b/frontend/playwright/ui/specs/inspect-tab.spec.js index 064ae644b2..1b1e6362c7 100644 --- a/frontend/playwright/ui/specs/inspect-tab.spec.js +++ b/frontend/playwright/ui/specs/inspect-tab.spec.js @@ -284,6 +284,53 @@ test.describe("Inspect tab - Styles", () => { await setupFile(workspacePage); await selectLayer(workspacePage, shapeToLayerName.blur); + + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Blur"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Blur on not svg compatible shape", async ({ page }) => { + const workspacePage = new WasmWorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.blur); + + await workspacePage.page.getByTestId("add-stroke").click(); + await workspacePage.page.getByTestId("stroke.alignment").click(); + await workspacePage.page.getByRole("option", { name: "Center" }).click(); + + await openInspectTab(workspacePage); + + const panel = await getPanelByTitle(workspacePage, "Blur"); + await expect(panel).toBeVisible(); + + const propertyRow = panel.getByTestId("property-row"); + const propertyRowCount = await propertyRow.count(); + + expect(propertyRowCount).toBeGreaterThanOrEqual(1); + }); + + test("Shape - Background Blur on not svg compatible shape", async ({ + page, + }) => { + const workspacePage = new WasmWorkspacePage(page); + await setupFile(workspacePage); + + await selectLayer(workspacePage, shapeToLayerName.blur); + + await workspacePage.page.getByRole('combobox', { name: 'Blur type select' }).click(); + await workspacePage.page.getByRole('option', { name: 'Background blur' }).click(); + await workspacePage.page.getByTestId("add-stroke").click(); + await workspacePage.page.getByTestId("stroke.alignment").click(); + await workspacePage.page.getByRole("option", { name: "Center" }).click(); + await openInspectTab(workspacePage); const panel = await getPanelByTitle(workspacePage, "Blur"); diff --git a/frontend/src/app/main/ui/inspect/attributes.cljs b/frontend/src/app/main/ui/inspect/attributes.cljs index 0223bb8d60..7535709328 100644 --- a/frontend/src/app/main/ui/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/inspect/attributes.cljs @@ -12,15 +12,15 @@ [app.common.types.components-list :as ctkl] [app.main.ui.hooks :as hooks] [app.main.ui.inspect.annotation :refer [annotation*]] - [app.main.ui.inspect.attributes.blur :refer [blur-panel]] + [app.main.ui.inspect.attributes.blur :refer [blur-panel*]] [app.main.ui.inspect.attributes.fill :refer [fill-panel*]] - [app.main.ui.inspect.attributes.geometry :refer [geometry-panel]] - [app.main.ui.inspect.attributes.layout :refer [layout-panel]] - [app.main.ui.inspect.attributes.layout-element :refer [layout-element-panel]] - [app.main.ui.inspect.attributes.shadow :refer [shadow-panel]] + [app.main.ui.inspect.attributes.geometry :refer [geometry-panel*]] + [app.main.ui.inspect.attributes.layout :refer [layout-panel*]] + [app.main.ui.inspect.attributes.layout-element :refer [layout-element-panel*]] + [app.main.ui.inspect.attributes.shadow :refer [shadow-panel*]] [app.main.ui.inspect.attributes.stroke :refer [stroke-panel*]] - [app.main.ui.inspect.attributes.svg :refer [svg-panel]] - [app.main.ui.inspect.attributes.text :refer [text-panel]] + [app.main.ui.inspect.attributes.svg :refer [svg-panel*]] + [app.main.ui.inspect.attributes.text :refer [text-panel*]] [app.main.ui.inspect.attributes.variant :refer [variant-panel*]] [app.main.ui.inspect.attributes.visibility :refer [visibility-panel*]] [app.main.ui.inspect.exports :refer [exports]] @@ -61,16 +61,16 @@ :workspace-element-options (= from :workspace))} (for [[idx option] (map-indexed vector options)] [:> (case option - :geometry geometry-panel - :layout layout-panel - :layout-element layout-element-panel + :geometry geometry-panel* + :layout layout-panel* + :layout-element layout-element-panel* :fill fill-panel* :stroke stroke-panel* - :shadow shadow-panel - :blur blur-panel + :shadow shadow-panel* + :blur blur-panel* :visibility visibility-panel* - :text text-panel - :svg svg-panel + :text text-panel* + :svg svg-panel* :variant variant-panel*) {:key idx :shapes shapes diff --git a/frontend/src/app/main/ui/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/inspect/attributes/blur.cljs index 821df98814..ba50e6be32 100644 --- a/frontend/src/app/main/ui/inspect/attributes/blur.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/blur.cljs @@ -13,6 +13,7 @@ [app.main.ui.components.copy-button :refer [copy-button*]] [app.main.ui.components.title-bar :refer [inspect-title-bar*]] [app.util.code-gen.style-css :as css] + [app.util.code-gen.style-css-formats :refer [format-blur]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -20,8 +21,8 @@ (or (:blur shape) (:background-blur shape))) -(mf/defc blur-panel - [{:keys [objects shapes]}] +(mf/defc blur-panel* + [{:keys [shapes]}] (let [render-wasm? (features/use-feature "render-wasm/v1") bg-blur? (and render-wasm? (contains? cf/flags :background-blur)) @@ -36,34 +37,51 @@ :class (stl/css :title-wrapper) :title-class (stl/css :blur-attr-title)} (when (= (count shapes) 1) - (let [background-blur (:background-blur (first shapes)) - layer-blur (:blur (first shapes))] + (let [layer-blur (:blur (first shapes)) + blur-property :filter + blue-value-raw (get-in (first shapes) [:blur :value]) + blur-property-value (css/format-css-property [blur-property blue-value-raw] {}) + + background-blur (:background-blur (first shapes)) + background-blur-property :backdrop-filter + background-blur-value-raw (get-in (first shapes) [:background-blur :value]) + background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {})] (when background-blur - [:> copy-button* {:data (css/get-css-property objects (first shapes) :backdrop-filter) + [:> copy-button* {:data (dm/str background-blur-property-value) :class (stl/css :copy-btn-title)}]) (when layer-blur - [:> copy-button* {:data (css/get-css-property objects (first shapes) :filter) + [:> copy-button* {:data (dm/str blur-property-value) :class (stl/css :copy-btn-title)}])))] [:div {:class (stl/css :attributes-content)} (for [shape shapes] - (let [background-blur (:background-blur (first shapes)) - layer-blur (:blur (first shapes))] - [:div {:class (stl/css :blur-row) - :key (dm/str "block-" (:id shape) "-blur")} + (let [layer-blur (:blur (first shapes)) + blur-property :filter + blue-value-raw (get-in (first shapes) [:blur :value]) + blur-property-value (css/format-css-property [blur-property blue-value-raw] {}) + blur-value-detail (format-blur blue-value-raw) + + background-blur (:background-blur (first shapes)) + background-blur-property :backdrop-filter + background-blur-value-raw (get-in (first shapes) [:background-blur :value]) + background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {}) + background-blur-value-detail (format-blur background-blur-value-raw)] + [:* (when background-blur - [:div {:key (dm/str "block-" (:id shape) "-background-blur")} + [:div {:class (stl/css :blur-row) + :key (dm/str "block-" (:id shape) "-background-blur")} [:div {:class (stl/css :global/attr-label)} "Backdrop Filter"] [:div {:class (stl/css :global/attr-value)} - [:> copy-button* {:data (css/get-css-property objects shape :backdrop-filter)} + [:> copy-button* {:data (dm/str background-blur-property-value)} [:div {:class (stl/css :button-children)} - (css/get-css-value objects shape :backdrop-filter)]]]]) + (dm/str background-blur-value-detail)]]]]) (when layer-blur - [:div {:key (dm/str "block-" (:id shape) "-layer-blur")} + [:div {:class (stl/css :blur-row) + :key (dm/str "block-" (:id shape) "-layer-blur")} [:div {:class (stl/css :global/attr-label)} "Filter"] [:div {:class (stl/css :global/attr-value)} - [:> copy-button* {:data (css/get-css-property objects shape :filter)} + [:> copy-button* {:data (dm/str blur-property-value)} [:div {:class (stl/css :button-children)} - (css/get-css-value objects shape :filter)]]]])]))]]))) + (dm/str blur-value-detail)]]]])]))]]))) diff --git a/frontend/src/app/main/ui/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/inspect/attributes/geometry.cljs index 03abd63f59..dbfa79a52c 100644 --- a/frontend/src/app/main/ui/inspect/attributes/geometry.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/geometry.cljs @@ -39,7 +39,7 @@ [:div {:class (stl/css :button-children)} value]]]])))]) -(mf/defc geometry-panel +(mf/defc geometry-panel* [{:keys [objects shapes]}] [:div {:class (stl/css :attributes-block)} [:> inspect-title-bar* diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/inspect/attributes/layout.cljs index b82102de43..8c2d227f6f 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/layout.cljs @@ -49,7 +49,7 @@ [:> copy-button* {:data (css/get-css-property objects shape property)} [:div {:class (stl/css :button-children)} value]]]])))) -(mf/defc layout-panel +(mf/defc layout-panel* [{:keys [objects shapes]}] (let [shapes (->> shapes (filter ctl/any-layout?))] diff --git a/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs index 87b3cb1d0c..11b904d1a7 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs @@ -44,7 +44,7 @@ [:> copy-button* {:data (css/get-css-property objects shape property)} [:div {:class (stl/css :button-children)} value]]]])))) -(mf/defc layout-element-panel +(mf/defc layout-element-panel* [{:keys [objects shapes]}] (let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes) diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs index 140f9de5c7..0f092d9b6c 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs @@ -56,7 +56,8 @@ :copy-data (copy-color-data (:color shadow) color-format*) :on-change-format on-change-format}]])) -(mf/defc shadow-panel [{:keys [shapes]}] +(mf/defc shadow-panel* + [{:keys [shapes]}] (let [shapes (->> shapes (filter has-shadow?))] (when (and (seq shapes) (> (count shapes) 0)) diff --git a/frontend/src/app/main/ui/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/inspect/attributes/svg.cljs index 11222a5c47..5ccb3dacee 100644 --- a/frontend/src/app/main/ui/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/svg.cljs @@ -47,7 +47,7 @@ (for [[attr-key attr-value] (:svg-attrs shape)] [:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-block-key-" (d/name attr-key))}])]) -(mf/defc svg-panel +(mf/defc svg-panel* [{:keys [shapes]}] (let [shape (first shapes)] (when (seq (:svg-attrs shape)) diff --git a/frontend/src/app/main/ui/inspect/attributes/text.cljs b/frontend/src/app/main/ui/inspect/attributes/text.cljs index 02462229ad..a8565fde26 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/text.cljs @@ -151,7 +151,7 @@ :style full-style :text text}]))) -(mf/defc text-panel +(mf/defc text-panel* [{:keys [shapes]}] (when-let [shapes (seq (filter has-text? shapes))] [:div {:class (stl/css :attributes-block)} diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index 7b8238e40c..df61a66778 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -246,8 +246,7 @@ (let [shapes (->> shapes (filter has-blur?))] (when (seq shapes) [:> style-box* {:panel :blur} - [:> blur-panel* {:shapes shapes - :objects objects}]])) + [:> blur-panel* {:shapes shapes}]])) ;; TEXT PANEL :text (let [shapes (filter has-text? shapes)] diff --git a/frontend/src/app/main/ui/inspect/styles/panels/blur.cljs b/frontend/src/app/main/ui/inspect/styles/panels/blur.cljs index b67c466d88..6f089cf256 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/blur.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/blur.cljs @@ -11,31 +11,35 @@ [app.main.ui.inspect.attributes.common :as cmm] [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]] [app.util.code-gen.style-css :as css] + [app.util.code-gen.style-css-formats :refer [format-blur]] [rumext.v2 :as mf])) (mf/defc blur-panel* - [{:keys [shapes objects]}] + [{:keys [shapes]}] [:div {:class (stl/css :blur-panel)} (for [shape shapes] [:div {:key (:id shape) :class (stl/css :blur-shape)} (let [blur-property :filter - blur-value (css/get-css-value objects shape blur-property) - background-blur-property :backdrop-filter + blue-value-raw (get-in shape [:blur :value]) + blur-value-detail (format-blur blue-value-raw) blur-property-name (cmm/get-css-rule-humanized blur-property) - blur-property-value (css/get-css-property objects shape blur-property) - background-blur-value (css/get-css-value objects shape background-blur-property) + blur-property-value (css/format-css-property [blur-property blue-value-raw] {}) + + background-blur-property :backdrop-filter + background-blur-value-raw (get-in shape [:background-blur :value]) + background-blur-value-detail (format-blur background-blur-value-raw) background-blur-property-name (cmm/get-css-rule-humanized background-blur-property) - background-blur-property-value (css/get-css-property objects shape background-blur-property)] + background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {})] [:div - (when blur-property-value + (when blue-value-raw [:> properties-row* {:key (dm/str "blur-property-" blur-property) :term blur-property-name - :detail (dm/str blur-value) + :detail blur-value-detail :property blur-property-value :copiable true}]) - (when background-blur-property-value + (when background-blur-value-raw [:> properties-row* {:key (dm/str "blur-property-" background-blur-property) :term background-blur-property-name - :detail (dm/str background-blur-value) + :detail background-blur-value-detail :property background-blur-property-value :copiable true}])])])]) diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index 9a650f7528..85e305fa4d 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -174,7 +174,7 @@ (map #(format-shadow->css % options)) (str/join ", "))) -(defn- format-blur +(defn format-blur [value] (dm/fmt "blur(%)" (fmt/format-pixels value)))