mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
❇️ Debugging panel for development
This commit is contained in:
alonso.torres
parent
28663b5ff6
commit
7d48b86e46
9 changed files with 179 additions and 40 deletions
3
frontend/resources/images/icons/bug.svg
Normal file
3
frontend/resources/images/icons/bug.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="511.577" height="466.552" viewBox="0 0 135.355 123.442">
|
||||
<path d="M64.506 123.318a45.44 45.44 0 0 1-33.31-18.079l-1.957-2.606-8.759 8.745c-4.817 4.81-9.094 8.87-9.504 9.023-1.13.42-3.116.33-4.13-.187-.5-.254-1.266-.91-1.704-1.459-1.012-1.267-1.274-3.567-.568-4.98.249-.497 4.856-5.32 10.239-10.717l9.787-9.814-.565-1.828c-.972-3.14-1.607-6.416-1.926-9.94L21.8 78.08l-8.876-.006c-8.064-.005-8.974-.05-9.935-.495-4.076-1.88-3.959-7.41.194-9.144.818-.342 2.442-.41 9.852-.41h8.872V50.163l-8.353-8.333c-4.683-4.672-8.59-8.789-8.892-9.37-.8-1.539-.59-3.771.48-5.11.437-.548 1.203-1.205 1.702-1.46 1.015-.517 3.001-.606 4.131-.185.41.152 3.037 2.562 5.838 5.355 4.75 4.736 5.094 5.023 5.094 4.269 0-1.329.937-4.49 1.735-5.85.98-1.675 3.03-3.646 4.637-4.46 2.148-1.088 4.034-1.444 7.665-1.444h3.342l.706-2.695C43.323 8.176 54.164 0 67.681 0c13.483 0 24.37 8.22 27.696 20.915l.697 2.66h3.343c3.63 0 5.516.356 7.664 1.444 1.606.814 3.656 2.785 4.638 4.46.797 1.36 1.735 4.521 1.735 5.85 0 .754.343.467 5.093-4.27 2.801-2.792 5.428-5.202 5.838-5.354 1.13-.421 3.116-.332 4.131.186.499.254 1.265.91 1.703 1.459 1.07 1.339 1.28 3.571.479 5.11-.303.581-4.21 4.698-8.892 9.37l-8.352 8.333v17.862h8.872c7.409 0 9.033.068 9.852.41 4.236 1.77 4.236 7.465 0 9.235-.818.342-2.438.41-9.799.41h-8.819l-.307 3.396c-.32 3.524-.955 6.8-1.927 9.94l-.565 1.828 9.787 9.814c5.383 5.398 9.99 10.22 10.239 10.716.707 1.414.444 3.714-.568 4.981-.438.548-1.204 1.204-1.703 1.459-1.015.517-3 .607-4.131.186-.41-.152-4.687-4.212-9.504-9.022l-8.76-8.745-1.919 2.554c-3.453 4.595-7.831 8.607-12.582 11.531-5.776 3.555-13.346 6.039-19.733 6.473-1.222.083-2.758.188-3.413.234-.654.045-2.44-.003-3.968-.107zm-1.852-50V33.63H33.187l-.613.575-.612.575v22.947c0 21.587.03 23.124.518 25.949 2.161 12.52 10.506 22.695 22.5 27.434 1.67.66 6.194 1.862 7.078 1.882l.596.013zm13.658 39.026c13.855-3.5 24.14-14.6 26.57-28.668.487-2.825.517-4.362.517-25.912v-22.91l-.575-.612-.575-.612H72.708v39.687c0 38.605.013 39.688.495 39.688.272 0 1.671-.298 3.109-.66zm9.24-89.496c-.097-.4-.66-1.735-1.253-2.967-1.517-3.152-4.681-6.313-7.887-7.877-3.23-1.577-5.119-2.012-8.731-2.012-3.613 0-5.502.435-8.732 2.012-3.205 1.564-6.37 4.725-7.886 7.877-.593 1.232-1.157 2.567-1.254 2.967l-.177.727H85.73z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -360,12 +360,16 @@ button.collapse-sidebar {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
.shortcuts-header {
|
||||
.shortcuts,
|
||||
.debug-panel {
|
||||
.shortcuts-header,
|
||||
.debug-panel-header {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
background-color: $color-gray-60;
|
||||
.shortcuts-title {
|
||||
|
||||
.shortcuts-title,
|
||||
.debug-panel-title {
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
display: flex;
|
||||
|
|
@ -379,7 +383,9 @@ button.collapse-sidebar {
|
|||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
.shortcuts-close-button {
|
||||
|
||||
.shortcuts-close-button,
|
||||
.debug-panel-close-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
|
|
@ -547,3 +553,35 @@ button.collapse-sidebar {
|
|||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
|
||||
.debug-panel {
|
||||
.debug-panel-inner {
|
||||
padding: 8px;
|
||||
}
|
||||
.debug-option {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
|
||||
label {
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--color-primary);
|
||||
}
|
||||
label {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
(init-ui)
|
||||
(st/emit! (initialize)))
|
||||
|
||||
(defn reinit
|
||||
(defn ^:export reinit
|
||||
[]
|
||||
(mf/unmount (dom/get-element "app"))
|
||||
(mf/unmount (dom/get-element "modal"))
|
||||
|
|
|
|||
|
|
@ -23,22 +23,29 @@
|
|||
[type data]
|
||||
(ptk/data-event type data))
|
||||
|
||||
;;(def debug-exclude-events
|
||||
;; #{:app.main.data.workspace.notifications/handle-pointer-update
|
||||
;; :app.main.data.workspace.notifications/handle-pointer-send
|
||||
;; :app.main.data.workspace.persistence/update-persistence-status
|
||||
;; :app.main.data.workspace.changes/update-indices
|
||||
;; :app.main.data.websocket/send-message
|
||||
;; :app.main.data.workspace.selection/change-hover-state})
|
||||
;; (def ^:dynamic *debug-events* false)
|
||||
(def on-event identity)
|
||||
|
||||
(def ^:dynamic *debug-events* false)
|
||||
|
||||
;; Only created in development build
|
||||
(when *assert*
|
||||
(def debug-exclude-events
|
||||
#{:app.main.data.workspace.notifications/handle-pointer-update
|
||||
:app.main.data.workspace.notifications/handle-pointer-send
|
||||
:app.main.data.workspace.persistence/update-persistence-status
|
||||
:app.main.data.workspace.changes/update-indices
|
||||
:app.main.data.websocket/send-message
|
||||
:app.main.data.workspace.selection/change-hover-state})
|
||||
|
||||
(set! on-event (fn [e]
|
||||
(when (and *debug-events*
|
||||
(ptk/event? e)
|
||||
(not (debug-exclude-events (ptk/type e))))
|
||||
(.log js/console (str "[stream]: " (ptk/repr-event e)) )))))
|
||||
|
||||
(defonce state
|
||||
(ptk/store {:resolve ptk/resolve
|
||||
;;:on-event (fn [e]
|
||||
;; (when (and *debug-events*
|
||||
;; (ptk/event? e)
|
||||
;; (not (debug-exclude-events (ptk/type e))))
|
||||
;; (.log js/console (str "[stream]: " (ptk/repr-event e)) )))
|
||||
:on-event on-event
|
||||
:on-error (fn [e] (@on-error e))}))
|
||||
|
||||
(defonce stream
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@
|
|||
(def bool-intersection (icon-xref :boolean-intersection))
|
||||
(def bool-union (icon-xref :boolean-union))
|
||||
(def box (icon-xref :box))
|
||||
(def bug (icon-xref :bug))
|
||||
(def chain (icon-xref :chain))
|
||||
(def chat (icon-xref :chat))
|
||||
(def checkbox-checked (icon-xref :checkbox-checked))
|
||||
|
|
|
|||
|
|
@ -177,6 +177,19 @@
|
|||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(dw/remove-layout-flag :debug-panel)
|
||||
(-> (dw/toggle-layout-flag :shortcuts)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
i/shortcut]]]]))
|
||||
i/shortcut]
|
||||
|
||||
(when *assert*
|
||||
[:button.tooltip.tooltip-right
|
||||
{:alt "Debugging tool"
|
||||
:class (when (contains? layout :debug-panel) "selected")
|
||||
:on-click (fn []
|
||||
(let [is-sidebar-closed? (contains? layout :collapse-left-sidebar)]
|
||||
(ts/schedule 300 #(st/emit! (when is-sidebar-closed? (dw/toggle-layout-flag :collapse-left-sidebar))
|
||||
(dw/remove-layout-flag :shortcuts)
|
||||
(-> (dw/toggle-layout-flag :debug-panel)
|
||||
(vary-meta assoc ::ev/origin "workspace-left-toolbar"))))))}
|
||||
i/bug])]]]))
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.comments :refer [comments-sidebar]]
|
||||
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.debug :refer [debug-panel]]
|
||||
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
section (cond (or mode-inspect? (contains? layout :layers)) :layers
|
||||
(contains? layout :assets) :assets)
|
||||
shortcuts? (contains? layout :shortcuts)
|
||||
show-debug? (contains? layout :debug-panel)
|
||||
|
||||
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
|
||||
(use-resize-hook :left-sidebar 255 255 500 :x false :left)
|
||||
|
|
@ -53,26 +55,31 @@
|
|||
:on-mouse-move on-mouse-move}]
|
||||
|
||||
[:div.settings-bar-inside
|
||||
(cond
|
||||
shortcuts?
|
||||
[:& shortcuts-container]
|
||||
|
||||
[:* (if shortcuts?
|
||||
[:& shortcuts-container]
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
:shortcuts? shortcuts?}
|
||||
show-debug?
|
||||
[:& debug-panel]
|
||||
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
:else
|
||||
[:*
|
||||
[:button.collapse-sidebar
|
||||
{:on-click handle-collapse
|
||||
:aria-label (tr "workspace.sidebar.collapse")}
|
||||
i/arrow-slide]
|
||||
[:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
|
||||
:selected section
|
||||
:shortcuts? shortcuts?}
|
||||
|
||||
(when-not mode-inspect?
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]])]])]]]))
|
||||
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
|
||||
[:div.layers-tab
|
||||
[:& sitemap {:layout layout}]
|
||||
[:& layers-toolbox]]]
|
||||
|
||||
(when-not mode-inspect?
|
||||
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
|
||||
[:& assets-toolbox]])]])]]))
|
||||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
|
|
|
|||
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal file
51
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.debug
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[debug :as dbg]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc debug-panel
|
||||
[]
|
||||
(let [on-toggle-enabled
|
||||
(mf/use-callback
|
||||
(fn [event option]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(if (contains? @dbg/*debug* option)
|
||||
(dbg/-debug! option)
|
||||
(dbg/debug! option))))
|
||||
|
||||
close-fn
|
||||
(mf/use-callback
|
||||
(fn []
|
||||
(st/emit! (dw/remove-layout-flag :debug-panel))))]
|
||||
[:div.debug-panel
|
||||
[:div.debug-panel-header
|
||||
[:div.debug-panel-close-button
|
||||
{:on-click close-fn} i/close]
|
||||
[:div.debug-panel-title "Debugging tools"]]
|
||||
|
||||
[:div.debug-panel-inner
|
||||
[:*
|
||||
(for [option (sort-by d/name dbg/debug-options)]
|
||||
[:div.debug-option {:key (d/name option)
|
||||
:on-click #(on-toggle-enabled % option)}
|
||||
[:input {:type "checkbox"
|
||||
:id (d/name option)
|
||||
:on-change #(on-toggle-enabled % option)
|
||||
:checked (contains? @dbg/*debug* option)}]
|
||||
[:div.field.check
|
||||
(if (contains? @dbg/*debug* option)
|
||||
[:span.checked i/checkbox-checked]
|
||||
[:span.unchecked i/checkbox-unchecked])]
|
||||
[:label {:for (d/name option)} (d/name option)]])]]]))
|
||||
|
|
@ -86,6 +86,9 @@
|
|||
|
||||
;; Show html text
|
||||
:html-text
|
||||
|
||||
;; Show history overlay
|
||||
:history-overlay
|
||||
})
|
||||
|
||||
;; These events are excluded when we activate the :events flag
|
||||
|
|
@ -99,10 +102,26 @@
|
|||
|
||||
(defonce ^:dynamic *debug* (atom #{#_:events}))
|
||||
|
||||
(defn debug-all! [] (reset! *debug* debug-options))
|
||||
(defn debug-none! [] (reset! *debug* #{}))
|
||||
(defn debug! [option] (swap! *debug* conj option))
|
||||
(defn -debug! [option] (swap! *debug* disj option))
|
||||
(defn debug-all! []
|
||||
(reset! *debug* debug-options)
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn debug-none! []
|
||||
(reset! *debug* #{})
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn debug! [option]
|
||||
(swap! *debug* conj option)
|
||||
(when (= :events option)
|
||||
(set! st/*debug-events* true))
|
||||
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn -debug! [option]
|
||||
(swap! *debug* disj option)
|
||||
(when (= :events option)
|
||||
(set! st/*debug-events* false))
|
||||
(js* "app.main.reinit()"))
|
||||
|
||||
(defn ^:export ^boolean debug?
|
||||
[option]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue