diff --git a/CHANGES.md b/CHANGES.md index 483faaa4a..93c6eafcd 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -24,7 +24,6 @@ ## Version 1.25 - Add metadata title on shortcut search [feature 639](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/639) request by [Tal-Fr](https://github.com/Tal-Fr) -- Fix `Use Favicon Color` option which was not working key [issue 634](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/634) raised by [Gary Woodhouse](https://github.com/Garywoo) - Add `Clear` button in Event Monitor and REST Explorer - Fix `Field Creator` shortcut key [issue 608](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/608) - Add `Flow Trigger Explorer` in shortcut links [feature 610](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/610) request by [JeffKrakowski](https://github.com/JeffKrakowski) diff --git a/README.md b/README.md index acf8168a9..430f6d4f6 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,8 @@ We all know and love Salesforce Inspector: As the great Søren Krabbe did not ha - Control access to Salesforce Inspector reloaded with profiles / permissions (Implement OAuth2 flow to generate access token for connected App) [how to](https://github.com/tprouvot/Salesforce-Inspector-reloaded/wiki/How-to#use-sf-inspector-with-a-connected-app) - Update manifest version from [v2](https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/) to v3 (extensions using manifest v2 will be removed from the store) - New UI for Export / Import +- Pick preferred color scheme (light || dark mode) +- Pick preferred color theme (true-color || easy-eyes) ## Security and Privacy diff --git a/addon/button.css b/addon/button.css index 56e9263e0..c6189c95b 100644 --- a/addon/button.css +++ b/addon/button.css @@ -10,10 +10,10 @@ width: 280px; height: 450px; position:absolute; - background-color: #ffffff; + background-color: var(--inspector-background, #FFFFFF); border-radius: 4px; z-index: 1; - border: 1px solid #d8dde6; + border: 1px solid var(--inspector-button-border); display: none; } @@ -49,10 +49,10 @@ } #insext .insext-btn { box-sizing: border-box; - background-color: #226b86; + background-color: var(--inspector-insext-background, #226B86); border-width: 4px; border-style: solid; - border-color: #fff; + border-color: var(--inspector-shade, #FFFFFF); opacity: .4; } #insext .insext-btn-vertical { @@ -62,7 +62,7 @@ border-right-style: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; - box-shadow: -2px 0 2px #a0a6ab; + box-shadow: -2px 0 2px var(--inspector-neutral, #A0A6AB); } #insext .insext-btn-horizontal { height: 15px; @@ -71,7 +71,7 @@ border-bottom-style: none; border-top-left-radius: 5px; border-top-right-radius: 5px; - box-shadow: 0 -2px 2px #a0a6ab; + box-shadow: 0 -2px 2px var(--inspector-neutral, #A0A6AB); } #insext .insext-btn-vertical:hover, @@ -139,10 +139,25 @@ display: inline-block; vertical-align: middle; animation: fadeOut 2s forwards; - } - - @keyframes fadeOut { +} + +@keyframes fadeOut { to { opacity: 0; } - } \ No newline at end of file +} + +/* transitions */ +#insext { + & :is(.insext-popup-vertical, .insext-popup-horizontal) { + transition-property: box-shadow; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } + + & :is(.insext-btn.insext-btn-vertical, .insext-btn.insext-btn-horizontal) { + transition-property: box-shadow, background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} diff --git a/addon/button.js b/addon/button.js index c764eafc5..f1ef17c9f 100644 --- a/addon/button.js +++ b/addon/button.js @@ -212,6 +212,21 @@ function initButton(sfHost, inInspector) { if (e.data.insextInitRequest) { // Set CSS classes for arrow button position iFrameLocalStorage = e.data.iFrameLocalStorage; + setupColorChange(); + popupEl.classList.add(iFrameLocalStorage.popupArrowOrientation == "horizontal" ? "insext-popup-horizontal" : "insext-popup-vertical"); + if (iFrameLocalStorage.popupArrowOrientation == "horizontal") { + if (iFrameLocalStorage.popupArrowPosition < 8) { + popupEl.classList.add("insext-popup-horizontal-left"); + } else if (iFrameLocalStorage.popupArrowPosition >= 90) { + popupEl.classList.add("insext-popup-horizontal-right"); + } else { + popupEl.classList.add("insext-popup-horizontal-centered"); + } + } else if (iFrameLocalStorage.popupArrowOrientation == "vertical") { + if (iFrameLocalStorage.popupArrowPosition >= 55) { + popupEl.classList.add("insext-popup-vertical-up"); + } + } const {popupArrowPosition: pos} = iFrameLocalStorage; const o = getOrientation("iframe"); const dir = calcDirection(pos, o); @@ -254,6 +269,16 @@ function initButton(sfHost, inInspector) { document.querySelectorAll("." + apiNamesClass).forEach(e => e.remove()); } } + if (e.data.category && e.data.value) { + const category = e.data.category; + const value = e.data.value; + //rootEl is #insext + const insextValue = rootEl.dataset[category]; + + if (insextValue == null || value != insextValue) { + rootEl.dataset[category] = value; + } + } }); rootEl.appendChild(popupEl); // Function to handle copy action @@ -319,4 +344,12 @@ function initButton(sfHost, inInspector) { } } } + + function setupColorChange() { + const themeValue = iFrameLocalStorage.enableDarkMode === true ? "dark" : "light"; + const accentValue = iFrameLocalStorage.enableAccentColors === true ? "accent" : "default"; + //rootEl is #insext + rootEl.dataset.theme = themeValue; + rootEl.dataset.accent = accentValue; + } } diff --git a/addon/data-export.css b/addon/data-export.css index fc98b8b11..6852205bf 100644 --- a/addon/data-export.css +++ b/addon/data-export.css @@ -47,7 +47,7 @@ body, [data-reactroot] { height: 100%; line-height: 1.5; - color: #16325c; + color: var(--inspector-text); } [data-reactroot] { @@ -60,7 +60,7 @@ body { font-size: .8125rem; overflow: hidden; margin: 0; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; @@ -68,7 +68,7 @@ body { } #user-info { - background: #f7f9fb; + background: var(--inspector-background); height: 48px; display: flex; align-items: center; @@ -82,31 +82,30 @@ body { #user-info span { font-size: 1em; + color: var(--inspector-text); } .sf-link { - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } .sf-link svg { width: 1.8em; - ; height: 1.8em; - ; display: block; margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } textarea { @@ -117,7 +116,7 @@ textarea { font-size: 0.9rem; padding: 8px 10px; border-radius: 0.25rem; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); } textarea[hidden] { @@ -125,8 +124,8 @@ textarea[hidden] { } .help-text { - background: #fff; - border: 1px solid #DDDBDA; + background: var(--inspector-background); + border: 1px solid var(--inspector-subtle-neutral); padding: 0 15px; border-radius: 0.25rem; margin-top: 10px; @@ -136,6 +135,8 @@ textarea[hidden] { #query { height: 5em; min-height: 7em; + color: var(--inspector-text); + background-color: var(--inspector-background); } #result-area { @@ -163,27 +164,29 @@ textarea[hidden] { flex: 1 1 0; resize: none; white-space: pre; + color: var(--inspector-text); + background-color: var(--inspector-background); } #result-table { overflow: auto; flex: 1 1 0; - background-color: #fff; - border-top: 1px solid #DDDBDA; + background-color: var(--inspector-background); + border-top: 1px solid var(--inspector-neutral); } .area { - background-color: #F8F8F8; + background-color: var(--inspector-shade); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); margin: 12px 12px 0 12px; } h1 { font-size: 1rem; display: inline; - color: #080707; + color: var(--inspector-text); font-weight: 700; line-height: 1.25; margin: revert; @@ -232,15 +235,16 @@ h1 { select, input[type=search], -input[type=save], input[type=default] { width: 8.5rem; font-family: inherit; padding: 5px 13px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); height: 32px; position: relative; border-radius: 0.25rem; + color: var(--inspector-text); + background-color: var(--inspector-background); } input[type=search] { @@ -253,7 +257,7 @@ input[type=search] { } input[type=save] { - background-image: url(images/save.svg); + /*background-image: url(images/save.svg); this is already an svg near this input*/ background-repeat: no-repeat; background-size: 1rem; background-position: 10px 7px; @@ -272,8 +276,8 @@ input:active, input:focus, select:active, select:focus { - border: 1px solid rgb(21, 137, 238); - box-shadow: rgb(6, 28, 63) 0px 0px 3px 0px; + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; outline: none; z-index: 1; } @@ -285,25 +289,25 @@ select:focus { .button-group select:focus:not(:first-child), .button-group select:focus:not(:first-child) { margin-left: -1px; - border: 1px solid rgb(21, 137, 238); + border: 1px solid var(--inspector-primary); } button:active, button:focus { - background-color: rgb(238, 241, 246); - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-middle); } button:disabled, input:disabled { - color: #dddbda; + color: var(--inspector-subtle-neutral); cursor: default; } button:disabled:hover, input:disabled:hover { - background-color: #fff; - color: #dddbda; + background-color: var(--inspector-background); + color: var(--inspector-subtle-neutral); } button:disabled > svg.button-icon{ @@ -315,26 +319,26 @@ button > svg.disabled{ } .highlighted { - background-color: rgb(0, 112, 210); - border-color: rgb(0, 112, 210); - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); } .highlighted:hover, .highlighted:active { - background-color: rgb(0, 95, 178); - color: #fff; + background-color: var(--inspector-accent); + color: var(--inspector-white); } .highlighted:disabled { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: #fff; + background-color: var(--inspector-neutral); + border-color: var(--inspector-neutral); + color: var(--inspector-inverted-text); } .highlighted:disabled:hover { - background-color: #c9c7c5; - color: #fff; + background-color: var(--inspector-neutral); + color: var(--inspector-inverted-text); } option[value="null"][disabled] { @@ -345,7 +349,7 @@ textarea[readonly] { outline: none; border-radius: 0; border: none; - border-top: 1px solid #DDDBDA; + border-top: 1px solid var(--inspector-neutral); } #help-btn { @@ -353,13 +357,13 @@ textarea[readonly] { text-decoration: none; font-size: 1.5rem; font-weight: 700; - color: #919191; + color: var(--inspector-neutral); display: flex; align-items: center; } #help-btn:hover .icon { - background-color: #818181; + background-color: var(--inspector-neutral); } #help-btn .icon { @@ -368,11 +372,14 @@ textarea[readonly] { height: 1.4rem; ; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1.4rem; - ; + mask-size: 1.4rem; -webkit-mask-image: url(images/help.svg); + mask-image: url(images/help.svg); -webkit-mask-position: center; - background-color: #919191; + mask-position: center; + background-color: var(--inspector-neutral); } #spinner { @@ -392,45 +399,45 @@ textarea[readonly] { .cancel-btn { margin-left: 1em; - color: #c23934; + color: var(--inspector-error); } .cancel-btn:not(:disabled):hover, .cancel-btn:not(:disabled):active, .cancel-btn:not(:disabled):focus { - color: #a12b2b; + color: var(--inspector-strong-error); } .delete-btn { - background-color: #c23934; - border-color: #c23934; - color: white; + background-color: var(--inspector-error); + border-color: var(--inspector-error); + color: var(--inspector-text); /* Allows to still show the title even when disabled as it contains useful information */ pointer-events: auto; } .delete-btn:not(:disabled):hover, .delete-btn:not(:disabled):focus { - background-color: #a61a14; - border-color: #c23934; - color: white; + background-color: var(--inspector-strong-error); + border-color: var(--inspector-strong-error); + color: var(--inspector-text-neutral); } .delete-btn:not(:disabled):active { - background-color: #870500; - border-color: #870500; + background-color: var(--inspector-strong-error); + border-color: var(--inspector-strong-error); } .delete-btn:disabled, .delete-btn:disabled:hover { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: white; + background-color: var(--inspector-shade); + border-color: var(--inspector-button-border); + color: var(--inspector-text-neutral); } .char-btn { - color: white; + color: var(--inspector-text); text-decoration: none; - background-color: gray; + background-color: var(--inspector-neutral); display: inline-block; width: 14px; height: 14px; @@ -474,13 +481,13 @@ button[hidden], button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-button-border); height: 32px; display: inline-block; text-decoration: none; - background-color: white; + background-color: var(--inspector-background); padding: 0 16px; - color: #0070d2; + color: var(--inspector-middle); cursor: pointer; outline: none; position: relative; @@ -492,8 +499,8 @@ button, button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2; + background-color: var(--inspector-hover); + color: var(--inspector-middle); } button.toggle { @@ -503,8 +510,10 @@ button.toggle { button.toggle .button-toggle-icon, button.toggle .button-icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; - background-color: #706E6B; + mask-size: 1rem; + background-color: var(--inspector-neutral); display: inline-block; width: 16px; height: 16px; @@ -512,7 +521,8 @@ button.toggle .button-icon { button.toggle:hover .button-icon, button.toggle:hover .button-toggle-icon { - background-color: #004487; + background-color: var(--inspector-primary); + color: var(--inspector-middle); } .flex-right button:last-child { @@ -521,14 +531,17 @@ button.toggle:hover .button-toggle-icon { button.expand .button-toggle-icon { -webkit-mask-image: url(images/down.svg); + mask-image: url(images/down.svg); } button.contract .button-toggle-icon { -webkit-mask-image: url(images/up.svg); + mask-image: url(images/up.svg); } button.toggle .button-icon { -webkit-mask-image: url(images/light_bulb.svg); + mask-image: url(images/light_bulb.svg); } ul > li > a > span { @@ -537,7 +550,9 @@ ul > li > a > span { svg.button-icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; + mask-size: 1rem; display: inline-block; width: 16px; height: 16px; @@ -567,17 +582,17 @@ svg.button-icon { } .autocomplete-results a { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); border-radius: 0.25rem; padding: 0px 4px; text-decoration: none; - color: #006dcc; + color: var(--inspector-link); } .autocomplete-results a:hover, .autocomplete-results a:active { - background-color: #eff1f5; - color: #005fb2; + background-color: var(--inspector-hover); + color: var(--inspector-middle); } .autocomplete-result, @@ -590,8 +605,10 @@ svg.button-icon { display: inline-block; margin: -1px 2px 0 1px; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 0.95rem; - background-color: #706E6B; + mask-size: 0.95rem; + background-color: var(--inspector-neutral); width: 16px; height: 16px; } @@ -602,111 +619,137 @@ svg.button-icon { .relationshipName .autocomplete-icon { -webkit-mask-image: url(images/relate.svg); - background-color: #0070d2; + mask-image: url(images/relate.svg); + background-color: var(--inspector-accent); } .object .autocomplete-icon { -webkit-mask-image: url(images/sobject.svg); - background-color: #04844B; + mask-image: url(images/sobject.svg); + background-color: var(--inspector-success-background); } .variable .autocomplete-icon { -webkit-mask-image: url(images/variable.svg); + mask-image: url(images/variable.svg); } .autocomplete-icon { -webkit-mask-image: url(images/quotation_marks.svg); + mask-image: url(images/quotation_marks.svg); } .null .autocomplete-icon { -webkit-mask-image: url(images/steps.svg); + mask-image: url(images/steps.svg); } .fieldName .autocomplete-icon { /* default icon */ -webkit-mask-image: url(images/question_mark.svg); + mask-image: url(images/question_mark.svg); } .fieldName.reference .autocomplete-icon { -webkit-mask-image: url(images/record_lookup.svg); + mask-image: url(images/record_lookup.svg); } .fieldName.string .autocomplete-icon { -webkit-mask-image: url(images/string.svg); + mask-image: url(images/string.svg); } .fieldName.id .autocomplete-icon { -webkit-mask-image: url(images/anchor.svg); + mask-image: url(images/anchor.svg); } .fieldName.picklist .autocomplete-icon { -webkit-mask-image: url(images/picklist.svg); + mask-image: url(images/picklist.svg); } .fieldName.multipicklist .autocomplete-icon { -webkit-mask-image: url(images/multi-picklist.svg); + mask-image: url(images/multi-picklist.svg); } .fieldName.boolean .autocomplete-icon { -webkit-mask-image: url(images/boolean.svg); + mask-image: url(images/boolean.svg); } .fieldName.phone .autocomplete-icon { -webkit-mask-image: url(images/call.svg); + mask-image: url(images/call.svg); } .fieldName.textarea .autocomplete-icon { -webkit-mask-image: url(images/textarea.svg); + mask-image: url(images/textarea.svg); } .fieldName.url .autocomplete-icon { -webkit-mask-image: url(images/link.svg); + mask-image: url(images/link.svg); } .fieldName.int .autocomplete-icon, .fieldName.double .autocomplete-icon, .fieldName.long .autocomplete-icon { -webkit-mask-image: url(images/number.svg); + mask-image: url(images/number.svg); } .fieldName.address .autocomplete-icon { -webkit-mask-image: url(images/home.svg); + mask-image: url(images/home.svg); } .fieldName.datetime .autocomplete-icon { -webkit-mask-image: url(images/date-time.svg); + mask-image: url(images/date-time.svg); } .fieldName.date .autocomplete-icon { -webkit-mask-image: url(images/date.svg); + mask-image: url(images/date.svg); } .fieldName.currency .autocomplete-icon { -webkit-mask-image: url(images/currency.svg); + mask-image: url(images/currency.svg); } .fieldName.email .autocomplete-icon { -webkit-mask-image: url(images/email.svg); + mask-image: url(images/email.svg); } .fieldName.location .autocomplete-icon { -webkit-mask-image: url(images/checkin.svg); + mask-image: url(images/checkin.svg); } .fieldName.percent .autocomplete-icon { -webkit-mask-image: url(images/percent.svg); + mask-image: url(images/percent.svg); } .fieldName.encryptedstring .autocomplete-icon { -webkit-mask-image: url(images/lock.svg); + mask-image: url(images/lock.svg); } .fieldName.time .autocomplete-icon { -webkit-mask-image: url(images/clock.svg); + mask-image: url(images/clock.svg); } .fieldName.complexvalue .autocomplete-icon { -webkit-mask-image: url(images/advanced_function.svg); + mask-image: url(images/advanced_function.svg); } .header { @@ -715,7 +758,79 @@ svg.button-icon { top: 0; z-index: 2; } + +.query-options { + align-self: center; +} + +#save-wrapper { + border: 1px solid var(--inspector-subtle-neutral); + background-color: var(--inspector-background); + padding: 5px 13px; + width: 8.5rem; + display: inline-block; + overflow: hidden; + + &:has(:active, :focus) { + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; + outline: none; + z-index: 1; + } + + & > svg { + width: 1rem; + fill: var(--inspector-text); + } + + & > input { + color: var(--inspector-text); + background-color: transparent; + border: none; + padding-left: 15px; + + &:active, &:focus { + border: none; + box-shadow: none; + } + } +} + .expanded{ overflow: auto; height: 200px; -} \ No newline at end of file +} + +select.query-history { + height: auto; +} + +/* transitions */ +#save-wrapper { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > input { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } + + & svg { + transition-property: fill, background-color; + transition-duration: inherit; + transition-timing-function: inherit; + } +} + +div#result-area > div.result-bar input, +button.cancel-btn, +div.autocomplete-header > div.flex-right > button, +div.autocomplete-results > div.autocomplete-result > a, +div.button-group > :is(button, input), +select.query-history { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/data-export.html b/addon/data-export.html index edf3cf33b..399978425 100644 --- a/addon/data-export.html +++ b/addon/data-export.html @@ -1,21 +1,20 @@ - - - - Data Export - - - - - - - -
- - - - - - + + + Data Export + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/addon/data-export.js b/addon/data-export.js index b04ce8b80..d25b9fd0f 100644 --- a/addon/data-export.js +++ b/addon/data-export.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion, nullToEmptyString, getLinkTarget} from "./inspector.js"; +import {sfConn, apiVersion, nullToEmptyString, getLinkTarget, setupColorListener} from "./inspector.js"; /* global initButton */ import {Enumerable, DescribeInfo, copyToClipboard, initScrollTable, s} from "./data-load.js"; @@ -1112,6 +1112,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.onQueryAllChange = this.onQueryAllChange.bind(this); this.onQueryToolingChange = this.onQueryToolingChange.bind(this); this.onPrefHideRelationsChange = this.onPrefHideRelationsChange.bind(this); @@ -1363,7 +1364,6 @@ class App extends React.Component { toggleQueryMoreMenu(){ this.refs.buttonQueryMenu.classList.toggle("slds-is-open"); } - render() { let {model} = this.props; const perf = model.perfStatus(); @@ -1414,7 +1414,12 @@ class App extends React.Component { h("option", {value: JSON.stringify(null), disabled: true}, "Saved Queries"), model.savedHistory.list.map(q => h("option", {key: JSON.stringify(q), value: JSON.stringify(q)}, q.query.substring(0, 300))) ), - h("input", {placeholder: "Query Label", type: "save", value: model.queryName, onInput: this.onSetQueryName}), + h("span", {id: "save-wrapper"}, + h("svg", {viewBox: "0 0 122.73 122.88", x: "0px", y: "0px", style: {enableBackground: "new 0 0 122.73 122.88"}}, + h("path", {style: {fillRule: "evenodd", clipRule: "evenodd"}, d: "M109.5,113.68L109.5,113.68l-6.09,0c-0.4,0-0.73-0.32-0.73-0.72V69.48l0-0.1c0-0.9-0.17-1.65-0.49-2.22 c-0.06-0.11-0.14-0.22-0.2-0.31c-0.06-0.09-0.16-0.18-0.23-0.27l-0.02-0.02c-0.3-0.3-0.68-0.53-1.12-0.69l-0.25-0.07l-0.04-0.01 l-0.01,0c-0.41-0.11-0.88-0.17-1.38-0.17h-0.05l-0.08,0H36.75c-0.89,0-1.62,0.17-2.18,0.49l-0.02,0.01l-0.27,0.17l-0.04,0.04 c-0.09,0.07-0.18,0.15-0.27,0.23l-0.02,0.02l-0.01,0.01c-0.62,0.63-0.92,1.57-0.92,2.82l0,0.04l0,43.54h0 c0,0.4-0.33,0.72-0.73,0.72l-9.85,0c0,0,0,0,0,0c-0.19,0-0.38-0.08-0.51-0.21L9.87,101.41c-0.18-0.14-0.29-0.36-0.29-0.59l0-87.91 l0-0.08c0-0.83,0.15-1.52,0.44-2.07l0,0c0.05-0.11,0.11-0.2,0.17-0.29l0.02-0.03c0.07-0.11,0.19-0.18,0.25-0.29l0.01-0.02 l0.02-0.02l0,0c0.25-0.25,0.57-0.45,0.92-0.59l0.04-0.02l0.02-0.01l0.02-0.01l0.18-0.06v0l0.01-0.01c0.42-0.14,0.9-0.2,1.44-0.21 l0.09-0.01l26.21,0c0.4,0,0.73,0.32,0.73,0.72v28.75c0,0.52,0.05,1.03,0.13,1.5c0.09,0.46,0.15,0.98,0.39,1.34l0.01,0.02l0,0.01v0 c0.18,0.44,0.42,0.87,0.67,1.25c0.24,0.37,0.56,0.77,0.9,1.13l0.02,0.02l0,0.01l0.01,0c0.48,0.5,0.94,1.15,1.62,1.27l0.01,0l0.01,0 l0.01,0.01l0.32,0.17l0,0l0.4,0.18v0l0.01,0l0,0l0,0v0c0.33,0.14,0.67,0.26,1,0.34l0.01,0l0.03,0l0.01,0l0.03,0l0.26,0.05v0 c0.45,0.09,0.93,0.14,1.42,0.14l0.02,0h47.8c1.03,0,1.98-0.18,2.85-0.53l0.01-0.01c0.87-0.36,1.67-0.9,2.39-1.61l0.03-0.03 c0.36-0.36,0.69-0.75,0.96-1.16c0.26-0.38,0.58-0.76,0.66-1.22l0-0.01l0.01-0.01l0.01-0.02c0.18-0.43,0.34-0.88,0.41-1.34l0-0.03 c0.09-0.47,0.13-0.97,0.13-1.49V9.92c0-0.4,0.33-0.73,0.73-0.73h6c0.58,0,1.09,0.07,1.54,0.21c0.48,0.15,0.89,0.39,1.2,0.7 c0.68,0.67,0.88,1.67,0.9,2.59l0.01,0.09v0.05l0,0.02v97.19c0,0.56-0.07,1.07-0.21,1.51l-0.01,0.03v0l0,0.02l-0.08,0.22l0,0 l-0.02,0.06l-0.09,0.2l-0.01,0.04l-0.02,0.04l0,0l-0.03,0.06l-0.15,0.22l0,0l-0.05,0.08l-0.14,0.17l-0.06,0.07 c-0.15,0.16-0.33,0.3-0.53,0.42c-0.17,0.1-0.36,0.19-0.55,0.26l-0.06,0.02c-0.16,0.05-0.34,0.1-0.53,0.14l-0.02,0l-0.01,0l-0.02,0 l-0.09,0.01l-0.02,0l0,0l-0.02,0c-0.22,0.03-0.49,0.05-0.76,0.06H109.5L109.5,113.68z M53.93,104.43c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3h31.12c1.66,0,3,1.34,3,3c0,1.66-1.34,3-3,3H53.93L53.93,104.43z M53.93,89.03c-1.66,0-3-1.34-3-3s1.34-3,3-3 h31.12c1.66,0,3,1.34,3,3s-1.34,3-3,3H53.93L53.93,89.03z M94.03,9.39l-45.32-0.2v25.86H48.7c0,0.46,0.06,0.86,0.17,1.2 c0.03,0.06,0.04,0.1,0.07,0.15c0.09,0.23,0.22,0.44,0.4,0.61l0.03,0.03v0c0.06,0.06,0.11,0.1,0.17,0.15 c0.06,0.05,0.13,0.09,0.2,0.14c0.39,0.23,0.92,0.34,1.58,0.34v0l40.1,0.25v0l0,0v0c0.91,0,1.57-0.21,1.98-0.63 c0.42-0.43,0.63-1.1,0.63-2.02h0V9.39L94.03,9.39z M41.91,73.23h53.07v0c0.35,0,0.65,0.29,0.65,0.64l0,39.17 c0,0.35-0.29,0.65-0.65,0.65H41.91v0c-0.35,0-0.65-0.29-0.65-0.64l0-39.17C41.26,73.52,41.56,73.23,41.91,73.23L41.91,73.23 L41.91,73.23z M9.68,0h104.26c4.91,0,8.79,3.86,8.79,8.79V114c0,4.95-3.9,8.88-8.79,8.88l-96.61,0l-0.24-0.25L1.05,106.6L0,105.9 V8.76C0,3.28,4.81,0,9.68,0L9.68,0L9.68,0z"}) + ), + h("input", {placeholder: "Query Label", type: "save", value: model.queryName, onInput: this.onSetQueryName}), + ), h("button", {onClick: this.onAddToHistory, title: "Add query to saved history"}, "Save Query"), h("button", {className: model.expandSavedOptions ? "toggle contract" : "toggle expand", title: "Show More Options", onClick: this.onToggleSavedOptions}, h("div", {className: "button-toggle-icon"})) ), diff --git a/addon/data-import.css b/addon/data-import.css index f32bba21e..56a962bac 100644 --- a/addon/data-import.css +++ b/addon/data-import.css @@ -45,14 +45,14 @@ body { margin: 0; height: 100%; display: flex; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; background-position: 0px 48px; } .prod { - background-color: #e0a4b5; + background-color: var(--inspector-prod-background); background-image: url(images/lightning_red_background.png); } #root { @@ -70,7 +70,7 @@ body { display: none !important; } #user-info { - background: #f7f9fb; + background: var(--inspector-background); min-height: 48px; display: flex; align-items: center; @@ -84,13 +84,13 @@ body { font-size: 1.2em; } .sf-link { - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } .sf-link svg { @@ -100,31 +100,35 @@ body { margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } #help-btn { margin-left: auto; text-decoration: none; font-size: 1.5rem; font-weight: 700; - color: #919191; + color: var(--inspector-neutral); display: flex; align-items: center; } #help-btn:hover .icon{ - background-color: #818181; + background-color: var(--inspector-neutral); } #help-btn .icon { display: inline-block; width: 1.4rem; height: 1.4rem;; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1.4rem;; + mask-size: 1.4rem;; -webkit-mask-image: url(images/help.svg); + mask-image: url(images/help.svg); -webkit-mask-position: center; - background-color: #919191; + mask-position: center; + background-color: var(--inspector-neutral); } #spinner { left: -15px; @@ -136,8 +140,8 @@ body { align-items: center; } .help-text { - background: #fff; - border: 1px solid #DDDBDA; + background: var(--inspector-background); + border: 1px solid var(--inspector-neutral); padding: 0 15px; border-radius: 0.25rem; margin-top: 10px; @@ -151,10 +155,10 @@ body { margin-bottom: 8px; } .area { - background-color: #F8F8F8; + background-color: var(--inspector-shade); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); margin: 12px 12px 0 12px; flex-grow: 1; } @@ -171,7 +175,7 @@ h1 { font-size: 1.125rem; margin: 0px; display: inline; - color: #080707; + color: var(--inspector-text); font-weight: 700; line-height: 1.25; } @@ -198,7 +202,7 @@ h1 { } .conf-label, .columns-label, label { font-weight: normal; - color: #4a4a56; + color: var(--inspector-text-neutral); display: flex; align-items: center; } @@ -223,7 +227,7 @@ h1 { align-items: flex-start; } .conf-error { - color: #a00; + color: var(--inspector-error); margin-left: 12px; display: flex; align-items: center; @@ -232,7 +236,7 @@ h1 { margin: 0 0 0 6px; } .confError { - box-shadow: 0 0 3px 1px #a00; + box-shadow: 0 0 3px 1px var(--inspector-error); } .confError + .confError { margin-top: 5px; @@ -274,21 +278,18 @@ h1 { } .status-group label { font-weight: bold; - color: #4a4a56; + color: var(--inspector-text-neutral); padding-right: 15px; white-space: nowrap; } label.statusGroupEmpty { - color: lightgray; + color: var(--inspector-subtle-neutral); font-weight: normal; } -.batch-size { - width: 3.4em; -} .char-btn { - color: white; + color: var(--inspector-text); text-decoration: none; - background-color: gray; + background-color: var(--inspector-neutral); display: inline-block; width: 14px; height: 14px; @@ -302,7 +303,7 @@ label.statusGroupEmpty { right: 0; bottom: 0; left: 0; - background: rgba(0,0,0,0.8); + background: rgba(var(--inspector-black-rgb), 0.8); z-index: 99999; } #confirm-dialog { @@ -310,7 +311,7 @@ label.statusGroupEmpty { position: relative; margin: 10% auto; border-radius: 10px; - background: #fff; + background: var(--inspector-background); padding: 20px; } .dialog-buttons { @@ -322,14 +323,17 @@ label.statusGroupEmpty { select, input[type=search], input[type=number], -input[type=text] { +input[type=text], +div.batch-size { width: 335px; font-family: inherit; padding: 5px 13px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); border-radius: 0.25rem; height: 32px; - position: relative; + /*position: relative;*/ + color: var(--inspector-text); + background-color: var(--inspector-background); } input[type=number]{ width: 99px; @@ -351,8 +355,8 @@ input:active, input:focus, select:active, select:focus { - border: 1px solid rgb(21, 137, 238); - box-shadow: rgb(6, 28, 63) 0px 0px 3px 0px; + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; outline: none; z-index: 1; } @@ -363,40 +367,33 @@ select:focus { .button-group select:focus:not(:first-child), .button-group select:focus:not(:first-child) { margin-left: -1px; - border: 1px solid rgb(21, 137, 238); + border: 1px solid var(--inspector-primary); } button:active, button:focus { - background-color: rgb(238, 241, 246); - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-middle); } button:disabled, input:disabled { - color: #dddbda; + color: var(--inspector-subtle-neutral); + background-color: var(--inspector-shade); cursor: default; } -button:disabled:hover { - background-color: #fff; - color: #dddbda; -} .highlighted { - background-color: rgb(0, 112, 210); - border-color: rgb(0, 112, 210); - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); } .highlighted:hover, .highlighted:active { - background-color: rgb(0, 95, 178); - color: #fff; + background-color: var(--inspector-accent); + color: var(--inspector-white); } .highlighted:disabled { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: #fff; -} -.highlighted:disabled:hover { - background-color: #c9c7c5; - color: #fff; + background-color: var(--inspector-subtle-neutral); + border-color: var(--inspector-subtle-neutral); + color: var(--inspector-inverted-text); } option[value="null"][disabled] { display: none; @@ -404,7 +401,7 @@ option[value="null"][disabled] { textarea { outline: none; border-radius: 0.25rem; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); } #data { resize: none; @@ -414,9 +411,10 @@ textarea { width: 335px; overflow: hidden; text-align: center; - color: #777; + color: var(--inspector-neutral); padding: 1.5em; font: inherit; + background: var(--inspector-background); } .import-actions .conf-line { display: flex; @@ -446,13 +444,13 @@ textarea { margin-right: 10px; } button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-button-border); height: 32px; display: inline-block; text-decoration: none; - background-color: white; + background-color: var(--inspector-background); padding: 0 16px; - color: #0070d2; + color: var(--inspector-middle); cursor: pointer; outline: none; position: relative; @@ -461,10 +459,6 @@ button, .button { margin-right: 10px; white-space: nowrap; } -button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2; -} button.toggle { padding: 0 11px; } @@ -476,35 +470,47 @@ button.toggle { .button-toggle-icon, .button-icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; - background-color: #706E6B; + mask-size: 1rem; + background-color: var(--inspector-neutral); display: inline-block; width: 16px; height: 16px; } button.toggle:hover .button-icon, button.toggle:hover .button-toggle-icon { - background-color: #004487; + background-color: var(--inspector-hover); +} +svg.slds-icon { + fill: var(--inspector-text); +} +button:not(:disabled, .highlighted):hover { + background-color: var(--inspector-hover); + color: var(--inspector-middle); } .flex-right button:last-child { margin-right: 0; } button.expand .button-toggle-icon { -webkit-mask-image: url(images/down.svg); + mask-image: url(images/down.svg); } button.contract .button-toggle-icon { -webkit-mask-image: url(images/up.svg); + mask-image: url(images/up.svg); } .button.field-info .button-icon { -webkit-mask-image: url(images/salesforce-inspector-logo.svg); + mask-image: url(images/salesforce-inspector-logo.svg); } .cancel-btn { - color: #c23934; + color: var(--inspector-error); } .cancel-btn:not(:disabled):hover, .cancel-btn:not(:disabled):active, .cancel-btn:not(:disabled):focus { - color: #a12b2b; + color: var(--inspector-middle); } .area.result-area { padding: 0; @@ -512,7 +518,66 @@ button.contract .button-toggle-icon { } #result-table { overflow: auto; - background-color: #fff; + background-color: var(--inspector-background); margin: 0; height: 100%; -} \ No newline at end of file +} + +.conf-value:has(button.change-value) { + display: flex; + flex-direction: row; + width: 335px; + align-items: center; + + & > button.change-value { + width: 3rem; + height: 90%; + padding: 0; + border-width: 1px; + border-radius: 3px; + + color: var(--inspector-text); + background-color: var(--inspector-background); + border-color: var(--inspector-neutral); + } + + & > button.increaser { + margin-right: 0; + margin-left: 10px; + } +} + + +/* transitions */ +div.area > div.conf-value { + transition-property: scrollbar-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > :is(select, input) { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} + +a.button.field-info svg { + transition-property: fill, background-color; + transition-duration: inherit; + transition-timing-function: inherit; +} + +button.cancel-btn, +div.conf-line > div.flex-right > button, +div.button-group > :is(button, input), +div.flex-wrapper :is(button, input) { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +svg.slds-icon { + transition-property: color, fill; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/data-import.html b/addon/data-import.html index 5f7ea6553..b96334ad4 100644 --- a/addon/data-import.html +++ b/addon/data-import.html @@ -3,10 +3,12 @@ Data Import + +
@@ -15,4 +17,4 @@ - \ No newline at end of file + diff --git a/addon/data-import.js b/addon/data-import.js index 30d31e802..ba0be71bb 100644 --- a/addon/data-import.js +++ b/addon/data-import.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; /* global initButton */ import {csvParse} from "./csv-parse.js"; import {DescribeInfo, copyToClipboard, initScrollTable} from "./data-load.js"; @@ -916,6 +916,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.onApiTypeChange = this.onApiTypeChange.bind(this); this.onImportActionChange = this.onImportActionChange.bind(this); this.onImportTypeChange = this.onImportTypeChange.bind(this); @@ -936,6 +937,8 @@ class App extends React.Component { this.onSkipAllUnknownFieldsClick = this.onSkipAllUnknownFieldsClick.bind(this); this.onConfirmPopupYesClick = this.onConfirmPopupYesClick.bind(this); this.onConfirmPopupNoClick = this.onConfirmPopupNoClick.bind(this); + //this.clickDecrease = this.clickDecrease.bind(this); + //this.clickIncrease = this.clickIncrease.bind(this); this.unloadListener = null; this.state = {templateValueIndex: -1}; } @@ -1115,6 +1118,25 @@ class App extends React.Component { removeEventListener("beforeunload", this.unloadListener); } } + + /*changeValue(e, shouldIncrease = false) { + const inputTarget = document.getElementById(e.target.dataset.targetid); + const oldValue = +inputTarget.value; + if((""+oldValue) == "NaN") + return; + inputTarget.value = shouldIncrease ? oldValue + 1 : oldValue - 1; + // trigger the onChange listener + const event = new Event('input', { bubbles: true }); + inputTarget.dispatchEvent(event); + } + + clickDecrease(e) { + this.changeValue(e, false); + } + clickIncrease(e) { + this.changeValue(e, true); + }*/ + render() { let {model} = this.props; return h("div", {}, @@ -1173,7 +1195,7 @@ class App extends React.Component { ) ), h("a", {className: "button field-info", href: model.showDescribeUrl(), target: "_blank", title: "Show field info for the selected object"}, - h("div", {className: "button-icon"}), + h("div", {className: "button-icon"}) ) ), h("div", {className: "conf-line radio-buttons"}, @@ -1205,15 +1227,21 @@ class App extends React.Component { h("div", {className: "conf-line"}, h("label", {className: "conf-input", title: "The number of records per batch. A higher value is faster but increases the risk of errors due to governor limits."}, h("span", {className: "conf-label"}, "Batch size"), - h("span", {className: "conf-value button-space"}, - h("input", {type: "number", value: model.batchSize, onChange: this.onBatchSizeChange, className: (model.batchSizeError() ? "confError" : "") + " batch-size"}), + h("div", {className: "conf-value button-space"}, + /*h("button", {className: "change-value decreaser", title: "Decrease the value by 1", onClick: this.clickDecrease, "data-targetid": "batchSize"}, "-"), + h("input", {id: "batchSize", type: "text", value: model.batchSize, onChange: this.onBatchSizeChange, className: (model.batchSizeError() ? "confError " : "") + "batch-size"}), + h("button", {className: "change-value increaser", title: "Increase the value by 1", onClick: this.clickIncrease, "data-targetid": "batchSize"}, "+"),*/ + h("input", {id: "batchSize", type: "number", value: model.batchSize, onChange: this.onBatchSizeChange, className: (model.batchSizeError() ? "confError " : "") + "batch-size"}), h("div", {className: "conf-error", hidden: !model.batchSizeError()}, model.batchSizeError()) ) ), h("label", {className: "conf-input", title: "The number of batches to execute concurrently. A higher number is faster but increases the risk of errors due to lock congestion."}, h("span", {className: "conf-label"}, "Threads"), h("span", {className: "conf-value"}, - h("input", {type: "number", value: model.batchConcurrency, onChange: this.onBatchConcurrencyChange, className: (model.batchConcurrencyError() ? "confError" : "") + " batch-size"}), + /*h("button", {className: "change-value decreaser", title: "Decrease the value by 1", onClick: this.clickDecrease, "data-targetid": "batchConcurrency"}, "-"), + h("input", {id: "batchConcurrency", type: "text", value: model.batchConcurrency, onChange: this.onBatchConcurrencyChange, className: (model.batchConcurrencyError() ? "confError" : "") + " batch-size"}), + h("button", {className: "change-value increaser", title: "Increase the value by 1", onClick: this.clickIncrease, "data-targetid": "batchConcurrency"}, "+"),*/ + h("input", {id: "batchConcurrency", type: "number", value: model.batchConcurrency, onChange: this.onBatchConcurrencyChange, className: (model.batchConcurrencyError() ? "confError" : "") + " batch-size"}), h("span", {hidden: !model.isWorking()}, model.activeBatches), h("div", {className: "conf-error", hidden: !model.batchConcurrencyError()}, model.batchConcurrencyError()) ) @@ -1359,6 +1387,7 @@ class StatusBox extends React.Component { } { + let args = new URLSearchParams(location.search.slice(1)); let sfHost = args.get("host"); initButton(sfHost, true); @@ -1376,8 +1405,10 @@ class StatusBox extends React.Component { } }); + } + function stringIsEmpty(str) { return str == null || str == undefined || str.trim() == ""; } diff --git a/addon/data-load.css b/addon/data-load.css index 16617af72..d0e98ba94 100644 --- a/addon/data-load.css +++ b/addon/data-load.css @@ -8,7 +8,7 @@ } #result-table table tr:hover>td { - background-color: #F3F2F2; + background-color: var(--inspector-background); } .scrolltable-scrolled { @@ -21,17 +21,17 @@ } .scrolltable-cell { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); overflow: hidden; padding: 0 4px; - background-color: white; + background-color: var(--inspector-background); white-space: pre; box-sizing: border-box; } .scrolltable-cell.header { font-weight: 700; - background-color: #FAFAF9; + background-color: var(--inspector-shade); border-top: none; padding-top: 7px; padding-bottom: 7px; @@ -41,7 +41,7 @@ } .scrolltable-cell a { - color: #006dcc; + color: var(--inspector-link); text-decoration: underline; text-decoration-style: dotted; } @@ -56,7 +56,7 @@ } #result-table table tr:hover>td { - background-color: #F3F2F2; + background-color: var(--inspector-background); } .scrolltable-scrolled { @@ -68,38 +68,12 @@ position: absolute; } -.scrolltable-cell { - border: 1px solid #DDDBDA; - overflow: hidden; - padding: 0 4px; - background-color: white; - white-space: pre; - box-sizing: border-box; -} - -.scrolltable-cell.header { - font-weight: 700; - background-color: #FAFAF9; - border-top: none; - padding-top: 7px; - padding-bottom: 7px; - /* position: sticky; */ - /* top: 0; */ - /* z-index: 1; */ -} - -.scrolltable-cell a { - color: #006dcc; - text-decoration: underline; - text-decoration-style: dotted; -} - .pop-menu { position: absolute; padding: 7px 0; - background: rgb(255, 255, 255); - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); - border: 1px solid rgb(221, 219, 218); + background: var(--inspector-background); + box-shadow: 0 2px 3px 0 var(--inspector-text); + border: 1px solid var(--inspector-neutral)32; border-radius: 0.25rem; } @@ -112,31 +86,41 @@ .pop-menu a { display: block; text-decoration: none; - color: rgb(0, 112, 210); + color: var(--inspector-link); padding: 5px 15px; display: flex; align-items: center; } .pop-menu a .icon { - /* background-color: #706E6B; */ + /* background-color: var(--inspector-neutral); */ display: inline-block; width: 1rem; height: 1rem; margin-right: 8px; } -.pop-menu a.view-salesforce .icon { +.pop-menu a:is(.view-salesforce, .view-inspector, .query-record, copy-id, download-salesforce) .icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; + mask-size: 1rem; -webkit-mask-image: url(images/salesforce1.svg); + mask-image: url(images/salesforce1.svg); -webkit-mask-position: center; + mask-position: center; } +/*.pop-menu a.view-salesforce .icon { + -webkit-mask-image: url(images/salesforce1.svg); + mask-image: url(images/salesforce1.svg); +}*/ + .pop-menu a.view-inspector .icon { -webkit-mask-repeat: no-repeat; -webkit-mask-size: 1rem; -webkit-mask-image: url(images/salesforce-inspector-logo.svg); + mask-image: url(images/salesforce-inspector-logo.svg); -webkit-mask-position: center; } @@ -144,27 +128,30 @@ -webkit-mask-repeat: no-repeat; -webkit-mask-size: 1rem; -webkit-mask-image: url(images/record_lookup.svg); + mask-image: url(images/record_lookup.svg); -webkit-mask-position: center; - background-color: #706E6B; + background-color: var(--inspector-neutral); } .pop-menu a.copy-id .icon { -webkit-mask-repeat: no-repeat; -webkit-mask-size: 1rem; -webkit-mask-image: url(images/copy.svg); + mask-image: url(images/copy.svg); -webkit-mask-position: center; - background-color: #706E6B; + background-color: var(--inspector-neutral); } .pop-menu a.download-salesforce .icon { -webkit-mask-repeat: no-repeat; -webkit-mask-size: 1rem; -webkit-mask-image: url(images/down.svg); + mask-image: url(images/down.svg); -webkit-mask-position: center; } .pop-menu a.download-salesforce .icon { - background-color: #61fab8; + background-color: var(--inspector-success); } .pop-menu a.download-salesforce { @@ -176,17 +163,24 @@ } .pop-menu a.view-salesforce .icon { - background-color: #009DDC; + background-color: var(--inspector-accent); } .pop-menu a.view-inspector .icon { - background-color: #D8BE5F; + background-color: var(--inspector-warning); } .pop-menu a:hover { - background-color: #F3F2F2; + background-color: var(--inspector-background); } .pop-menu a:active { - background-color: #ECEBEA; -} \ No newline at end of file + background-color: var(--inspector-background); +} + +/* transitions */ +td.scrolltable-cell { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/event-monitor.css b/addon/event-monitor.css index e0b45cbd9..23cdc66e8 100644 --- a/addon/event-monitor.css +++ b/addon/event-monitor.css @@ -45,14 +45,14 @@ body { margin: 0; height: 100%; display: flex; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; background-position: 0px 48px; } .prod { - background-color: #e0a4b5; + background-color: var(--inspector-prod-background); background-image: url(images/lightning_red_background.png); } #root { @@ -70,7 +70,7 @@ body { display: none !important; } #user-info { - background: #f7f9fb; + background: var(--inspector-background); min-height: 48px; display: flex; align-items: center; @@ -84,15 +84,16 @@ body { font-size: 1em; } .sf-link { - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } + .sf-link svg { width: 1.8em;; height: 1.8em;; @@ -100,19 +101,25 @@ body { margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } #help-btn { margin-left: auto; text-decoration: none; font-size: 1.5rem; font-weight: 700; - color: #919191; + color: var(--inspector-neutral); display: flex; align-items: center; } + +#help-btn:hover .icon { + background-color: var(--inspector-neutral); +} + +#help-btn .icon { svg.icon{ fill: #919191; } @@ -122,8 +129,16 @@ svg.icon:hover{ .icon { display: inline-block; width: 1.4rem; - height: 1.4rem;; + height: 1.4rem; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 1.4rem; + mask-size: 1.4rem; + -webkit-mask-image: url(images/help.svg); + mask-image: url(images/help.svg); + -webkit-mask-position: center; + mask-position: center; + background-color: var(--inspector-neutral); -webkit-mask-size: 1.4rem;; -webkit-mask-position: center; } @@ -137,18 +152,18 @@ svg.icon:hover{ align-items: center; } .help-text { - background: #fff; - border: 1px solid #DDDBDA; + background: var(--inspector-background); + border: 1px solid var(--inspector-subtle-neutral); padding: 0 15px; border-radius: 0.25rem; margin-top: 10px; margin-bottom: 5px; } .area { - background-color: #F8F8F8; + background-color: var(--inspector-shade); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); margin: 12px 12px 0 12px; } .area-header { @@ -157,7 +172,7 @@ svg.icon:hover{ h1 { font-size: 1rem; display: inline; - color: #080707; + color: var(--inspector-text); font-weight: 700; line-height: 1.25; margin: revert; @@ -172,15 +187,15 @@ h1 { } .conf-label, .columns-label, label { font-weight: normal; - color: #4a4a56; + color: var(--inspector-text-neutral); display: flex; align-items: center; } .conf-label { display: inline-block; text-align: left; - width: auto; - padding-right: 0.5em; + width: 9em; + padding-right: 1em; } .conf-value { display: inline-block; @@ -198,7 +213,7 @@ h1 { margin-top: 5px; } .conf-error { - color: #a00; + color: var(--inspector-error); margin-left: 12px; display: flex; align-items: center; @@ -207,7 +222,7 @@ h1 { margin: 0 0 0 6px; } .confError { - box-shadow: 0 0 3px 1px #a00; + box-shadow: 0 0 3px 1px var(--inspector-error); } .confError + .confError { margin-top: 5px; @@ -249,21 +264,21 @@ h1 { } .status-group label { font-weight: bold; - color: #4a4a56; + color: var(--inspector-text-neutral); padding-right: 15px; white-space: nowrap; } label.statusGroupEmpty { - color: lightgray; + color: var(--inspector-neutral); font-weight: normal; } .batch-size { width: 3.4em; } .char-btn { - color: white; + color: var(--inspector-text); text-decoration: none; - background-color: gray; + background-color: var(--inspector-neutral); display: inline-block; width: 14px; height: 14px; @@ -277,7 +292,7 @@ label.statusGroupEmpty { right: 0; bottom: 0; left: 0; - background: rgba(0,0,0,0.8); + background: rgba(var(--inspector-background-rgb), 0.8); z-index: 99999; } #confirm-dialog { @@ -285,7 +300,7 @@ label.statusGroupEmpty { position: relative; margin: 10% auto; border-radius: 10px; - background: #fff; + background: var(--inspector-background); padding: 20px; } .dialog-buttons { @@ -300,10 +315,12 @@ input[type=number], input[type=text] { font-family: inherit; padding: 5px 13px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-neutral); border-radius: 0.25rem; height: 32px; position: relative; + color: var(--inspector-text); + background-color: var(--inspector-background); } input.object-list { width: 296px; @@ -322,8 +339,8 @@ input:active, input:focus, select:active, select:focus { - border: 1px solid rgb(21, 137, 238); - box-shadow: rgb(6, 28, 63) 0px 0px 3px 0px; + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; outline: none; z-index: 1; } @@ -334,40 +351,37 @@ select:focus { .button-group select:focus:not(:first-child), .button-group select:focus:not(:first-child) { margin-left: -1px; - border: 1px solid rgb(21, 137, 238); + border: 1px solid var(--inspector-primary); } button:active, button:focus { - background-color: rgb(238, 241, 246); - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-middle); } button:disabled, input:disabled { - color: #dddbda; + color: var(--inspector-subtle-neutral) !important; + background-color: var(--inspector-shade) !important; cursor: default; } button:disabled:hover { - background-color: #fff; - color: #dddbda; + background-color: var(--inspector-background); + color: var(--inspector-primary); } .highlighted { - background-color: rgb(0, 112, 210); - border-color: rgb(0, 112, 210); - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); } .highlighted:hover, .highlighted:active { - background-color: rgb(0, 95, 178); - color: #fff; + background-color: var(--inspector-accent); + color: var(--inspector-white); } .highlighted:disabled { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: #fff; -} -.highlighted:disabled:hover { - background-color: #c9c7c5; - color: #fff; + background-color: var(--inspector-neutral); + border-color: var(--inspector-neutral); + color: var(--inspector-inverted-text); } option[value="null"][disabled] { display: none; @@ -375,16 +389,16 @@ option[value="null"][disabled] { textarea { outline: none; border-radius: 0.25rem; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); } button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-button-border); height: 32px; display: inline-block; text-decoration: none; - background-color: white; + background-color: var(--inspector-background); padding: 0 16px; - color: #0070d2; + color: var(--inspector-middle); cursor: pointer; outline: none; position: relative; @@ -394,8 +408,8 @@ button, .button { white-space: nowrap; } button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2; + background-color: var(--inspector-shade); + color: var(--inspector-text); } button.toggle { padding: 0 11px; @@ -408,27 +422,32 @@ button.toggle { .button-toggle-icon, .button-icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; - background-color: #706E6B; + mask-size: 1rem; + /*background-color: #706E6B;*/ display: inline-block; width: 16px; height: 16px; } button.toggle:hover .button-icon, button.toggle:hover .button-toggle-icon { - background-color: #004487; + background-color: var(--inspector-hover); } .flex-right button:last-child { margin-right: 0; } button.expand .button-toggle-icon { -webkit-mask-image: url(images/down.svg); + mask-image: url(images/down.svg); } button.contract .button-toggle-icon { -webkit-mask-image: url(images/up.svg); + mask-image: url(images/up.svg); } .button.field-info .button-icon { -webkit-mask-image: url(images/salesforce-inspector-logo.svg); + mask-image: url(images/salesforce-inspector-logo.svg); } .area.result-area { padding: 0; @@ -448,8 +467,8 @@ button.contract .button-toggle-icon { #result-table { overflow: auto; flex: 1 1 0; - background-color: #fff; - border-top: 1px solid #DDDBDA; + background-color: var(--inspector-background); + border-top: 1px solid var(--inspector-subtle-neutral); } .event-box { margin: 4px; @@ -459,10 +478,10 @@ button.contract .button-toggle-icon { white-space: pre-wrap; } .event-not-selected { - border-bottom: 1px solid #DDDBDA; + border-top: 1px solid var(--inspector-subtle-neutral); } .event-selected { - border: 2px solid rgb(3, 153, 63); + border: 2px solid var(--inspector-success); } .channel-listening { margin-left: 2%; @@ -483,4 +502,4 @@ code { } .help-text a:visited { color: #0176d3; -} \ No newline at end of file +} diff --git a/addon/event-monitor.html b/addon/event-monitor.html index 0097b4390..41cc6f977 100644 --- a/addon/event-monitor.html +++ b/addon/event-monitor.html @@ -9,6 +9,8 @@ + + @@ -20,4 +22,4 @@ - \ No newline at end of file + diff --git a/addon/event-monitor.js b/addon/event-monitor.js index f246a5a9d..b7e45f9a3 100644 --- a/addon/event-monitor.js +++ b/addon/event-monitor.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion, getLinkTarget} from "./inspector.js"; +import {sfConn, apiVersion, getLinkTarget, setupColorListeners} from "./inspector.js"; // Import the CometD library import {CometD} from "./lib/cometd/cometd.js"; import {copyToClipboard} from "./data-load.js"; @@ -118,6 +118,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.getEventChannels = this.getEventChannels.bind(this); this.onChannelTypeChange = this.onChannelTypeChange.bind(this); this.onChannelSelection = this.onChannelSelection.bind(this); diff --git a/addon/explore-api.css b/addon/explore-api.css index 694062eb4..ff6c0cab7 100644 --- a/addon/explore-api.css +++ b/addon/explore-api.css @@ -16,9 +16,11 @@ textarea { resize: vertical; word-wrap: normal; font-size: 11px; + color: var(--inspector-text); + background-color: var(--inspector-background); } li:hover { - background-color: lightblue; + background-color: var(--inspector-background); } input[type=radio] { margin: 0; @@ -28,7 +30,7 @@ table { border-collapse: collapse; } td,th { - border: 1px solid gray; + border: 1px solid var(--inspector-neutral); white-space: pre; } .edit-form label { @@ -45,19 +47,46 @@ td,th { } .status-error { font-weight: bold; - color: red; + color: var(--inspector-error); } #result-table table tr:first-child { font-weight: 700; - background-color: #FAFAF9; + background-color: var(--inspector-background); border-top: none; padding-top: 7px; padding-bottom: 7px; } -pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } -.string { color: green; } -.number { color: darkorange; } -.boolean { color: blue; } -.null { color: magenta; } -.key { color: red; } \ No newline at end of file +#result-table > div > ul > li:has(> label)::marker { + transition-property: color; + transition-duration: 500ms; + transition-timing-function: ease-in-out; +} +pre { + outline: 1px solid var(--inspector-text-neutral); + padding: 5px; + margin: 5px; +} +.string { + color: var(--inspector-success); +} +.number { + color: var(--inspector-number); +} +.boolean { + color: var(--inspector-true-boolean); +} +.null { + color: var(--inspector-object); +} +.key { + color: var(--inspector-error); +} + +/* transitions */ +div#result-area > div.result-bar input, +td.scrolltable-cell { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/explore-api.html b/addon/explore-api.html index f558ccc7d..a811daf8d 100644 --- a/addon/explore-api.html +++ b/addon/explore-api.html @@ -4,11 +4,13 @@ ... + + @@ -19,4 +21,4 @@ - \ No newline at end of file + diff --git a/addon/explore-api.js b/addon/explore-api.js index 1e8fbf100..ba1523d30 100644 --- a/addon/explore-api.js +++ b/addon/explore-api.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; /* global initButton */ class Model { @@ -252,6 +252,10 @@ function csvSerialize(table, separator) { let h = React.createElement; class App extends React.Component { + constructor(props) { + super(props); + setupColorListeners(); + } render() { let {model} = this.props; @@ -325,11 +329,12 @@ class App extends React.Component { ) ), h("a", {href: "https://www.salesforce.com/us/developer/docs/api_rest/", target: "_blank"}, "REST API documentation"), - " Open your browser's ", - h("b", {}, "F12 Developer Tools"), - " and select the ", - h("b", {}, "Console"), - " tab to make your own API calls." + h("span", {}, + " Open your browser's ", + h("b", {}, "F12 Developer Tools"), + " and select the ", + h("b", {}, "Console"), + " tab to make your own API calls.") ), ) ); diff --git a/addon/fast-theme.js b/addon/fast-theme.js new file mode 100644 index 000000000..582cee3c2 --- /dev/null +++ b/addon/fast-theme.js @@ -0,0 +1,7 @@ +const html = document.documentElement; + +const savedTheme = localStorage.getItem("enableDarkMode"); +html.dataset.theme = savedTheme === "true" ? "dark" : "light"; + +const savedAccent = localStorage.getItem("enableAccentColors"); +html.dataset.accent = savedAccent === "true" ? "accent" : "default"; diff --git a/addon/field-creator.css b/addon/field-creator.css index a0e0d2a3a..5c425f7ce 100644 --- a/addon/field-creator.css +++ b/addon/field-creator.css @@ -26,54 +26,64 @@ font-style: italic; font-weight: 700} * { - box-sizing: border-box;} + box-sizing: border-box; +} html, body, #root, [data-reactroot] { height: 100%; line-height: 1.5; - color: #16325c;} + color: var(--inspector-text); +} [data-reactroot] { display: flex; - flex-direction: column;} + flex-direction: column; +} body { font-family: "Salesforce Sans", Arial, sans-serif; font-size: .8125rem; overflow: hidden; margin: 0; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; background-position: 0px 48px; } .prod { - background-color: #e0a4b5; + background-color: var(--inspector-prod-background); background-image: url(images/lightning_red_background.png); } #user-info { - background: #f7f9fb; + background: var(--inspector-background); height: 48px; display: flex; align-items: center; padding: 0 12px; - flex-wrap: wrap;} + flex-wrap: wrap; +} #user-info h1 { - padding: 0 6px 0 10px;} + padding: 0 6px 0 10px; +} #user-info span { - font-size: 1em;} + font-size: 1em; +} .input-textBox{ width: 335px; - font-family: inherit; - padding: 5px 13px; - border: 1px solid #DDDBDA; - border-radius: 0.25rem; - height: 32px; - position: relative;} + font-family: inherit; + padding: 5px 13px; + border: 1px solid var(--inspector-subtle-neutral); + border-radius: 0.25rem; + height: 32px; + position: relative; + background-color: var(--inspector-background); + color: var(--inspector-text); +} .firstHeader{ overflow-y: clip; - min-height: 130px;} + min-height: 130px; +} .notification_container{ position: fixed; top: 80px; @@ -82,13 +92,14 @@ body { z-index: 9999; display: flex; align-items: center; - background-color: rgb(186, 5, 23); - color: white; + background-color: var(--inspector-background); + color: var(--inspector-text); border-radius: 4px; font-size: 16px; padding: 12px 24px; box-sizing: border-box; - text-align: left} + text-align: left +} .modalBlackBase{ display: block; position: fixed; @@ -96,30 +107,37 @@ body { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(var(--inspector-black-rgb), 0.5); z-index: 1050; - overflow-y: auto} -.sf-link { - background-color: rgb(6, 28, 63); + overflow-y: auto; +} +a { + color: var(--inspector-link); + &:visited { + color: var(--inspector-visited-link); + } +} +a.sf-link { + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; - padding-right: 1em;} -.sf-link svg { - width: 1.8em; - ; - height: 1.8em; - ; + color: var(--inspector-svg-text); + padding-right: 1em; +} +a.sf-link svg { + width: 1.8em;; + height: 1.8em;; display: block; margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white;} + fill: var(--inspector-svg-text); +} textarea { display: block; width: 100%; @@ -128,85 +146,111 @@ textarea { font-size: 0.9rem; padding: 8px 10px; border-radius: 0.25rem; - border: 1px solid #DDDBDA;} + border: 1px solid var(--inspector-subtle-neutral); + color: var(--inspector-text); + background-color: var(--inspector-background); +} .fieldsLink:visited { - color: rgb(0, 0, 238)} + color: var(--inspector-visited-link); +} textarea[hidden] { - display: none;} + display: none; +} .help-text { - background: #fff; - border: 1px solid #DDDBDA; + background: var(--inspector-background); + border: 1px solid var(--inspector-subtle-neutral); padding: 0 15px; border-radius: 0.25rem; margin-top: 10px; - margin-bottom: 5px;} + margin-bottom: 5px; +} #query { height: 5em; - min-height: 7em;} + min-height: 7em; +} #result-area { flex: 1 1 0; margin-bottom: 12px; display: flex; flex-direction: column; - padding: 0;} + padding: 0; +} .result-bar { margin-bottom: 3px; display: flex; align-items: center; - padding: 8px 12px;} + padding: 8px 12px; +} .result-info { font-style: italic; margin-left: 9px; - color: #8c8c8c;} + color: var(--inspector-neutral); +} #result-text { flex: 1 1 0; resize: none; - white-space: pre;} + white-space: pre; +} #result-table { overflow: auto; flex: 1 1 0; - background-color: #fff; - border-top: 1px solid #DDDBDA;} + background-color: var(--inspector-background); + border-top: 1px solid var(--inspector-subtle-neutral); +} .table-responsive { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS devices */ - margin-bottom: 1rem;} + margin-bottom: 1rem; +} .area { overflow-x: auto; - background-color: #F8F8F8; + background-color: var(--inspector-shade); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; - margin: 12px 12px 0 12px;} + border: 1px solid var(--inspector-subtle-neutral); + margin: 12px 12px 0 12px; +} h1 { font-size: 1rem; display: inline; - color: #080707; + color: var(--inspector-text); font-weight: 700; - line-height: 1.25;} + line-height: 1.25; +} .query-controls { display: flex; justify-content: space-between; - align-items: flex-end;} + align-items: flex-end; +} .query-controls .button-group { - margin-bottom: 8px;} + margin-bottom: 8px; +} .query-options { - margin-bottom: 8px;} + margin-bottom: 8px; +} .query-options label { - margin-right: 10px;} + margin-right: 10px; +} +input[type="text"]{ + color: var(--inspector-text); + background-color: var(--inspector-background); +} .area input[type="radio"], .area input[type="checkbox"] { - margin: 0 2px 0 0;} + margin: 0 2px 0 0; +} .area label { white-space: nowrap; - cursor: pointer;} + cursor: pointer; +} .area * { vertical-align: middle} .query-history-controls { display: flex; flex-wrap: wrap; - justify-content: flex-end;} + justify-content: flex-end; +} select, input[type=search], input[type=save], @@ -214,25 +258,32 @@ input[type=default] { width: 8.5rem; font-family: inherit; padding: 5px 13px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); height: 32px; position: relative; - border-radius: 0.25rem;} + border-radius: 0.25rem; + background-color: var(--inspector-background); + color: var(--inspector-text); +} input[type=search] { background-image: url(images/search.svg); background-repeat: no-repeat; background-size: 1rem; background-position: 10px 7px; - padding-left: 35px;} + padding-left: 35px; +} input[type=save] { background-image: url(images/save.svg); background-repeat: no-repeat; background-size: 1rem; background-position: 10px 7px; - padding-left: 35px;} + padding-left: 35px; +} input[type="checkbox"] { width: 1rem; - height: 1rem;} + height: 1rem; + accent-color: var(--inspector-primary); +} textarea:not([readonly]):focus, button:active, button:focus, @@ -240,10 +291,11 @@ input:active, input:focus, select:active, select:focus { - border: 1px solid rgb(21, 137, 238); - box-shadow: rgb(6, 28, 63) 0px 0px 3px 0px; + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; outline: none; - z-index: 1;} + z-index: 1; +} .button-group button:active:not(:first-child), .button-group button:focus:not(:first-child), .button-group input:active:not(:first-child), @@ -251,113 +303,104 @@ select:focus { .button-group select:focus:not(:first-child), .button-group select:focus:not(:first-child) { margin-left: -1px; - border: 1px solid rgb(21, 137, 238);} + border: 1px solid var(--inspector-primary); +} button:disabled, input:disabled { - color: #dddbda; - cursor: default;} + color: var(--inspector-primary); + cursor: default; +} .form-group{ padding-top:5px; - padding-bottom:5px;} + padding-bottom:5px; +} button:disabled:hover, input:disabled:hover { - background-color: #fff; - color: #dddbda;} + background-color: var(--inspector-background); + color: var(--inspector-primary); +} .highlighted { - background-color: rgb(0, 112, 210); - border-color: rgb(0, 112, 210); - color: #fff;} + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); +} button:active { - background-color: rgb(238, 241, 246)!important; - color: #005fb2!important;} + background-color: var(--inspector-background) !important; + color: var(--inspector-middle) !important; +} .highlighted:hover { - background-color: rgb(0, 95, 178); - color: #fff;} + background-color: var(--inspector-accent); + color: var(--inspector-white); +} .ulItem{ position: fixed; - width: 400px; - max-height: 200px; -overflow-y: auto; -z-index: 10001; /* Increased z-index*/ -border: 1px solid #ccc; -border-top: none; -border-radius: 0 0 4px 4px; -background-color: white; -list-style: none; -padding: 0; -margin: 0; -box-shadow: 0 4px 8px rgba(0,0,0,0.1);} + width: 400px; + max-height: 200px; + overflow-y: auto; + z-index: 10001; /* Increased z-index*/ + border: 1px solid var(--inspector-neutral); + border-top: none; + border-radius: 0 0 4px 4px; + background-color: var(--inspector-background); + list-style: none; + padding: 0; + margin: 0; + box-shadow: 0 4px 8px var(--inspector-text); +} .highlighted:disabled { - background-color: #c9c7c5!important; - border-color: #c9c7c5!important; - color: #fff!important;} -.highlighted:disabled:hover { - background-color: #c9c7c5; - color: #fff;} + background-color: var(--inspector-subtle-neutral) !important; + border-color: var(--inspector-subtle-neutral); + color: var(--inspector-inverted-text) !important; +} option[value="null"][disabled] { - display: none;} + display: none; +} textarea[readonly] { outline: none; border-radius: 0; border: none; - border-top: 1px solid #DDDBDA;} + border-top: 1px solid var(--inspector-subtle-neutral); +} #help-btn { margin-left: auto; text-decoration: none; font-size: 1.5rem; font-weight: 700; - color: #919191; + color: var(--inspector-neutral); display: flex; - align-items: center;} + align-items: center; +} #help-btn:hover .icon { - background-color: #818181;} + background-color: var(--inspector-neutral); +} #help-btn .icon { display: inline-block; width: 1.4rem; height: 1.4rem; - ; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1.4rem; - ; + mask-size: 1.4rem; -webkit-mask-image: url(images/help.svg); + mask-image: url(images/help.svg); -webkit-mask-position: center; - background-color: #919191;} + mask-position: center; + background-color: var(--inspector-neutral); +} #spinner { left: -15px; - top: 9px;} + top: 9px; +} .flex-right { margin-left: auto; display: flex; - align-items: center;} + align-items: center; +} #result-area h1 { - margin-right: 1em;} -.cancel-btn { - margin-left: 1em; - color: #c23934;} -.cancel-btn:not(:disabled):hover, -.cancel-btn:not(:disabled):active, -.cancel-btn:not(:disabled):focus { - color: #a12b2b;} -.delete-btn { - background-color: #c23934; - border-color: #c23934; - color: white; - /* Allows to still show the title even when disabled as it contains useful information */ - pointer-events: auto;} -.delete-btn:not(:disabled):hover, -.delete-btn:not(:disabled):focus { - background-color: #a61a14; - border-color: #c23934; - color: white;} -.delete-btn:not(:disabled):active { - background-color: #870500; - border-color: #870500;} -.delete-btn:disabled, .delete-btn:disabled:hover { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: white;} + margin-right: 1em; +} .char-btn { - color: white; + color: var(--inspector-text); text-decoration: none; background-color: gray; display: inline-block; @@ -366,217 +409,148 @@ textarea[readonly] { border-radius: 7px; line-height: 14px; text-align: center; - margin: 1px 0 0 3px;} + margin: 1px 0 0 3px; +} .char-btn[hidden], button[hidden], .button[hidden] { - display: none;} + display: none; +} .button-group { - white-space: nowrap;} + white-space: nowrap; +} .button-group button, .button-group .button, .button-group select, .button-group input { border-left-width: 0; border-radius: 0; - margin-right: 0} -/* div.button-group:not(:only-of-type) { - margin-left: 10px;} -*/ -.button-group> :first-child, -.button-group>[hidden]+* { + margin-right: 0 +} +.button-group > :first-child, +.button-group > [hidden]+* { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; - border-left-width: 1px;} -.button-group> :last-child { + border-left-width: 1px; +} +.button-group > :last-child { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; - margin-right: 10px;} + margin-right: 10px; +} button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-button-border); height: 32px; display: inline-block; text-decoration: none; - background-color: white; + background-color: var(--inspector-background); padding: 0 16px; - color: #0070d2; + color: var(--inspector-middle); cursor: pointer; outline: none; position: relative; line-height: 32px; border-radius: 0.25rem; margin-right: 10px; - white-space: nowrap;} + white-space: nowrap; +} button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2;} -button.toggle { - padding: 0 11px;} -button.toggle .button-toggle-icon, -button.toggle .button-icon { - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 1rem; - background-color: #706E6B; - display: inline-block; - width: 16px; - height: 16px;} -button.toggle:hover .button-icon, -button.toggle:hover .button-toggle-icon { - background-color: #004487;} + background-color: var(--inspector-shade); + color: var(--inspector-text); +} .flex-right button:last-child { - margin-right: 0;} + margin-right: 0; +} button.expand .button-toggle-icon { - -webkit-mask-image: url(images/down.svg);} + -webkit-mask-image: url(images/down.svg); + mask-image: url(images/down.svg); +} button.contract .button-toggle-icon { - -webkit-mask-image: url(images/up.svg);} + -webkit-mask-image: url(images/up.svg); + mask-image: url(images/up.svg); +} button.toggle .button-icon { - -webkit-mask-image: url(images/light_bulb.svg);} -.autocomplete-header { - display: flex; - align-items: flex-end; - margin-top: 8px;} -.autocomplete-header span { - font-size: 1rem;} -.autocomplete-results { - overflow: hidden; - margin-top: 7px; - display: flex; - flex-wrap: nowrap;} -.expanded .autocomplete-results { - flex-wrap: wrap;} -.autocomplete-results a { - border: 1px solid #DDDBDA; - border-radius: 0.25rem; - padding: 0px 4px; - text-decoration: none; - color: #006dcc;} -.autocomplete-results a:hover, -.autocomplete-results a:active { - background-color: #eff1f5; - color: #005fb2;} -.autocomplete-result, -.autocomplete-results span { - margin: 0 4px 4px 0; - white-space: nowrap;} -.autocomplete-icon { - display: inline-block; - margin: -1px 2px 0 1px; - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 0.95rem; - background-color: #706E6B; - width: 16px; - height: 16px;} -.relationshipName { - font-style: italic;} -.relationshipName .autocomplete-icon { - -webkit-mask-image: url(images/relate.svg); - background-color: #0070d2;} -.object .autocomplete-icon { - -webkit-mask-image: url(images/sobject.svg); - background-color: #04844B;} + -webkit-mask-image: url(images/light_bulb.svg); + mask-image: url(images/light_bulb.svg); +} .modal-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; - background-color: #fff; + background-color: var(--inspector-background); padding: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px var(--inspector-text); border-radius: 8px; scrollbar-width: auto; - scrollbar-color: #B0C4DF transparent;} + scrollbar-color: var(--inspector-primary) transparent; +} .modal-dialog::-webkit-scrollbar { - width: 8px;} + width: 8px; +} .modal-dialog::-webkit-scrollbar-track { - background: transparent;} + background: transparent; +} .modal-dialog::-webkit-scrollbar-thumb { - background-color: #B0C4DF; + background-color: var(--inspector-primary); border-radius: 4px; - border: 2px solid transparent;} + border: 2px solid transparent; +} .modal-title { font-size: 1.25rem; font-weight: 700; - color: #16325c;} -.variable .autocomplete-icon { - -webkit-mask-image: url(images/variable.svg);} -.autocomplete-icon { - -webkit-mask-image: url(images/quotation_marks.svg);} -.null .autocomplete-icon { - -webkit-mask-image: url(images/steps.svg);} -.fieldName .autocomplete-icon { - /* default icon */ - -webkit-mask-image: url(images/question_mark.svg);} -.fieldName.reference .autocomplete-icon { - -webkit-mask-image: url(images/record_lookup.svg);} -.fieldName.string .autocomplete-icon { - -webkit-mask-image: url(images/string.svg);} -.fieldName.id .autocomplete-icon { - -webkit-mask-image: url(images/anchor.svg);} -.fieldName.picklist .autocomplete-icon { - -webkit-mask-image: url(images/picklist.svg);} -.fieldName.multipicklist .autocomplete-icon { - -webkit-mask-image: url(images/multi-picklist.svg);} -.fieldName.boolean .autocomplete-icon { - -webkit-mask-image: url(images/boolean.svg);} -.fieldName.phone .autocomplete-icon { - -webkit-mask-image: url(images/call.svg);} -.fieldName.textarea .autocomplete-icon { - -webkit-mask-image: url(images/textarea.svg);} -.fieldName.url .autocomplete-icon { - -webkit-mask-image: url(images/link.svg);} -.fieldName.int .autocomplete-icon, -.fieldName.double .autocomplete-icon, -.fieldName.long .autocomplete-icon { - -webkit-mask-image: url(images/number.svg);} -.fieldName.address .autocomplete-icon { - -webkit-mask-image: url(images/home.svg);} -.fieldName.datetime .autocomplete-icon { - -webkit-mask-image: url(images/date-time.svg);} -.fieldName.date .autocomplete-icon { - -webkit-mask-image: url(images/date.svg);} -.fieldName.currency .autocomplete-icon { - -webkit-mask-image: url(images/currency.svg);} -.fieldName.email .autocomplete-icon { - -webkit-mask-image: url(images/email.svg);} -.fieldName.location .autocomplete-icon { - -webkit-mask-image: url(images/checkin.svg);} -.fieldName.percent .autocomplete-icon { - -webkit-mask-image: url(images/percent.svg);} -.fieldName.encryptedstring .autocomplete-icon { - -webkit-mask-image: url(images/lock.svg);} -.fieldName.time .autocomplete-icon { - -webkit-mask-image: url(images/clock.svg);} -.fieldName.complexvalue .autocomplete-icon { - -webkit-mask-image: url(images/advanced_function.svg);} + color: var(--inspector-accent); +} .header { position: -webkit-sticky; position: sticky; top: 0; - z-index: 2;} + z-index: 2; +} .expanded{ overflow: auto; - height: 200px;} + height: 200px; +} /* Positioning */ -.relativePosition { position: relative;} -.zIndex1 { z-index: 1;} +.relativePosition { + position: relative; +} +.zIndex1 { + z-index: 1; +} /* Margins */ -.marginLeft10 { margin-left: 10px;} -.marginRight10 { margin-right: 10px;} +.marginLeft10 { + margin-left: 10px; +} +.marginRight10 { + margin-right: 10px; +} /* Widths */ -.width400 { width: 400px;} -.width100 { width: 100%;} -.maxWidth18 { max-width: 18%;} +.width400 { + width: 400px; +} +.width100 { + width: 100%; +} +.maxWidth18 { + max-width: 18%; +} /* List Item Styles */ .objectListItem { padding: 8px 12px; cursor: pointer; - transition: background-color 0.2s;} -.objectListItem:hover { background-color: #f0f0f0;} + transition: backgro-webkit-und-color 0.2s; +} +.objectListItem:hover { + background-color: var(--inspector-neutral); +} /* Text Styles */ -.errorText { color: red;} +.errorText { + color: var(--inspector-error); +} /* Modal Styles */ .modalOverlay { position: fixed; @@ -584,122 +558,241 @@ button.toggle .button-icon { left: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(var(--inspector-shade-rgb), 0.8); display: flex; justify-content: center; align-items: center; - z-index: 1000;} + z-index: 1000; +} .modalContent { - background-color: white; + background-color: var(--inspector-background); padding: 20px; border-radius: 8px; width: 500px; - max-width: 90%;} + max-width: 90%; +} .modalHeader { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 15px;} + margin-bottom: 15px; +} .closeButton { background: none; border: none; font-size: 1.5rem; - cursor: pointer;} + cursor: pointer; +} .importTextarea { width: 100%; height: 200px; - margin-bottom: 15px;} + margin-bottom: 15px; +} .modalFooter { display: flex; - justify-content: flex-end;} + justify-content: flex-end; +} /* Notification Styles */ .notificationContent { display: flex; - align-items: center;} + align-items: center; +} .errorIcon { display: inline-flex; align-items: center; - margin-right: 10px;} + margin-right: 10px; +} .closeIcon { margin-left: 10px; display: inline-flex; - align-items: center;} + align-items: center; +} /* Icon Styles */ -.iconFill { fill: white;} -.width24px { width: 24px;} -.height24px { height: 24px;} +.iconFill { + fill: white; +} +.width24px { + width: 24px; +} +.height24px { + height: 24px; +} /* Profiles Modal */ -.cursorPointer { cursor: pointer;} -.userSelectNone { user-select: none;} -.fullWidth { width: 100%;} -.borderCollapse { border-collapse: collapse;} -.marginBottom20 { margin-bottom: 20px;} +.cursorPointer { + cursor: pointer; +} +.userSelectNone { + user-select: none; +} +.fullWidth { + width: 100%; +} +.borderCollapse { + border-collapse: collapse; +} +.marginBottom20 { + margin-bottom: 20px; +} .tableCell { padding: 8px; - border-bottom: 1px solid #ddd;} -.textAlignLeft { text-align: left;} -.textAlignCenter { text-align: center;} + border-bottom: 1px solid var(--inspector-shade); +} +.textAlignLeft { + text-align: left; +} +.textAlignCenter { + text-align: center; +} .flexCenter { display: flex; align-items: center; - justify-content: center;} -.marginRight5 { margin-right: 5px;} -.overflowYHidden { overflow-y: hidden;} -.height80 { height: 80%;} -.maxWidth600 { max-width: 600px;} + justify-content: center; +} +.marginRight5 { + margin-right: 5px; +} +.overflowYHidden { + overflow-y: hidden; +} +.height80 { + height: 80%; +} +.maxWidth600 { + max-width: 600px; +} .flexColumn { display: flex; - flex-direction: column;} -.height100 { height: 100%;} + flex-direction: column; +} +.height100 { + height: 100%; +} .flexSpaceBetween { display: flex; - justify-content: space-between;} -.alignItemsCenter { align-items: center;} -.marginBottom15 { margin-bottom: 15px;} -.backgroundNone { background: none;} -.borderNone { border: none;} -.fontSize1_5 { font-size: 1.5rem;} -.fontWeightBold { font-weight: bold;} -.overflowYAuto { overflow-y: auto;} -.flexGrow1 { flex-grow: 1;} -.marginRight-10 { margin-right: -10px;} -.paddingRight10 { padding-right: 10px;} -.scrollbarThin { scrollbar-width: thin;} -.scrollbarColorBlue { scrollbar-color: #B0C4DF transparent;} -.padding8 { padding: 8px;} -.border1SolidCcc { border: 1px solid #ccc;} -.borderRadius4 { border-radius: 4px;} -.marginTop15 { margin-top: 15px;} -.borderTop1SolidE5 { border-top: 1px solid #e5e5e5;} -.padding15_0 { padding: 15px 0;} -.backgroundWhite { background-color: #fff;} + justify-content: space-between; +} +.alignItemsCenter { + align-items: center; +} +.marginBottom15 { + margin-bottom: 15px; +} +.backgroundNone { + background: none; +} +.borderNone { + border: none; +} +.fontSize1_5 { + font-size: 1.5rem; +} +.fontWeightBold { + font-weight: bold; +} +.overflowYAuto { + overflow-y: auto; +} +.flexGrow1 { + flex-grow: 1; +} +.marginRight-10 { + margin-right: -10px; +} +.paddingRight10 { + padding-right: 10px; +} +.scrollbarThin { + scrollbar-width: thin; +} +.scrollbarColorBlue { + scrollbar-color: var(--inspector-primary) transparent; +} +.padding8 { + padding: 8px; +} +.border1SolidCcc { + border: 1px solid var(--inspector-button-border); +} +.borderRadius4 { + border-radius: 4px; +} +.marginTop15 { + margin-top: 15px; +} +.borderTop1SolidE5 { + border-top: 1px solid var(--inspector-neutral); +} +.padding15_0 { + padding: 15px 0; +} +.backgroundWhite { + background-color: var(--inspector-background); +} .stickyBottom { position: sticky; - bottom: 0;} + bottom: 0; +} /* Field Options */ -.maxWidth500 { max-width: 500px;} -.maxHeight90vh { max-height: 90vh;} -.backgroundTransparent { background-color: transparent;} -.borderBottomNone { border-bottom: none;} -.padding0_0_10_0 { padding: 0 0 10px 0;} -.margin0 { margin: 0;} +.maxWidth500 { + max-width: 500px; +} +.maxHeight90vh { + max-height: 90vh; +} +.backgroundTransparent { + background-color: transparent; +} +.borderBottomNone { + border-bottom: none; +} +.padding0_0_10_0 { + padding: 0 0 10px 0; +} +.margin0 { + margin: 0; +} .absoluteRightTop { position: absolute; right: 0; - top: 0;} -.padding10_0_20_0 { padding: 10px 0 20px 0;} -.maxHeightCalc90vh-150px { max-height: calc(90vh - 150px);} + top: 0; +} +.padding10_0_20_0 { + padding: 10px 0 20px 0; +} +.maxHeightCalc90vh-150px { + max-height: calc(90vh - 150px); +} .flexEnd { display: flex; - justify-content: flex-end;} -.padding10_0_0_0 { padding: 10px 0 0 0;} + justify-content: flex-end; +} +.padding10_0_0_0 { + padding: 10px 0 0 0; +} /* Field Row */ -.width20px { width: 20px;} -.fillBlue { fill: #005fb2;} -.fillGreen { fill: #2e844a;} -.fillRed { fill: #ba0517;} -.fillGray { fill: #9c9c9c;} -.verticalAlignMiddle { vertical-align: middle;} -.fontSize20 { font-size: 20px;} -.btn100 { width: 100%;} \ No newline at end of file +.width20px { + width: 20px; +} +.fillBlue { + fill: var(--inspector-middle); +} +.fillGreen { + fill: var(--inspector-success); +} +.fillRed { + fill: var(--inspector-error); +} +.fillGray { + fill: var(--inspector-neutral); +} +.verticalAlignMiddle { + vertical-align: middle; +} +.fontSize20 { + font-size: 20px; +} +.btn100 { + width: 100%; +} + diff --git a/addon/field-creator.html b/addon/field-creator.html index d97e8326e..144c3f250 100644 --- a/addon/field-creator.html +++ b/addon/field-creator.html @@ -5,6 +5,8 @@ ... + +
@@ -13,4 +15,4 @@ - \ No newline at end of file + diff --git a/addon/field-creator.js b/addon/field-creator.js index ccbfe3973..fd7393c7e 100644 --- a/addon/field-creator.js +++ b/addon/field-creator.js @@ -1,5 +1,5 @@ /* global React ReactDOM field-creator.js */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; let h = React.createElement; @@ -223,7 +223,7 @@ class ProfilesModal extends React.Component { }, h("div", {className: "modal-content relativePosition height100 flexColumn"}, h("div", {className: "modal-header flexSpaceBetween alignItemsCenter marginBottom15"}, - h("h1", {className: "modal-title"}, "Set Field Permissions"), + h("h1", {className: "modal-title textAlignCenter width100 margin0"}, "Set Field Permissions"), h("button", { type: "button", "aria-label": "Close permission modal button", @@ -909,6 +909,7 @@ class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.state = { objects: [], profiles: [], @@ -1314,30 +1315,12 @@ class App extends React.Component { }); }; - formatApiName(label) { - const namingConvention = localStorage.getItem("fieldNamingConvention") || "pascal"; - - // First, replace any special characters with underscores and convert to proper case - let apiName = label.trim().replace(/[^a-zA-Z0-9\s]/g, "_"); - if (namingConvention === "underscore") { - // Convert spaces to underscores: "My Field Name" -> "My_Field_Name" - apiName = apiName.replace(/\s+/g, "_"); - } else { - // Remove underscores and convert to PascalCase: "My_Field_Name" -> "MyFieldName" - apiName = apiName.replace(/[\s_]+(\w)/g, (_, letter) => letter.toUpperCase()); - } - // Remove leading/trailing underscores - apiName = apiName.replace(/^_+|_+$/g, ""); - // Replace multiple underscores with single underscore - return apiName.replace(/_+/g, "_"); - } - onLabelChange = (index, label) => { this.setState((prevState) => ({ fields: prevState.fields.map((field, i) => { if (i === index) { field.label = label; - field.name = this.formatApiName(label); + field.name = label.replace(/\s+(\w)/g, (_, letter) => letter.toUpperCase()); delete field.deploymentStatus; delete field.deploymentError; } diff --git a/addon/inspect-inline.css b/addon/inspect-inline.css index aa68fde67..cc43f3d99 100644 --- a/addon/inspect-inline.css +++ b/addon/inspect-inline.css @@ -33,7 +33,7 @@ } .insext-unchecked { text-decoration: line-through; - color: gray; + color: var(--inspector-neutral); } .insext-formula { text-align: left; diff --git a/addon/inspect.css b/addon/inspect.css index aae462b1b..dafbc29ee 100644 --- a/addon/inspect.css +++ b/addon/inspect.css @@ -49,7 +49,7 @@ body, } .prod { - background-color: #e0a4b5; + background-color: var(--inspector-prod-background); background-image: url(images/lightning_red_background.png); } @@ -62,15 +62,15 @@ html { font-family: "Salesforce Sans", Arial, sans-serif; font-size: 100%; line-height: 1.5; - background: #fff; - color: #16325c; + background: var(--inspector-background); + color: var(--inspector-accent); } body { font-family: "Salesforce Sans", Arial, sans-serif; font-size: .8125rem; margin: 0; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; @@ -78,19 +78,19 @@ body { } a { - color: #0070d2; + color: var(--inspector-link); text-decoration: none; transition: color .1s linear; } a:active { - color: #00396b; + color: var(--inspector-primary); } a:focus, a:hover { text-decoration: underline; - color: #005fb2; + color: var(--inspector-accent); } a:active, @@ -103,13 +103,13 @@ a:hover { .sf-link:focus, .sf-link:hover { margin-right: 1em; - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; margin-right: 4px; } @@ -121,9 +121,9 @@ a:hover { margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } table { @@ -139,29 +139,30 @@ table { white-space: pre-wrap; } + .value-text.value-is-object { - color: #990; + color: var(--inspector-object); } .value-text.value-is-number { - color: #909; + color: var(--inspector-number); } .value-text.value-is-boolean { - color: #900; + color: var(--inspector-false-boolean); } .value-text.value-is-boolean-true { - color: #099; + color: var(--inspector-true-boolean); } .value-text.value-is-blank { - color: #aaa; + color: var(--inspector-neutral); font-style: italic; } .value-text.value-is-unknown { - color: #aaa; + color: var(--inspector-neutral); font-style: italic; } @@ -171,11 +172,11 @@ tr.fieldCalculated { tr.fieldHidden, tr.fieldHidden a[href] { - color: #777; + color: var(--inspector-neutral); } tr:hover { - background-color: #f3f3f3; + background-color: var(--inspector-shade); } th { @@ -184,6 +185,8 @@ th { textarea { font: inherit; + color: var(--inspector-text); + background-color: var(--inspector-background); } thead{ @@ -193,7 +196,13 @@ thead{ } .th-filter-row { - background-color: #FFFFFF; + background-color: var(--inspector-background); + + & > input { + color: var(--inspector-text); + background-color: inherit; + border: 2px solid var(--inspector-shade); + } } .field-label, .field-name, .field-column, .field-actions, .child-column, .child-actions { @@ -201,7 +210,7 @@ thead{ } .border-cell { - border-bottom: 1px solid #DDDBDA; + border-bottom: 1px solid var(--inspector-neutral); } .field-label { @@ -223,13 +232,13 @@ thead{ } .undo-button { - background-color: #eee; + background-color: var(--inspector-background); border-radius: 3px; width: 16px; height: 16px; display: inline-block; - box-shadow: 1px 1px 1px gray; - color: black; + box-shadow: 1px 1px 1px var(--inspector-neutral); + color: var(--inspector-text); text-decoration: none; text-align: center; vertical-align: top; @@ -249,16 +258,17 @@ thead{ width: 1.25rem; height: 1.25rem; line-height: 1; - background-color: #fff; + background-color: var(--inspector-background); vertical-align: middle; - color: #706e6b; - border: 1px solid #dddbda; + color: var(--inspector-neutral); + border: 1px solid var(--inspector-neutral); transition: border .15s linear; position: relative; display: inline-block; padding: 0; border-radius: .25rem; -webkit-appearance: none; + appearance: none; white-space: normal; cursor: pointer; } @@ -266,34 +276,38 @@ thead{ .actions-button:hover, .actions-button:active, .actions-button:focus { - color: #005fb2; + color: var(--inspector-primary); } .actions-button:focus { outline: 0; - box-shadow: 0 0 3px #0070d2; + box-shadow: 0 0 3px var(--inspector-primary); } .actions-icon { width: .75rem; height: .75rem; overflow: hidden; - fill: #b0adab; + fill: var(--inspector-neutral); } .table-settings-button { border: 0px solid transparent; padding: 0px 3px 0px 0px; + background-color: var(--inspector-background); } .table-settings-icon { -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1rem; - background-color: #706E6B; + mask-size: 1rem; + background-color: var(--inspector-neutral); display: inline-block; width: 16px; height: 16px; -webkit-mask-image: url(images/settings.svg); + mask-image: url(images/settings.svg); margin: 3px 0px -3px 0px; } @@ -304,8 +318,7 @@ thead{ th[tabindex] { cursor: pointer; font-weight: 700; - background: #eeeeee; - background-color: #eeeeee; + background-color: var(--inspector-background); } .column-filter-box { @@ -328,7 +341,7 @@ th[tabindex] { position: relative; margin: 10% auto; border-radius: 10px; - background: #fff; + background: var(--inspector-background); } #fieldDetailsView>div.container>div.mainContent { @@ -337,9 +350,14 @@ th[tabindex] { padding: 5px 20px 13px 20px; } +div.mainContent > input { + color: var(--inspector-text); + background-color: var(--inspector-background); +} + .closeLnk { - background: #606061; - color: #FFFFFF; + background: var(--inspector-neutral); + color: var(--inspector-text); line-height: 25px; position: absolute; right: -12px; @@ -349,11 +367,11 @@ th[tabindex] { text-decoration: none; font-weight: bold; border-radius: 12px; - box-shadow: 1px 1px 3px #000; + box-shadow: 1px 1px 3px var(--inspector-shade); } .closeLnk:hover { - background: #00d9ff; + background: var(--inspector-primary); } #fieldDetailsView td { @@ -370,9 +388,9 @@ th[tabindex] { font: inherit; width: 20em; padding: 0 2.5rem; - background-color: #fff; - color: #16325c; - border: 1px solid #d8dde6; + background-color: var(--inspector-background); + color: var(--inspector-text-neutral); + border: 1px solid var(--inspector-neutral); border-radius: .25rem; transition: border .1s linear, background-color .1s linear; display: inline-block; @@ -383,9 +401,9 @@ th[tabindex] { .filter-input:active, .filter-input:focus { outline: 0; - border-color: #1589ee; - background-color: #fff; - box-shadow: 0 0 3px #0070D2; + border-color: var(--inspector-primary); + background-color: var(--inspector-background); + box-shadow: 0 0 3px var(--inspector-primary); } .filter-icon { @@ -395,7 +413,7 @@ th[tabindex] { position: absolute; top: 50%; margin-top: -.5rem; - fill: #9faab5; + fill: var(--inspector-neutral); } .filter-clear { @@ -405,10 +423,10 @@ th[tabindex] { position: absolute; top: 50%; margin-top: -.5rem; - fill: #9faab5; + fill: var(--inspector-neutral); line-height: 1; vertical-align: middle; - color: #54698d; + color: var(--inspector-neutral); display: inline-block; border: 1px solid transparent; border-radius: .25rem; @@ -427,7 +445,7 @@ th[tabindex] { font-size: 1.2em; font-weight: bold; margin: .5em 0; - background-color: #fe3; + background-color: var(--inspector-warning); padding: .5em; border: 1px solid red; border-radius: 7px; @@ -440,13 +458,13 @@ th[tabindex] { top: -15px; }*/ .object-bar { - background: #f7f9fb; + background: var(--inspector-background); width: 100%; display: flex; align-items: center; padding: 0 12px; flex-wrap: wrap; - border-bottom: 1px solid #d8dde6; + border-bottom: 1px solid var(--inspector-neutral); } .object-tab { @@ -455,7 +473,7 @@ th[tabindex] { } .object-tab a { - color: #54698d; + color: var(--inspector-neutral); padding: 0 .75rem; text-decoration: none; height: 3rem; @@ -472,11 +490,11 @@ th[tabindex] { .object-tab:hover::after, .object-tab.active-tab::after { - background-color: #0070d2; + background-color: var(--inspector-accent); } .object-tab.active-tab a { - color: #16325c; + color: var(--inspector-link); } .object-tab * { @@ -523,13 +541,13 @@ th[tabindex] { } .button { - background-color: #fff; - color: #0070d2; + background-color: var(--inspector-background); + color: var(--inspector-accent); text-decoration: none; padding: 0 1rem; text-align: center; vertical-align: middle; - border: 1px solid #d8dde6; + border: 1px solid var(--inspector-neutral); display: inline-block; border-radius: .25rem; font: unset; @@ -540,9 +558,9 @@ th[tabindex] { .button[disabled] { cursor: default; - background-color: var(--slds-g-color-neutral-base-80, #c9c7c5); - border-color: var(--slds-g-color-neutral-base-80, #c9c7c5); - color: var(--slds-g-color-neutral-base-100, #fff); + background-color: var(--slds-g-color-neutral-base-80, var(--inspector-neutral)); + border-color: var(--slds-g-color-neutral-base-80, var(--inspector-neutral)); + color: var(--slds-g-color-neutral-base-100, var(--inspector-text)); } .object-actions { @@ -561,19 +579,19 @@ th[tabindex] { } .button:active:not([disabled]) { - background-color: #eef1f6; - color: #00396b; + background-color: var(--inspector-background); + color: var(--inspector-accent); } .button:focus { outline: 0; - box-shadow: 0 0 3px #0070D2; + box-shadow: 0 0 3px var(--inspector-primary); } .button:focus:not([disabled]), .button:hover:not([disabled]) { - background-color: #f4f6f9; - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-primary); } .button:active, @@ -584,40 +602,40 @@ th[tabindex] { } .button-brand { - background-color: #0070d2; - border-color: #0070d2; - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-text); } .button-brand:focus:not([disabled]), .button-brand:hover:not([disabled]) { - background-color: #005fb2; - border-color: #005fb2; - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-text); } .button-brand:active:not([disabled]) { - background-color: #005fb2; - border-color: #005fb2; - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-text); } .button-destructive { - background-color: #c23934; - border-color: #c23934; - color: #fff; + background-color: var(--inspector-error); + border-color: var(--inspector-error); + color: var(--inspector-text); } .button-destructive:focus:not([disabled]), .button-destructive:hover:not([disabled]) { - background-color: #a61a14; - color: #fff; + background-color: var(--inspector-warning); + color: var(--inspector-text); } .button-destructive:active:not([disabled]) { - background-color: #870500; - border-color: #870500; - color: #fff; + background-color: var(--inspector-error); + border-color: var(--inspector-error); + color: var(--inspector-text); } .column-button-outer { @@ -637,11 +655,11 @@ th[tabindex] { left: 50%; transform: translateX(-50%); white-space: nowrap; - border: 1px solid #d8dde6; + border: 1px solid var(--inspector-neutral); border-radius: .25rem; padding: .25rem 0; font-size: .75rem; - background: #fff; + background: var(--inspector-background); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16); margin-top: .5rem; } @@ -682,13 +700,13 @@ th[tabindex] { padding: .5rem .75rem; font-size: .75rem; line-height: 1.25; - color: #54698d; + color: var(--inspector-neutral); text-transform: uppercase; letter-spacing: .0625rem; } .column-popup label.menu-item:hover { - background-color: #f4f6f9; + background-color: var(--inspector-background); } .table-container { @@ -696,8 +714,8 @@ th[tabindex] { overflow: auto; flex: 1 1 0; border-radius: 3px; - border: 1px solid #d8dde6; - background-color: #ffffff; + border: 1px solid var(--inspector-neutral); + background-color: var(--inspector-background); } @keyframes spin { @@ -718,8 +736,8 @@ th[tabindex] { .footer-edit-bar { display: flex; padding: 4px; - border: 1px solid #d8dde6; - background-color: #f7f9fb;; + border: 1px solid var(--inspector-neutral); + background-color: var(--inspector-background); justify-content: center; } @@ -739,8 +757,8 @@ th[tabindex] { .pop-menu { z-index: 10; position: absolute; - border: 1px solid gray; - background-color: white; + border: 1px solid var(--inspector-neutral); + background-color: var(--inspector-background); padding: 5px 10px; margin-left: 5px; margin-top: -5px; @@ -755,4 +773,59 @@ th[tabindex] { .child-actions .pop-menu { right: 0; text-align: right; -} \ No newline at end of file +} + +/* transition */ +div.object-name { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + > span.quick-select { + transition-property: none; + } +} + +div.table-container { + transition-property: background-color, scrollbar-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > table > tbody > tr { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} + +th.th-filter-row { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > input { + transition-property: color, border-color; + transition-duration: inherit; + transition-timing-function: inherit; + } +} + +div.value-text { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +input.filter-input, +button.actions-button, +th[tabindex] { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +.table-settings-button { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/inspect.html b/addon/inspect.html index 2f89076d1..1a7ad1b1b 100644 --- a/addon/inspect.html +++ b/addon/inspect.html @@ -4,9 +4,11 @@ ... + + @@ -17,4 +19,4 @@ - \ No newline at end of file + diff --git a/addon/inspect.js b/addon/inspect.js index 91ba2ee4b..85bd83e5d 100644 --- a/addon/inspect.js +++ b/addon/inspect.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; /* global initButton */ import {getObjectSetupLinks, getFieldSetupLinks} from "./setup-links.js"; @@ -980,6 +980,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.onUseAllTab = this.onUseAllTab.bind(this); this.onUseFieldsTab = this.onUseFieldsTab.bind(this); this.onUseChildsTab = this.onUseChildsTab.bind(this); diff --git a/addon/inspector.css b/addon/inspector.css new file mode 100644 index 000000000..3caf2ce0b --- /dev/null +++ b/addon/inspector.css @@ -0,0 +1,305 @@ +html { + /* default */ + --inspector-black: #000000; + --inspector-black-rgb: 0, 0, 0; + --inspector-white: #FFFFFF; + --inspector-white-rgb: 255, 255, 255; + + + --inspector-concrete: #F3F3F3; + --inspector-concrete-rgb: 243, 243, 243; + --inspector-silver-chalice: #AFAFAF; + --inspector-silver-sand: #C9C9C9; + --inspector-cape-cod: #444444; + --inspector-silver: #BBBBBB; + --inspector-jackpot: #777777; + + --inspector-dodger-blue: #1789EE; + --inspector-dodger-blue-rgb: 23, 137, 238; + --inspector-boulder: #787878; + --inspector-conifer: #9BC53D; + --inspector-careys-pink: #E0A4B5; + --inspector-violet-eggplant: #990099; + --inspector-well-read: #C3423F; + --inspector-gorse: #FDE74C; + + --inspector-midnight-blue: #00396B; + --inspector-midnight-blue-rgb: 0, 57, 107; + --inspector-shark-dark: #252525; + --inspector-shark-dark-rgb: 37, 37, 37; + --inspector-chateau-green: #018E42; + --inspector-blush: #BD4F6C; + --inspector-east-bay: #49416D; + --inspector-tamarillo: #A31914; + --inspector-citron: #999900; + + + /* accent */ + --inspector-baltic-sea: #201C24; + --inspector-baltic-sea-rgb: 32, 28, 36; + --inspector-mercury: #E8E9EB; + --inspector-mercury-rgb: 232, 233, 235; + + --inspector-alto: #DCDCDC; + --inspector-alto-rgb: 220, 220, 220; + --inspector-star-dust: #989898; + + --inspector-mariner: #0176d3; + --inspector-mariner-rgb: 1, 118, 211; + --inspector-storm-dust: #616161; + --inspector-mantis: #85C852; + --inspector-clam-shell: #CAA9AA; + --inspector-purple: #63058E; + --inspector-medium-carmine: #AD4734; + --inspector-starship: #E7EC41; + + --inspector-biscay: #163460; + --inspector-biscay-rgb: 22, 52, 96; + --inspector-shark: #1C1C24; + --inspector-shark-rgb: 28, 28, 36; + --inspector-salem: #17894D; + --inspector-cranberry: #D34A77; + --inspector-bossanova: #5F3C78; + --inspector-monza: #B9141F; + --inspector-lucky: #AF940B; + + /* utilities */ + --inspector-blue-saffire: #226B86; + --inspector-insext-background: var(--inspector-blue-saffire); + --inspector-sand-background: #B0C4DF; + --inspector-prod-background: #E0A4B5; + --inspector-transition-time-fast: 1ms; + --inspector-transition-time-slow: 500ms; + --inspector-transition-function: ease-in-out; +} + +:is(html, #insext)[data-theme="light"] { + --inspector-background: var(--inspector-white); + --inspector-background-rgb: var(--inspector-white-rgb); + --inspector-text: var(--inspector-black); + --inspector-inverted-text: var(--inspector-background); + --inspector-text-neutral: var(--inspector-neutral); + --inspector-hover: var(--inspector-mercury); + + --inspector-primary: var(--inspector-dodger-blue); + --inspector-primary-rgb: var(--inspector-dodger-blue-rgb); + --inspector-middle: var(--inspector-mariner); + --inspector-accent: var(--inspector-midnight-blue); + --inspector-neutral: var(--inspector-boulder); + --inspector-shade: var(--inspector-concrete); + --inspector-shade-rgb: var(--inspector-concrete-rgb); + --inspector-dark-neutral: var(--inspector-cape-cod); + --inspector-subtle-neutral: var(--inspector-silver-sand); + + --inspector-link: var(--inspector-primary); + --inspector-visited-link: var(--inspector-link); + + --inspector-button: var(--inspector-middle); + --inspector-button-text: var(--inspector-link); + --inspector-button-border: var(--inspector-alto); + --inspector-button-active-border: var(--inspector-primary); + + --inspector-success: var(--inspector-conifer); + --inspector-warning: var(--inspector-gorse); + --inspector-error: var(--inspector-well-read); + --inspector-strong-error: var(--inspector-tamarillo); + + --inspector-object: var(--inspector-citron); + --inspector-number: var(--inspector-blush); + --inspector-false-boolean: var(--inspector-error); + --inspector-true-boolean: var(--inspector-accent); + + --inspector-svg-text: var(--inspector-shade); + --inspector-svg-picture: var(--inspector-careys-pink); + --inspector-svg-background: var(--inspector-accent); + + --inspector-working: var(--inspector-number); +} + +:is(html, #insext)[data-theme="dark"] { + --inspector-background: var(--inspector-black); + --inspector-background-rgb: var(--inspector-black-rgb); + --inspector-text: var(--inspector-white); + --inspector-inverted-text: var(--inspector-background); + --inspector-text-neutral: var(--inspector-silver-chalice); + --inspector-hover: var(--inspector-baltic-sea); + + --inspector-primary: var(--inspector-midnight-blue); + --inspector-primary-rgb: var(--inspector-midnight-blue-rgb); + --inspector-middle: var(--inspector-mariner); + --inspector-accent: var(--inspector-dodger-blue); + --inspector-neutral: var(--inspector-boulder); + --inspector-shade: var(--inspector-shark-dark); + --inspector-shade-rgb: var(--inspector-shark-dark-rgb); + --inspector-dark-neutral: var(--inspector-silver); + --inspector-subtle-neutral: var(--inspector-jackpot); + + --inspector-link: var(--inspector-accent); + --inspector-visited-link: var(--inspector-link); + + --inspector-button: var(--inspector-primary); + --inspector-button-text: var(--inspector-link); + --inspector-button-border: var(--inspector-neutral); + --inspector-button-active-border: var(--inspector-accent); + + --inspector-success: var(--inspector-chateau-green); + --inspector-warning: var(--inspector-citron); + --inspector-error: var(--inspector-well-read); + --inspector-strong-error: var(--inspector-tamarillo); + + --inspector-object: var(--inspector-gorse); + --inspector-number: var(--inspector-visited-link); + --inspector-false-boolean: var(--inspector-error); + --inspector-true-boolean: var(--inspector-accent); + + --inspector-svg-text: var(--inspector-text); + --inspector-svg-picture: var(--inspector-blush); + --inspector-svg-background: var(--inspector-primary); + + --inspector-working: var(--inspector-violet-eggplant); +} + +:is(html, #insext)[data-theme="light"][data-accent="accent"] { + --inspector-background: var(--inspector-mercury); + --inspector-background-rgb: var(--inspector-mercury-rgb); + --inspector-text: var(--inspector-baltic-sea); + --inspector-inverted-text: var(--inspector-background); + --inspector-text-neutral: var(--inspector-neutral); + --inspector-hover: var(--inspector-white); + + --inspector-primary: var(--inspector-mariner); + --inspector-primary-rgb: var(--inspector-mariner-rgb); + --inspector-middle: var(--inspector-dodger-blue); + --inspector-accent: var(--inspector-biscay); + --inspector-neutral: var(--inspector-storm-dust); + --inspector-shade: var(--inspector-alto); + --inspector-shade-rgb: var(--inspector-alto-rgb); + --inspector-dark-neutral: var(--inspector-cape-cod); + --inspector-subtle-neutral: var(--inspector-silver); + + --inspector-link: var(--inspector-primary); + --inspector-visited-link: var(--inspector-link); + + --inspector-button: var(--inspector-middle); + --inspector-button-text: var(--inspector-link); + --inspector-button-border: var(--inspector-neutral); + --inspector-button-active-border: var(--inspector-primary); + + --inspector-success: var(--inspector-mantis); + --inspector-warning: var(--inspector-starship); + --inspector-error: var(--inspector-medium-carmine); + --inspector-strong-error: var(--inspector-monza); + + --inspector-object: var(--inspector-lucky); + --inspector-number: var(--inspector-cranberry); + --inspector-false-boolean: var(--inspector-error); + --inspector-true-boolean: var(--inspector-biscay); + + --inspector-svg-text: var(--inspector-concrete); + --inspector-svg-picture: var(--inspector-clam-shell); + --inspector-svg-background: var(--inspector-accent); + + --inspector-working: var(--inspector-number); +} + +:is(html, #insext)[data-theme="dark"][data-accent="accent"] { + --inspector-background: var(--inspector-baltic-sea); + --inspector-background-rgb: var(--inspector-baltic-sea-rgb); + --inspector-text: var(--inspector-mercury); + --inspector-inverted-text: var(--inspector-background); + --inspector-text-neutral: var(--inspector-star-dust); + --inspector-hover: var(--inspector-black); + + --inspector-primary: var(--inspector-biscay); + --inspector-primary-rgb: var(--inspector-biscay-rgb); + --inspector-middle: var(--inspector-dodger-blue); + --inspector-accent: var(--inspector-mariner); + --inspector-neutral: var(--inspector-storm-dust); + --inspector-shade: var(--inspector-shark); + --inspector-shade-rgb: var(--inspector-shark-rgb); + --inspector-dark-neutral: var(--inspector-silver); + --inspector-subtle-neutral: var(--inspector-jackpot); + + --inspector-link: var(--inspector-accent); + --inspector-visited-link: var(--inspector-link); + + --inspector-button: var(--inspector-primary); + --inspector-button-text: var(--inspector-link); + --inspector-button-border: var(--inspector-neutral); + --inspector-button-active-border: var(--inspector-accent); + + --inspector-success: var(--inspector-salem); + --inspector-warning: var(--inspector-lucky); + --inspector-error: var(--inspector-medium-carmine); + --inspector-strong-error: var(--inspector-monza); + + --inspector-object: var(--inspector-starship); + --inspector-number: var(--inspector-visited-link); + --inspector-false-boolean: var(--inspector-error); + --inspector-true-boolean: var(--inspector-accent); + + --inspector-svg-text: var(--inspector-text); + --inspector-svg-picture: var(--inspector-cranberry); + --inspector-svg-background: var(--inspector-primary); + + --inspector-working: var(--inspector-purple); +} + +:is(div, input, ul, a):not(:has([style*=transparent])) /* all */ { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +:is(span, button, a).button /* all */, +textarea /* data-export, data-import, explore-api, inspect */, +input::placeholder /* will work in future browser developments */ { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +a.sf-link /* data-export, data-import, explore-api, inspect, limits, metadata, options */ { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & svg { + transition-property: fill, background-color; + transition-duration: inherit; + transition-timing-function: inherit; + } +} + +:is(span, label, li):not(:has(> span, > label)) /* all */, +h1:not(:has(> span)) /* all */ { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +#result-table /* data-export, data-import, data-load, explore-api */ { + transition-property: background-color, scrollbar-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > :not(div) { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} + +div#user-info /* data-export, data-import, explore-api, options */ { + transition-property: background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +body { + color: var(--inspector-text); + scrollbar-color: var(--inspector-neutral) var(--inspector-shade); + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/inspector.js b/addon/inspector.js index 91d5c93fe..6c2d88090 100644 --- a/addon/inspector.js +++ b/addon/inspector.js @@ -346,3 +346,125 @@ function showToastBanner(){ const containerToMask = document.getElementById("mainTabs"); if (containerToMask) { containerToMask.classList.add("mask"); } } + +function setFavicon(sfHost){ + let fav = localStorage.getItem(sfHost + "_customFavicon"); + if (fav){ + let link = document.querySelector("link[rel~='icon']"); + if (!link) { + link = document.createElement("link"); + link.rel = "icon"; + document.head.appendChild(link); + } + //check if custom favicon from the extension or web + if (fav.indexOf("http") == -1){ + fav = "./images/favicons/" + fav + ".png"; + } + link.href = fav; + } + +} + +function setSessionStorageForUpdatingButtonsAndClickThem(btn){ + sessionStorage.setItem("updatingFromOtherBtn", true); + btn.click(); + setTimeout(() => { + sessionStorage.setItem("updatingFromOtherBtn", false); + }, 100); +} + +export function alignDynamicAppearanceButton(isThemeKey){ + if (isThemeKey && window.matchMedia != null && sessionStorage.getItem("updatingFromOtherBtn") === "false"){ + // change toggle for enableDynamicAppearance if needed + const systemThemeValue = localStorage.getItem("enableDynamicAppearance"); + if (systemThemeValue === "false"){ + return; // already updated + } + + const dynamicThemeBtn = document.querySelector("#enableDynamicAppearance > span.slds-checkbox_faux") || parent.document.querySelector("#enableDynamicAppearance > span.slds-checkbox_faux"); + if (dynamicThemeBtn != null){ + setSessionStorageForUpdatingButtonsAndClickThem(dynamicThemeBtn); + return; + } + + // not in options page, fake the behaviour + localStorage.setItem("enableDynamicAppearance", JSON.stringify(false)); // always false because the user is overriding with the theme toggle + systemColorSchemeListener(false); // remove the listener + } +} + +export function setupColorListeners(sendMessage = false){ + const html = document.documentElement; + + // listen to changes from the options page + window.addEventListener("storage", e => { + if (!e.isTrusted || (e.key !== "enableDarkMode" && e.key !== "enableAccentColors")){ + return; + } + + const isThemeKey = e.key === "enableDarkMode"; + const newValueBool = e.newValue === "true"; + + const value = isThemeKey ? (newValueBool ? "dark" : "light") : (newValueBool ? "accent" : "default"); + const category = isThemeKey ? "theme" : "accent"; + const htmlValue = html.dataset[category]; + if (value == htmlValue) { + return; // avoid recursion + } + + html.dataset[category] = value; + if (sendMessage) { + parent.postMessage({category, value}, "*"); //update #insext (button.js) + } + + alignDynamicAppearanceButton(isThemeKey); + }); +} + +let systemColorListener = null; + +function handleSystemColorSchemeChange(e){ + // check if theme has to be changed + const systemThemeValue = e.matches ? "dark" : "light"; + const htmlThemeValue = document.documentElement.dataset.theme; + if (htmlThemeValue === systemThemeValue || sessionStorage.getItem("updatingFromOtherBtn") === "true"){ + return; + } + + // find the theme button and click it (to trigger theme change) + const optionsThemeBtn = document.querySelector("#enableDarkMode > span.slds-checkbox_faux") || parent.document.querySelector("#enableDarkMode > span.slds-checkbox_faux"); + if (optionsThemeBtn != null){ + setSessionStorageForUpdatingButtonsAndClickThem(optionsThemeBtn); + return; + } + + // not in options page, fake the behaviour + localStorage.setItem("enableDarkMode", JSON.stringify(e.matches)); + document.documentElement.dataset.theme = systemThemeValue; + const insext = document.getElementById("insext"); + if (insext != null){ + insext.dataset.theme = systemThemeValue; + } +} + +export function systemColorSchemeListener(enable = true){ + if (window.matchMedia == null || enable == null || (enable && systemColorListener != null) || (!enable && systemColorListener == null)){ + console.warn({enable, systemColorListener}); + return; + } + + if (enable) { + // If enabling, add the systemColorListener + systemColorListener = window.matchMedia("(prefers-color-scheme: dark)"); + systemColorListener.addEventListener("change", handleSystemColorSchemeChange); + // Initial check for the current color scheme + handleSystemColorSchemeChange(systemColorListener); + } else { + // If disabling, remove the systemColorListener if it exists + systemColorListener.removeEventListener("change", handleSystemColorSchemeChange); + systemColorListener = null; + } + localStorage.setItem("enableDynamicAppearance", JSON.stringify(enable)); +} + +sessionStorage.setItem("updatingFromOtherBtn", false); diff --git a/addon/lib/prism/prism-override.css b/addon/lib/prism/prism-override.css new file mode 100644 index 000000000..a0eb96c3a --- /dev/null +++ b/addon/lib/prism/prism-override.css @@ -0,0 +1,79 @@ +code[class*=language-], +pre[class*=language-] { + color: var(--inspector-color); +} + +pre[class*=language-] > code { + background-color: var(--inspector-shade); + background-image: linear-gradient(transparent 50%, rgba(var(--inspector-primary-rgb), .04) 50%); +} + +:not(pre) > code[class*=language-], +pre[class*=language-] { + background-color: var(--inspector-shade); +} + +:not(pre) > code[class*=language-] { + color: var(--inspector-error); + border: 1px solid unset; +} + +.token.block-comment, +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: var(--inspector-shade); +} + +.token.punctuation { + color: var(--inspector-neutral); +} + +.token.boolean, +.token.constant, +.token.deleted, +.token.function-name, +.token.number, +.token.property, +.token.symbol, +.token.tag { + color: var(--inspector-error); +} + +.token.attr-name, +.token.builtin, +.token.char, +.token.function, +.token.inserted, +.token.selector, +.token.string { + color: var(--inspector-success); +} + +.token.entity, +.token.operator, +.token.url, +.token.variable { + color: var(--inspector-number); + background: unset; +} + +.token.atrule, +.token.attr-value, +.token.class-name, +.token.keyword { + color: var(--inspector-primary); +} + +.token.important, +.token.regex { + color: var(--inspector-object) +} + +.language-css .token.string, +.style .token.string { + color: var(--inspector-number); + background: unset; +} + diff --git a/addon/limits.css b/addon/limits.css index 5bbe8647b..98d938285 100644 --- a/addon/limits.css +++ b/addon/limits.css @@ -34,9 +34,9 @@ figcaption > div { width:10rem; height:5rem; } -.gauge:before { - border-radius:5rem 5rem 0 0; - background:grey; +.gauge:before { + border-radius:5rem 5rem 0 0; + background:var(--inspector-neutral); } .gauge:after { position:absolute; @@ -44,7 +44,7 @@ figcaption > div { left:2.5rem; width:5rem; height:2.5rem; - background:#ffffff; + background:var(--inspector-background);; border-radius:2.5rem 2.5rem 0 0; } .meter { @@ -52,7 +52,7 @@ figcaption > div { transition:1.5s; transform-origin:center top; border-radius:0 0 6rem 6rem; - background:deepskyblue; + background:var(--inspector-primary); } .meter-value-container { position:absolute; @@ -66,7 +66,7 @@ figcaption > div { } .meter-value { font:bold 1.25rem/1.6 sans-serif; - color:#333; + color:var(--inspector-neutral);; line-height:2.5rem; white-space:pre; transition:1.5s; @@ -85,13 +85,37 @@ body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 0; + background-color: var(--inspector-background); +} +.sf-link { + margin-right: 1em; + background-color: var(--inspector-svg-background); + border-radius: 3px; + line-height: 2em; + text-decoration: none; + display: inline-block; + padding: 2px; + color: var(--inspector-svg-text); + padding-right: 1em; +} +.sf-link svg { + width: 2em; + height: 2em; + display: block; + margin-left: 1px; + margin-right: 1em; + float: left; + background-color: var(--inspector-svg-picture); + border-radius: 2px; + fill: var(--inspector-svg-text); } + .error-message { font-size: 1.2em; font-weight: bold; margin: .5em 0; - background-color: #fe3; + background-color: var(--inspector-warning); padding: .5em; border: 1px solid red; border-radius: 7px; @@ -103,7 +127,7 @@ body { } .object-bar { position: fixed; - background-color: rgba(255, 255, 255, 0.9); + background-color: var(--inspector-shade); width: 100%; padding: 8px; box-sizing: border-box; @@ -120,7 +144,7 @@ body { } .object-actions a, .object-actions button { display: inline-block; - border: 1px solid #ddd; + border: 1px solid var(--inspector-shade); padding: 6px 10px; border-radius: 3px; font: unset; @@ -130,7 +154,7 @@ body { display: inline-block; } .column-popup { - background: #ddd; + background: var(--inspector-shade); padding: 1em; overflow: auto; max-height: 500px; @@ -153,9 +177,30 @@ body { .body.empty { animation: spin 4s linear infinite; } + +html { + scrollbar-color: var(--inspector-neutral) var(--inspector-shade); + transition-duration: 500ms; + transition-timing-function: ease-in-out; + scrollbar-color: var(--inspector-neutral) var(--inspector-shade); +} + #user-info { font-size: .8125rem; } #user-info span { font-size: 1em; -} \ No newline at end of file +} + +/* transitions */ +figcaption, .meter-value { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +.gauge::before, .gauge::after { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/limits.html b/addon/limits.html index 32918e225..06b49113f 100644 --- a/addon/limits.html +++ b/addon/limits.html @@ -1,22 +1,21 @@ - - - - ... - - - - - - - - -
- - - - - - + + + ... + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/addon/limits.js b/addon/limits.js index 472350c09..958f7284a 100644 --- a/addon/limits.js +++ b/addon/limits.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; import {copyToClipboard} from "./data-load.js"; /* global initButton */ @@ -130,6 +130,7 @@ class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.model = this.props.vm; this.onCopyAsJson = this.onCopyAsJson.bind(this); this.onSortBy = this.onSortBy.bind(this); diff --git a/addon/links.mjs b/addon/links.mjs new file mode 100644 index 000000000..243581db3 --- /dev/null +++ b/addon/links.mjs @@ -0,0 +1,569 @@ +const setup = "/lightning/setup"; +const apexref = "https://developer.salesforce.com/docs/atlas.en-us.apexref.meta/apexref/"; + + +export const setupLinks = [ + //Setup + {label: "Setup Home", link: `${setup}/SetupOneHome/home`, section: "Setup", prod: false}, + {label: "Service Setup Assistant", link: `${setup}/ServiceHome/home`, section: "Setup", prod: false}, + {label: "Service Setup", link: `${setup}/SetupOneHome/home`, section: "Setup", prod: false}, + {label: "Multi-Factor Authentication Assistant", link: `${setup}/MfaAssistant/home`, section: "Setup", prod: false}, + {label: "Release Updates", link: `${setup}/ReleaseUpdates/home`, section: "Setup", prod: false}, + {label: "Salesforce Mobile App", link: `${setup}/SalesforceMobileAppQuickStart/home`, section: "Setup", prod: false}, + {label: "Optimizer", link: `${setup}/SalesforceOptimizer/home`, section: "Setup", prod: false}, + + //Administration > Users + {label: "Permission Sets Groups", link: `${setup}/PermSetGroups/home`, section: "Administration > Users", prod: false}, + {label: "Permission Sets", link: `${setup}/PermSets/home`, section: "Administration > Users", prod: false}, + {label: "Profiles", link: `${setup}/Profiles/home`, section: "Administration > Users", prod: false}, + {label: "Profiles (Enhanced)", link: `${setup}/EnhancedProfiles/home`, section: "Administration > Users", prod: false}, + {label: "Public Groups", link: `${setup}/PublicGroups/home`, section: "Administration > Users", prod: false}, + {label: "Queues", link: `${setup}/Queues/home`, section: "Administration > Users", prod: false}, + {label: "Roles", link: `${setup}/Roles/home`, section: "Administration > Users", prod: false}, + {label: "User Management Settings", link: `${setup}/UserManagementSettings/home`, section: "Administration > Users", prod: false}, + {label: "Users", link: `${setup}/ManageUsers/home`, section: "Administration > Users", prod: false}, + //Administration > Data + {label: "Big Objects", link: `${setup}/BigObjects/home`, section: "Administration > Data", prod: false}, + {label: "Data Export", link: `${setup}/DataManagementExport/home`, section: "Administration > Data", prod: false}, + {label: "Data Integration Metrics", link: `${setup}/XCleanVitalsUi/home`, section: "Administration > Data", prod: false}, + {label: "Data Integration Rules", link: `${setup}/CleanRules/home`, section: "Administration > Data", prod: false}, + //Administration > Data > Duplicate Management + {label: "Duplicate Error Logs", link: `${setup}/DuplicateErrorLog/home`, section: "Administration > Data > Duplicate Management", prod: false}, + {label: "Duplicate Rules", link: `${setup}/DuplicateRules/home`, section: "Administration > Data > Duplicate Management", prod: false}, + {label: "Matching Rules", link: `${setup}/MatchingRules/home`, section: "Administration > Data > Duplicate Management", prod: false}, + //Administration > Data + {label: "Mass Delete Records", link: `${setup}/DataManagementDelete/home`, section: "Administration > Data", prod: false}, + {label: "Mass Transfer Approval Requests", link: `${setup}/DataManagementManageApprovals/home`, section: "Administration > Data", prod: false}, + {label: "Mass Transfer Records", link: `${setup}/DataManagementTransfer/home`, section: "Administration > Data", prod: false}, + {label: "Mass Update Addresses", link: `${setup}/DataManagementMassUpdateAddresses/home`, section: "Administration > Data", prod: false}, + {label: "Picklist Settings", link: `${setup}/PicklistSettings/home`, section: "Administration > Data", prod: false}, + {label: "Schema Settings", link: `${setup}/SchemaSettings/home`, section: "Administration > Data", prod: false}, + {label: "State and Country/Territory Picklists", link: `${setup}/AddressCleanerOverview/home`, section: "Administration > Data", prod: false}, + {label: "Storage Usage", link: `${setup}/CompanyResourceDisk/home`, section: "Administration > Data", prod: false}, + //Administration > Email + {label: "Apex Exception Email", link: `${setup}/ApexExceptionEmail/home`, section: "Administration > Email", prod: false}, + {label: "Classic Email Templates", link: `${setup}/CommunicationTemplatesEmail/home`, section: "Administration > Email", prod: false}, + {label: "Compliance BCC Email", link: `${setup}/SecurityComplianceBcc/home`, section: "Administration > Email", prod: false}, + {label: "DKIM Keys", link: `${setup}/EmailDKIMList/home`, section: "Administration > Email", prod: false}, + {label: "Deliverability", link: `${setup}/OrgEmailSettings/home`, section: "Administration > Email", prod: false}, + {label: "Email Attachments", link: `${setup}/EmailAttachmentSettings/home`, section: "Administration > Email", prod: false}, + //Administration > Email > Delivery Settings + {label: "Email Domain Filters", link: `${setup}/EmailDomainFilter/home`, section: "Administration > Email > Delivery Settings", prod: false}, + {label: "Email Relays", link: `${setup}/EmailRelay/home`, section: "Administration > Email > Delivery Settings", prod: false}, + //Administration >Email + {label: "Email Footers", link: `${setup}/EmailDisclaimers/home`, section: "Administration > Email", prod: false}, + {label: "Email to Salesforce", link: `${setup}/EmailToSalesforce/home`, section: "Administration > Email", prod: false}, + {label: "Enhanced Email", link: `${setup}/EnhancedEmail/home`, section: "Administration > Email", prod: false}, + {label: "Gmail Integration and Sync", link: `${setup}/LightningForGmailAndSyncSettings/home`, section: "Administration > Email", prod: false}, + {label: "Letterheads", link: `${setup}/CommunicationTemplatesLetterheads/home`, section: "Administration > Email", prod: false}, + {label: "Lightning Email Templates", link: `${setup}/LightningEmailTemplateSetup/home`, section: "Administration > Email", prod: false}, + {label: "Mail Merge Templates", link: `${setup}/CommunicationTemplatesWord/home`, section: "Administration > Email", prod: false}, + {label: "Organization-Wide Addresses", link: `${setup}/OrgWideEmailAddresses/home`, section: "Administration > Email", prod: false}, + {label: "Outlook Configurations", link: `${setup}/EmailConfigurations/home`, section: "Administration > Email", prod: false}, + {label: "Outlook Integration and Sync", link: `${setup}/LightningForOutlookAndSyncSettings/home`, section: "Administration > Email", prod: false}, + {label: "Send through External Email Services", link: `${setup}/EmailTransportServiceSetupPage/home`, section: "Administration > Email", prod: false}, + {label: "Test Deliverability", link: `${setup}/TestEmailDeliverability/home`, section: "Administration > Email", prod: false}, + + //Platform Tools > Apps + {label: "App Manager", link: `${setup}/NavigationMenus/home`, section: "Platform Tools > Apps", prod: false}, + {label: "AppExchange Marketplace", link: `${setup}/AppExchangeMarketplace/home`, section: "Platform Tools > Apps", prod: false}, + //Platform Tools > Apps > Connected Apps + {label: "Connected Apps OAuth Usage", link: `${setup}/ConnectedAppsUsage/home`, section: "Platform Tools > Apps > Connected Apps", prod: false}, + {label: "Manage Connected Apps", link: `${setup}/ConnectedApplication/home`, section: "Platform Tools > Apps > Connected Apps", prod: false}, + //Platform Tools > Apps > Lightning Bolt + {label: "Flow Category", link: `${setup}/FlowCategory/home`, section: "Platform Tools > Apps > Lightning Bolt", prod: false}, + {label: "Lightning Bolt Solutions", link: `${setup}/LightningBolt/home`, section: "Platform Tools > Apps > Lightning Bolt", prod: false}, + //Platform Tools > Apps > Mobile Apps > Salesforce + {label: "Salesforce Branding", link: `${setup}/Salesforce1Branding/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + {label: "Salesforce Mobile Quick Start", link: `${setup}/Salesforce1SetupSection/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + {label: "Salesforce Navigation", link: `${setup}/ProjectOneAppMenu/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + {label: "Salesforce Notifications", link: `${setup}/NotificationsSettings/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + {label: "Salesforce Offline", link: `${setup}/MobileOfflineStorageAdmin/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + {label: "Salesforce Settings", link: `${setup}/Salesforce1Settings/home`, section: "Platform Tools > Apps > Mobile Apps > Salesforce", prod: false}, + //Platform Tools > Apps > Packaging + {label: "Installed Packages", link: `${setup}/ImportedPackage/home`, section: "Platform Tools > Apps > Packaging", prod: false}, + {label: "Package Manager", link: `${setup}/Package/home`, section: "Platform Tools > Apps > Packaging", prod: false}, + {label: "Package Usage", link: `${setup}/PackageUsageSummary/home`, section: "Platform Tools > Apps > Packaging", prod: false}, + + //Platform Tools > Feature Settings > Digital Experiences + {label: "All Sites", link: `${setup}/SetupNetworks/home`, section: "Platform Tools > Feature Settings > Digital Experiences", prod: false}, + {label: "Pages", link: `${setup}/CommunityFlexiPageList/home`, section: "Platform Tools > Feature Settings > Digital Experiences", prod: false}, + {label: "Settings", link: `${setup}/NetworkSettings/home`, section: "Platform Tools > Feature Settings > Digital Experiences", prod: false}, + {label: "Templates", link: `${setup}/CommunityTemplateDefinitionList/home`, section: "Platform Tools > Feature Settings > Digital Experiences", prod: false}, + {label: "Themes", link: `${setup}/CommunityThemeDefinitionList/home`, section: "Platform Tools > Feature Settings > Digital Experiences", prod: false}, + + //Platform Tools > Feature Settings + {label: "Functions", link: `${setup}/Functions/home`, section: "Platform Tools > Feature Settings", prod: false}, + {label: "Home", link: `${setup}/Home/home`, section: "Platform Tools > Feature Settings", prod: false}, + {label: "Quip (Salesforce Anywhere)", link: `${setup}/SalesforceAnywhereSetupPage/home`, section: "Platform Tools > Feature Settings", prod: false}, + + //Platform Tools > Einstein > Einstein Assessors + {label: "Einstein Bots Assessor", link: `${setup}/EinsteinBotsReadinessCheck/home`, section: "Platform Tools > Einstein > Einstein Assessors", prod: false}, + {label: "Einstein Conversation Insights Assessor", link: `${setup}/EinsteinCIReadinessCheck/home`, section: "Platform Tools > Einstein > Einstein Assessors", prod: false}, + {label: "Revenue Intelligence Assessor", link: `${setup}/EinsteinRevIntlReadinessCheck/home`, section: "Platform Tools > Einstein > Einstein Assessors", prod: false}, + {label: "Sales Cloud Einstein Assessor", link: `${setup}/SalesCloudEinsteinReadinessCheck/home`, section: "Platform Tools > Einstein > Einstein Assessors", prod: false}, + {label: "Service Cloud Einstein Assessor", link: `lightning/setup/ServiceCloudEinsteinReadinessCheck/home`, section: "Platform Tools > Einstein > Einstein Assessors", prod: false}, + //Platform Tools > Einstein > Einstein Platform + {label: "Einstein Prediction Builder", link: `${setup}/EinsteinBuilder/home`, section: "Platform Tools > Einstein > Einstein Platform", prod: false}, + {label: "Einstein Recommendation Builder", link: `${setup}/EinsteinRecommendation/home`, section: "Platform Tools > Einstein > Einstein Platform", prod: false}, + {label: "Einstein.ai", link: `${setup}/EinsteinKeyManagement/home`, section: "Platform Tools > Einstein > Einstein Platform", prod: false}, + //Platform Tools > Einstein > Einstein Search + {label: "Objects to Always Search", link: `${setup}/SearchScope/home`, section: "Platform Tools > Einstein > Einstein Search", prod: false}, + {label: "Search Layouts", link: `${setup}/EinsteinSearchLayouts/home`, section: "Platform Tools > Einstein > Einstein Search", prod: false}, + {label: "Search Manager", link: `${setup}/SearchConfiguration/home`, section: "Platform Tools > Einstein > Einstein Search", prod: false}, + {label: "Settings", link: `${setup}/EinsteinSearchSettings/home`, section: "Platform Tools > Einstein > Einstein Search", prod: false}, + {label: "Synonyms", link: `${setup}/ManageSynonyms/home`, section: "Platform Tools > Einstein > Einstein Search", prod: false}, + + //Platform Tools > Feature Settings > Salesforce Files + {label: "Asset Files", link: `${setup}/ContentAssets/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + {label: "Content Deliveries and Public Links", link: `${setup}/ContentDistribution/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + {label: "Files Connect", link: `${setup}/ContentHub/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + {label: "General Settings", link: `${setup}/FilesGeneralSettings/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + {label: "Regenerate Previews", link: `${setup}/RegeneratePreviews/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + {label: "Salesforce CRM Content", link: `${setup}/SalesforceCRMContent/home`, section: "Platform Tools > Feature Settings > Salesforce Files", prod: false}, + + //Platform Tools > Feature Settings > Sales + {label: "Activity Settings", link: `${setup}/HomeActivitiesSetupPage/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Contact Roles on Contracts", link: `${setup}/ContractContactRoles/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Contact Roles on Opportunities", link: `${setup}/OpportunityRoles/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Contract Settings", link: `${setup}/ContractSettings/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Individual Settings", link: `${setup}/IndividualSettings/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "LinkedIn Sales Navigator", link: `${setup}/LinkedInSalesNavigatorPage/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Notes Settings", link: `${setup}/NotesSetupPage/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Order Settings", link: `${setup}/OrderSettings/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Sales Processes", link: `${setup}/OpportunityProcess/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Social Accounts and Contacts Settings", link: `${setup}/SocialProfileOrgSettings/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + {label: "Update Reminders", link: `${setup}/OpportunityUpdateReminders/home`, section: "Platform Tools > Feature Settings > Sales", prod: false}, + + //Platform Tools > Feature Settings > Sales > Account + {label: "Account Settings", link: `${setup}/AccountSettings/home`, section: "Platform Tools > Feature Settings > Sales > Account", prod: false}, + {label: "Account Teams", link: `${setup}/AccountTeamSelling/home`, section: "Platform Tools > Feature Settings > Sales > Account", prod: false}, + {label: "Person Account", link: `${setup}/PersonAccountSettings/home`, section: "Platform Tools > Feature Settings > Sales > Account", prod: false}, + + //Platform Tools > Feature Settings > Service + {label: "Case Assignment Rules", link: `${setup}/CaseRules/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Case Auto-Response Rules", link: `${setup}/CaseResponses/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Case Comment Triggers", link: `${setup}/CaseCommentTriggers/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Case Team Roles", link: `${setup}/CaseTeamRoles/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Predefined Case Teams", link: `${setup}/CaseTeamTemplates/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Contact Roles on Cases", link: `${setup}/CaseContactRoles/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Customer Contact Requests", link: `${setup}/ContactRequestFlows/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Email-to-Case", link: `${setup}/EmailToCase/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Escalation Rules", link: `${setup}/CaseEscRules/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Feed Filters", link: `${setup}/FeedFilterDefinitions/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + + //Platform Tools > Feature Settings > Service > Field Service + {label: "Field Service Settings", link: `${setup}/FieldServiceSettings/home`, section: "Platform Tools > Feature Settings > Service > Field Service", prod: false}, + {label: "Field Service Mobile App Builder", link: `${setup}/FieldServiceAppBuilder/home`, section: "Platform Tools > Feature Settings > Service > Field Service", prod: false}, + {label: "Inbound Social Post Errors", link: `${setup}/InboundSocialPostErrors/homee`, section: "Platform Tools > Feature Settings > Service > Field Service", prod: false}, + + //Platform Tools > Feature Settings > Service > Knowledge + {label: "Data Category Assignments", link: `${setup}/KnowledgeDataCategorySetup/home`, section: "Platform Tools > Feature Settings > Service > Knowledge", prod: false}, + {label: "Data Category Mapping", link: `${setup}/ArticleFilterRules/home`, section: "Platform Tools > Feature Settings > Service > Knowledge", prod: false}, + {label: "Knowledge Settings", link: `${setup}/KnowledgeSettings/home`, section: "Platform Tools > Feature Settings > Service > Knowledge", prod: false}, + {label: "Validation Statuses", link: `${setup}/ValidationStatuses/home`, section: "Platform Tools > Feature Settings > Service > Knowledge", prod: false}, + + {label: "Macro Settings", link: `${setup}/MacroSettings/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Omni-Channel Settings", link: `${setup}/OmniChannelSettings/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Snap-ins", link: `${setup}/Snap-ins/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Social Business Rules", link: `${setup}/SocialCustomerServiceBusinessRules/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Social Customer Service", link: `${setup}/SocialCustomerManagementAccountSettings/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Support Processes", link: `${setup}/CaseProcess/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Support Settings", link: `${setup}/CaseSettings/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Web-to-Case", link: `${setup}/CaseWebtocase/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + {label: "Web-to-Case HTML Generator", link: `${setup}/CaseWebToCaseHtmlGenerator/home`, section: "Platform Tools > Feature Settings > Service", prod: false}, + //Platform Tools > Feature Settings > Survey + {label: "Survey Settings", link: `${setup}/SurveySettings/home`, section: "Platform Tools > Feature Settings > Survey", prod: false}, + //Platform Tools > Objects and Fields + {label: "Object Manager", link: `${setup}/ObjectManager/home`, section: "Platform Tools > Objects and Fields", prod: false}, + {label: "Picklist Value Sets", link: `${setup}/Picklists/home`, section: "Platform Tools > Objects and Fields", prod: false}, + {label: "Schema Builder", link: `${setup}/SchemaBuilder/home`, section: "Platform Tools > Objects and Fields", prod: false}, + //Platform Tools > Events + {label: "Event Manager", link: `${setup}/EventManager/home`, section: "Platform Tools > Events", prod: false}, + //Platform Tools > Process Automation + {label: "Approval Processes", link: `${setup}/ApprovalProcesses/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Automation Home", link: `${setup}/ProcessHome/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Flows", link: `${setup}/Flows/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Migrate to Flow", link: `${setup}/MigrateToFlowTool/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Next Best Action", link: `${setup}/NextBestAction/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Paused And Failed Flow Interviews", link: `${setup}/Pausedflows/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Post Templates", link: `${setup}/FeedTemplates/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Process Automation Settings", link: `${setup}/WorkflowSettings/home`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Process Builder", link: `${setup}/ProcessAutomation/home`, section: "Platform Tools > Process Automation", prod: false}, + + {label: "Email Alerts", link: `${setup}/WorkflowEmails/home`, section: "Platform Tools > Process Automation > Workflow Actions", prod: false}, + {label: "Field Updates", link: `${setup}/WorkflowFieldUpdates/home`, section: "Platform Tools > Process Automation > Workflow Actions", prod: false}, + {label: "Outbound Messages", link: `${setup}/WorkflowOutboundMessaging/home`, section: "Platform Tools > Process Automation > Workflow Actions", prod: false}, + {label: "Send Actions", link: `${setup}/SendAction/home`, section: "Platform Tools > Process Automation > Workflow Actions", prod: false}, + {label: "Tasks", link: `${setup}/WorkflowTasks/home`, section: "Platform Tools > Process Automation > Workflow Actions", prod: false}, + {label: "Workflow Rules", link: `${setup}/WorkflowRules/home`, section: "Platform Tools > Process Automation", prod: false}, + //User Interface + {label: "Action Link Templates", link: `${setup}/ActionLinkGroupTemplates/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Guided Actions", link: `${setup}/GuidedActions/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "App Menu", link: `${setup}/AppMenu/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Custom Labels", link: `${setup}/ExternalStrings/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Density Settings", link: `${setup}/DensitySetup/home`, section: "Platform Tools > User Interface", prod: false}, + + {label: "Global Actions", link: `${setup}/GlobalActions/home`, section: "Platform Tools > User Interface > Global Actions", prod: false}, + {label: "Publisher Layouts", link: `${setup}/GlobalPublisherLayouts/home`, section: "Platform Tools > User Interface > Global Actions", prod: false}, + + {label: "Lightning App Builder", link: `${setup}/FlexiPageList/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Lightning Extension", link: `${setup}/LightningExtension/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Loaded Console Tab Limit", link: `${setup}/ConsoleMaxTabCacheSetup/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Path Settings", link: `${setup}/PathAssistantSetupHome/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Quick Text Settings", link: `${setup}/LightningQuickTextSettings/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Record Page Settings", link: `${setup}/SimpleRecordHome/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Rename Tabs and Labels", link: `${setup}/RenameTab/home`, section: "Platform Tools > User Interface", prod: false}, + //Sites and Domains + {label: "Custom URLs", link: `${setup}/DomainSites/home`, section: "Platform Tools > User Interface > Sites and Domains", prod: false}, + {label: "Domains", link: `${setup}/DomainNames/home`, section: "Platform Tools > User Interface > Sites and Domains", prod: false}, + {label: "Sites", link: `${setup}/CustomDomain/home`, section: "Platform Tools > User Interface > Sites and Domains", prod: false}, + + {label: "Tabs", link: `${setup}/CustomTabs/home`, section: "Platform Tools > User Interface", prod: false}, + {label: "Themes and Branding", link: `${setup}/ThemingAndBranding/home`, section: "Platform Tools > User Interface", prod: false}, + //Translation Workbench + {label: "Data Translation Settings", link: `${setup}/LabelWorkbenchDataTranslationSetup/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + {label: "Export", link: `${setup}/LabelWorkbenchExport/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + {label: "Import", link: `${setup}/LabelWorkbenchImport/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + {label: "Override", link: `${setup}/LabelWorkbenchOverride/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + {label: "Translate", link: `${setup}/LabelWorkbenchTranslate/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + {label: "Translation Settings", link: `${setup}/LabelWorkbenchSetup/home`, section: "Platform Tools > User Interface > Translation Workbench", prod: false}, + + {label: "User Interface", link: `${setup}/UserInterfaceUI/home`, section: "Platform Tools > User Interface", prod: false}, + //Custom Code + {label: "Apex Classes", link: `${setup}/ApexClasses/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Apex Hammer Test Results", link: `${setup}/ApexHammerResultStatus/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Apex Settings", link: `${setup}/ApexSettings/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Apex Test Execution", link: `${setup}/ApexTestQueue/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Apex Test History", link: `${setup}/ApexTestHistory/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Apex Triggers", link: `${setup}/ApexTriggers/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Canvas App Previewer", link: `${setup}/CanvasPreviewerUi/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Custom Metadata Types", link: `${setup}/CustomMetadata/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Custom Permissions", link: `${setup}/CustomPermissions/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Custom Settings", link: `${setup}/CustomSettings/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Email Services", link: `${setup}/EmailToApexFunction/home`, section: "Platform Tools > Custom Code", prod: false}, + //Lightning Components + {label: "Debug Mode", link: `${setup}/UserDebugModeSetup/home`, section: "Platform Tools > Custom Code > Lightning Components", prod: false}, + {label: "Lightning Components", link: `${setup}/LightningComponentBundles/home`, section: "Platform Tools > Custom Code > Lightning Components", prod: false}, + + {label: "Platform Cache", link: `${setup}/PlatformCache/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Remote Access", link: `${setup}/RemoteAccess/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Static Resources", link: `${setup}/StaticResources/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Tools", link: `${setup}/ClientDevTools/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Visualforce Components", link: `${setup}/ApexComponents/home`, section: "Platform Tools > Custom Code", prod: false}, + {label: "Visualforce Pages", link: `${setup}/ApexPages/home`, section: "Platform Tools > Custom Code", prod: false}, + //Development + {label: "Dev Hub", link: `${setup}/DevHub/home`, section: "Platform Tools > Dev Hub", prod: true}, + {label: "DevOps Center", link: `${setup}/DevOpsCenterSetup/home`, section: "Platform Tools > Dev Hub", prod: true}, + {label: "Org Shape", link: `${setup}/ShapeGrantAccess/home`, section: "Platform Tools > Dev Hub", prod: true}, + //Performance + {label: "Performance Assistant", link: `${setup}/PerformanceAssistant/home`, section: "Platform Tools > Performance > Performance Testing", prod: false}, + //Platform Tools > Environments + {label: "Inbound Change Sets", link: `${setup}/InboundChangeSet/home`, section: "Platform Tools > Environments > Change Sets", prod: false}, + {label: "Outbound Change Sets", link: `${setup}/OutboundChangeSet/home`, section: "Platform Tools > Environments > Change Sets", prod: false}, + //Platform Tools > Environments > Deploy + {label: "Deployment Settings", link: `${setup}/DeploymentSettings/home`, section: "Platform Tools > Environments > Deploy", prod: false}, + {label: "Deployment Status", link: `${setup}/DeployStatus/home`, section: "Platform Tools > Environments > Deploy", prod: false}, + //Platform Tools > Environments > Jobs + {label: "Apex Flex Queue", link: `${setup}/ApexFlexQueue/home`, section: "Platform Tools > Environments > Jobs", prod: false}, + {label: "Apex Jobs", link: `${setup}/AsyncApexJobs/home`, section: "Platform Tools > Environments > Jobs", prod: false}, + {label: "Background Jobs", link: `${setup}/ParallelJobsStatus/home`, section: "Platform Tools > Environments > Jobs", prod: false}, + {label: "Bulk Data Load Jobs", link: `${setup}/AsyncApiJobStatus/home`, section: "Platform Tools > Environments > Jobs", prod: false}, + {label: "Scheduled Jobs", link: `${setup}/ScheduledJobs/home`, section: "Platform Tools > Environments > Jobs", prod: false}, + //Platform Tools > Environments > Logs + {label: "Debug Logs", link: `${setup}/ApexDebugLogs/home`, section: "Platform Tools > Environments > Logs", prod: false}, + {label: "Email Log Files", link: `${setup}/EmailLogFiles/home`, section: "Platform Tools > Environments > Logs", prod: false}, + //Platform Tools > Environments > Monitoring + {label: "API Usage Notifications", link: `${setup}/MonitoringRateLimitingNotification/home`, section: "Platform Tools > Environments > Monitoring", prod: false}, + {label: "Case Escalations", link: `${setup}/DataManagementManageCaseEscalation/home`, section: "Platform Tools > Environments > Monitoring", prod: false}, + {label: "Email Snapshots", link: `${setup}/EmailCapture/home`, section: "Platform Tools > Environments > Monitoring", prod: false}, + {label: "Outbound Messages", link: `${setup}/WorkflowOmStatus/home`, section: "Platform Tools > Environments > Monitoring", prod: false}, + {label: "Time-Based Workflow", link: `${setup}/DataManagementManageWorkflowQueue/home`, section: "Platform Tools > Environments > Monitoring", prod: false}, + + {label: "Sandboxes", link: `${setup}/DataManagementCreateTestInstance/home`, section: "Platform Tools > Environments", prod: true}, + {label: "System Overview", link: `${setup}/SystemOverview/home`, section: "Platform Tools > Environments", prod: false}, + //Platform Tools > User Engagement + {label: "Adoption Assistance", link: `${setup}/AdoptionAssistance/home`, section: "Platform Tools > User Engagement", prod: false}, + {label: "Guidance Center", link: `${setup}/LearningSetup/home`, section: "Platform Tools > User Engagement", prod: false}, + {label: "Help Menu", link: `${setup}/HelpMenu/home`, section: "Platform Tools > User Engagement", prod: false}, + {label: "In-App Guidance", link: `${setup}/Prompts/home`, section: "Platform Tools > User Engagement", prod: false}, + //Platform Tools > Integrations + {label: "API", link: `${setup}/WebServices/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Basic Data Import", link: `${setup}/BasicDataImport/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Change Data Capture", link: `${setup}/CdcObjectEnablement/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Data Import Wizard", link: `${setup}/DataManagementDataImporter/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Data Loader", link: `${setup}/DataLoader/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Dataloader.io", link: `${setup}/DataLoaderIo/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "External Data Sources", link: `${setup}/ExternalDataSource/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "External Objects", link: `${setup}/ExternalObjects/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "External Services", link: `${setup}/ExternalServices/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Platform Events", link: `${setup}/EventObjects/home`, section: "Platform Tools > Integrations", prod: false}, + {label: "Teams Integration", link: `${setup}/MicrosoftTeamsIntegration/home`, section: "Platform Tools > Integrations", prod: false}, + //Platform Tools > Notification Builder + {label: "Custom Notifications", link: `${setup}/CustomNotifications/home`, section: "Platform Tools > Notification Builder", prod: false}, + {label: "Notification Delivery Settings", link: `${setup}/NotificationTypesManager/home`, section: "Platform Tools > Notification Builder", prod: false}, + //Settings > Company Settings + {label: "Business Hours", link: `${setup}/BusinessHours/home`, section: "Settings > Company Settings", prod: false}, + {label: "Public Calendars and Resources", link: `${setup}/Calendars/home`, section: "Settings > Company Settings > Calendar Settings", prod: false}, + {label: "Company Information", link: `${setup}/CompanyProfileInfo/home`, section: "Settings > Company Settings", prod: false}, + {label: "Data Protection and Privacy", link: `${setup}/ConsentManagement/home`, section: "Settings > Company Settings", prod: false}, + {label: "Fiscal Year", link: `${setup}/ForecastFiscalYear/home`, section: "Settings > Company Settings", prod: false}, + {label: "Holidays", link: `${setup}/Holiday/home`, section: "Settings > Company Settings", prod: false}, + {label: "Language Settings", link: `${setup}/LanguageSettings/home`, section: "Settings > Company Settings", prod: false}, + {label: "Manage Currencies", link: `${setup}/CompanyCurrency/home`, section: "Settings > Company Settings", prod: false}, + {label: "Maps and Location Settings", link: `${setup}/MapsAndLocationServicesSettings/home`, section: "Settings > Company Settings", prod: false}, + {label: "My Domain", link: `${setup}/OrgDomain/home`, section: "Settings > Company Settings", prod: false}, + //Settings > Data Classification + {label: "Data Classification", link: `${setup}/DataClassificationSettings/home`, section: "Settings > Data Classification", prod: false}, + {label: "Data Classification Download", link: `${setup}/DataClassificationDownload/home`, section: "Settings > Data Classification", prod: false}, + {label: "Data Classification Upload", link: `${setup}/DataClassificationUpload/home`, section: "Settings > Data Classification", prod: false}, + //Settings > Privacy Center + {label: "Consent Event Stream", link: `${setup}/ConsentEventStream/home`, section: "Settings > Privacy Center", prod: false}, + //Settings > Identity + {label: "Auth. Providers", link: `${setup}/AuthProviders/home`, section: "Settings > Identity", prod: false}, + {label: "Identity Provider", link: `${setup}/IdpPage/home`, section: "Settings > Identity", prod: false}, + {label: "Identity Provider Event Log", link: `${setup}/IdpErrorLog/home`, section: "Settings > Identity", prod: false}, + {label: "Identity Verification", link: `${setup}/IdentityVerification/home`, section: "Settings > Identity", prod: false}, + {label: "Identity Verification History", link: `${setup}/VerificationHistory/home`, section: "Settings > Identity", prod: false}, + {label: "Login Flows", link: `${setup}/LoginFlow/home`, section: "Settings > Identity", prod: false}, + {label: "Login History", link: `${setup}/OrgLoginHistory/home`, section: "Settings > Identity", prod: false}, + {label: "OAuth Custom Scopes", link: `${setup}/OauthCustomScope/home`, section: "Settings > Identity", prod: false}, + {label: "OAuth and OpenID Connect Settings", link: `${setup}/OauthOidcSettings/home`, section: "Settings > Identity", prod: false}, + {label: "Single Sign-On Settings", link: `${setup}/SingleSignOn/home`, section: "Settings > Identity", prod: false}, + //Settings > Security + {label: "Account Owner Report", link: `${setup}/SecurityAccountOwner/home`, section: "Settings > Security", prod: false}, + {label: "Activations", link: `${setup}/ActivatedIpAddressAndClientBrowsersPage/home`, section: "Settings > Security", prod: false}, + {label: "CORS", link: `${setup}/CorsWhitelistEntries/home`, section: "Settings > Security", prod: false}, + {label: "CSP Trusted Sites", link: `${setup}/SecurityCspTrustedSite/home`, section: "Settings > Security", prod: false}, + {label: "Certificate and Key Management", link: `${setup}/CertificatesAndKeysManagement/home`, section: "Settings > Security", prod: false}, + {label: "Delegated Administration", link: `${setup}/DelegateGroups/home`, section: "Settings > Security", prod: false}, + //Settings > Security > Event Monitoring + {label: "Event Monitoring Settings", link: `${setup}/EventMonitoringSetup/home`, section: "Settings > Security > Event Monitoring", prod: false}, + {label: "Transaction Security Policies", link: `${setup}/TransactionSecurityNew/home`, section: "Settings > Security > Event Monitoring", prod: false}, + //Settings > Security + {label: "Expire All Passwords", link: `${setup}/SecurityExpirePasswords/home`, section: "Settings > Security", prod: false}, + {label: "Field Accessibility", link: `${setup}/FieldAccessibility/home`, section: "Settings > Security", prod: false}, + {label: "File Upload and Download Security", link: `${setup}/FileTypeSetting/home`, section: "Settings > Security", prod: false}, + {label: "Health Check", link: `${setup}/HealthCheck/home`, section: "Settings > Security", prod: false}, + {label: "Login Access Policies", link: `${setup}/LoginAccessPolicies/home`, section: "Settings > Security", prod: false}, + {label: "Named Credentials", link: `${setup}/NamedCredential/home`, section: "Settings > Security", prod: false}, + {label: "Network Access", link: `${setup}/NetworkAccess/home`, section: "Settings > Security", prod: false}, + {label: "Password Policies", link: `${setup}/SecurityPolicies/home`, section: "Settings > Security", prod: false}, + //Settings > Security > Platform Encryption + {label: "Advanced Settings", link: `${setup}/SecurityRemoteProxy/home`, section: "Settings > Security > Platform Encryption", prod: false}, + {label: "Encryption Policy", link: `${setup}/EncryptionPolicy/home`, section: "Settings > Security > Platform Encryption", prod: false}, + {label: "Encryption Statistics", link: `${setup}/EncryptionStatistics/home`, section: "Settings > Security > Platform Encryption", prod: false}, + {label: "Key Management", link: `${setup}/PlatformEncryptionKeyManagement/home`, section: "Settings > Security > Platform Encryption", prod: false}, + //Settings > Security + {label: "Portal Health Check", link: `${setup}/PortalSecurityReport/home`, section: "Settings > Security", prod: false}, + {label: "Private Connect", link: `${setup}/PrivateConnect/home`, section: "Settings > Security", prod: false}, + {label: "Remote Site Settings", link: `${setup}/SecurityRemoteProxy/home`, section: "Settings > Security", prod: false}, + {label: "Session Management", link: `${setup}/SessionManagementPage/home`, section: "Settings > Security", prod: false}, + {label: "Session Settings", link: `${setup}/SecuritySession/home`, section: "Settings > Security", prod: false}, + {label: "Sharing Settings", link: `${setup}/SecuritySharing/home`, section: "Settings > Security", prod: false}, + {label: "Trusted URLs for Redirects", link: `${setup}/SecurityRedirectWhitelistUrl/home`, section: "Settings > Security", prod: false}, + {label: "View Setup Audit Trail", link: `${setup}/SecurityEvents/home`, section: "Settings > Security", prod: false}, + + //Custom Link: + {label: "Create New Flow", link: "/builder_platform_interaction/flowBuilder.app", section: "Platform Tools > Objects and Fields > New", prod: false}, + {label: "Create New Custom Object", link: `${setup}/ObjectManager/new`, section: "Platform Tools > Process Automation", prod: false}, + {label: "Create New Permission Set", link: `${setup}/PermSets/page?address=/udd/PermissionSet/newPermissionSet.apexp`, section: "Administration > Users > Permission Set", prod: false}, + {label: "Create New Custom Permission", link: `${setup}/CustomPermissions/page?address=/0CP/e`, section: "Platform Tools > Custom Code > Custom Permission", prod: false}, + {label: "Recycle Bin", link: "/lightning/o/DeleteEvent/home", section: "App Launcher > Custom Link", prod: false}, + + //ConnectApi namespace classes doc links + {label: "Class ActionLinks", link: `${apexref}/apex_ConnectAPI_ActionLinks_static_methods.htm`, section: "Documentation Apex> ConnectApi > ActionLinks", prod: false, isExternal: true}, + {label: "Class Announcements", link: `${apexref}/apex_ConnectAPI_Announcements_static_methods.htm`, section: "Documentation Apex> ConnectApi > Announcements", prod: false, isExternal: true}, + {label: "Class BotVersionActivation", link: `${apexref}/apex_ConnectAPI_BotVersionActivation_static_methods.htm`, section: "Documentation Apex> ConnectApi > BotVersionActivation", prod: false, isExternal: true}, + {label: "Class CdpCalculatedInsight", link: `${apexref}/apex_ConnectAPI_CdpCalculatedInsight_static_methods.htm`, section: "Documentation Apex> ConnectApi > CdpCalculatedInsight", prod: false, isExternal: true}, + {label: "Class CdpIdentityResolution", link: `${apexref}/apex_ConnectAPI_CdpIdentityResolution_static_methods.htm`, section: "Documentation Apex> ConnectApi > CdpIdentityResolution", prod: false, isExternal: true}, + {label: "Class CdpQuery", link: `${apexref}/apex_ConnectAPI_CdpQuery_static_methods.htm`, section: "Documentation Apex> ConnectApi > CdpQuery", prod: false, isExternal: true}, + {label: "Class CdpSegment", link: `${apexref}/apex_ConnectAPI_CdpSegment_static_methods.htm`, section: "Documentation Apex> ConnectApi > CdpSegment", prod: false, isExternal: true}, + {label: "Class Chatter", link: `${apexref}/apex_ConnectAPI_Chatter_static_methods.htm`, section: "Documentation Apex> ConnectApi > Chatter", prod: false, isExternal: true}, + {label: "Class ChatterFavorites", link: `${apexref}/apex_ConnectAPI_ChatterFavorites_static_methods.htm`, section: "Documentation Apex> ConnectApi > ChatterFavorites", prod: false, isExternal: true}, + {label: "Class ChatterFeeds", link: `${apexref}/apex_ConnectAPI_ChatterFeeds_static_methods.htm`, section: "Documentation Apex> ConnectApi > ChatterFeeds", prod: false, isExternal: true}, + {label: "Class ChatterGroups", link: `${apexref}/apex_ConnectAPI_ChatterGroups_static_methods.htm`, section: "Documentation Apex> ConnectApi > ChatterGroups", prod: false, isExternal: true}, + {label: "Class ChatterMessages", link: `${apexref}/apex_ConnectAPI_ChatterMessages_static_methods.htm`, section: "Documentation Apex> ConnectApi > ChatterMessages", prod: false, isExternal: true}, + {label: "Class ChatterUsers", link: `${apexref}/apex_ConnectAPI_ChatterUsers_static_methods.htm`, section: "Documentation Apex> ConnectApi > ChatterUsers", prod: false, isExternal: true}, + {label: "Class Clm", link: `${apexref}/apex_ConnectAPI_Clm_static_methods.htm`, section: "Documentation Apex> ConnectApi > Clm", prod: false, isExternal: true}, + {label: "Class CommerceBuyerExperience", link: `${apexref}/apex_ConnectAPI_CommerceBuyerExperience_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceBuyerExperience", prod: false, isExternal: true}, + {label: "Class CommerceCart", link: `${apexref}/apex_ConnectAPI_CommerceCart_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceCart", prod: false, isExternal: true}, + {label: "Class CommerceCatalog", link: `${apexref}/apex_ConnectAPI_CommerceCatalog_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceCatalog", prod: false, isExternal: true}, + {label: "Class CommercePromotions", link: `${apexref}/apex_ConnectAPI_CommercePromotions_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommercePromotions", prod: false, isExternal: true}, + {label: "Class CommerceSearch", link: `${apexref}/apex_ConnectAPI_CommerceSearch_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceSearch", prod: false, isExternal: true}, + {label: "Class CommerceSearchConnectFamily", link: `${apexref}/apex_ConnectAPI_CommerceSearchConnectFamily_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceSearchConnectFamily", prod: false, isExternal: true}, + {label: "Class CommerceSearchSettings", link: `${apexref}/apex_ConnectAPI_CommerceSearchSettings_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceSearchSettings", prod: false, isExternal: true}, + {label: "Class CommerceStorePricing", link: `${apexref}/apex_ConnectAPI_CommerceStorePricing_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceStorePricing", prod: false, isExternal: true}, + {label: "Class CommerceWishlist", link: `${apexref}/apex_ConnectAPI_CommerceWishlist_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommerceWishlist", prod: false, isExternal: true}, + {label: "Class Communities", link: `${apexref}/apex_ConnectAPI_Communities_static_methods.htm`, section: "Documentation Apex> ConnectApi > Communities", prod: false, isExternal: true}, + {label: "Class CommunityModeration", link: `${apexref}/apex_ConnectAPI_CommunityModeration_static_methods.htm`, section: "Documentation Apex> ConnectApi > CommunityModeration", prod: false, isExternal: true}, + {label: "Class ContentHub", link: `${apexref}/apex_ConnectAPI_ContentHub_static_methods.htm`, section: "Documentation Apex> ConnectApi > ContentHub", prod: false, isExternal: true}, + {label: "Class ConversationApplicationDefinition", link: `${apexref}/apex_ConnectAPI_ConversationApplicationDefinition_static_methods.htm`, section: "Documentation Apex> ConnectApi > ConversationApplicationDefinition", prod: false, isExternal: true}, + {label: "Class Datacloud", link: `${apexref}/apex_ConnectAPI_Datacloud_static_methods.htm`, section: "Documentation Apex> ConnectApi > Datacloud", prod: false, isExternal: true}, + {label: "Class EmailMergeFieldService", link: `${apexref}/apex_ConnectAPI_EmailMergeFieldService_static_methods.htm`, section: "Documentation Apex> ConnectApi > EmailMergeFieldService", prod: false, isExternal: true}, + {label: "Class EmployeeProfiles", link: `${apexref}/apex_ConnectAPI_EmployeeProfiles_static_methods.htm`, section: "Documentation Apex> ConnectApi > EmployeeProfiles", prod: false, isExternal: true}, + {label: "Class ExternalEmailServices", link: `${apexref}/apex_ConnectAPI_ExternalEmailService_static_methods.htm`, section: "Documentation Apex> ConnectApi > ExternalEmailServices", prod: false, isExternal: true}, + {label: "Class ExternalManagedAccount", link: `${apexref}/apex_ConnectAPI_ExternalManagedAccount_static_methods.htm`, section: "Documentation Apex> ConnectApi > ExternalManagedAccount", prod: false, isExternal: true}, + {label: "Class FieldService", link: `${apexref}/apex_ConnectAPI_FieldService_static_methods.htm`, section: "Documentation Apex> ConnectApi > FieldService", prod: false, isExternal: true}, + {label: "Class FulfillmentOrder", link: `${apexref}/apex_ConnectAPI_FulfillmentOrder_static_methods.htm`, section: "Documentation Apex> ConnectApi > FulfillmentOrder", prod: false, isExternal: true}, + {label: "Class Knowledge", link: `${apexref}/apex_ConnectAPI_Knowledge_static_methods.htm`, section: "Documentation Apex> ConnectApi > Knowledge", prod: false, isExternal: true}, + {label: "Class LightningScheduler", link: `${apexref}/apex_ConnectAPI_LightningScheduler_static_methods.htm`, section: "Documentation Apex> ConnectApi > LightningScheduler", prod: false, isExternal: true}, + {label: "Class ManagedContent", link: `${apexref}/apex_ConnectAPI_ManagedContent_static_methods.htm`, section: "Documentation Apex> ConnectApi > ManagedContent", prod: false, isExternal: true}, + {label: "Class ManagedContentDelivery", link: "", section: "Documentation Apex> ConnectApi > ManagedContentDelivery", prod: false, isExternal: true}, + {label: "Class ManagedTopics", link: `${apexref}/apex_ConnectAPI_ManagedTopics_static_methods.htm`, section: "Documentation Apex> ConnectApi > ManagedTopics", prod: false, isExternal: true}, + {label: "Class MarketingIntegration", link: `${apexref}/apex_ConnectAPI_MarketingIntegration_static_methods.htm`, section: "Documentation Apex> ConnectApi > MarketingIntegration", prod: false, isExternal: true}, + {label: "Class Mentions", link: `${apexref}/apex_ConnectAPI_Mentions_static_methods.htm`, section: "Documentation Apex> ConnectApi > Mentions", prod: false, isExternal: true}, + {label: "Class Missions", link: `${apexref}/apex_ConnectAPI_Missions_static_methods.htm`, section: "Documentation Apex> ConnectApi > Missions", prod: false, isExternal: true}, + {label: "Class NamedCredentials", link: `${apexref}/apex_ConnectAPI_NamedCredentials_static_methods.htm`, section: "Documentation Apex> ConnectApi > NamedCredentials", prod: false, isExternal: true}, + {label: "Class NavigationMenu", link: `${apexref}/apex_ConnectAPI_NavigationMenu_static_methods.htm`, section: "Documentation Apex> ConnectApi > NavigationMenu", prod: false, isExternal: true}, + {label: "Class NextBestAction", link: `${apexref}/apex_ConnectAPI_NextBestAction_static_methods.htm`, section: "Documentation Apex> ConnectApi > NextBestAction", prod: false, isExternal: true}, + {label: "Class OmnichannelInventoryService", link: `${apexref}/apex_ConnectAPI_OmnichannelInventoryService_static_methods.htm`, section: "Documentation Apex> ConnectApi > OmnichannelInventoryService", prod: false, isExternal: true}, + {label: "Class Orchestration", link: `${apexref}/apex_ConnectAPI_Orchestration_static_methods.htm`, section: "Documentation Apex> ConnectApi > Orchestration", prod: false, isExternal: true}, + {label: "Class OrderPaymentSummary", link: `${apexref}/apex_ConnectAPI_OrderPaymentSummary_static_methods.htm`, section: "Documentation Apex> ConnectApi > OrderPaymentSummary", prod: false, isExternal: true}, + {label: "Class OrderSummary", link: `${apexref}/apex_ConnectAPI_OrderSummary_static_methods.htm`, section: "Documentation Apex> ConnectApi > OrderSummary", prod: false, isExternal: true}, + {label: "Class OrderSummaryCreation", link: `${apexref}/apex_ConnectAPI_OrderSummaryCreation_static_methods.htm`, section: "Documentation Apex> ConnectApi > OrderSummaryCreation", prod: false, isExternal: true}, + {label: "Class Organization", link: `${apexref}/apex_ConnectAPI_Organization_static_methods.htm`, section: "Documentation Apex> ConnectApi > Organization", prod: false, isExternal: true}, + {label: "Class PardotBusinessUnitContext", link: `${apexref}/apex_ConnectAPI_PardotBusinessUnitContext_static_methods.htm`, section: "Documentation Apex> ConnectApi > PardotBusinessUnitContext", prod: false, isExternal: true}, + {label: "Class Payments", link: `${apexref}/apex_ConnectAPI_Payments_static_methods.htm`, section: "Documentation Apex> ConnectApi > Payments", prod: false, isExternal: true}, + {label: "Class Personalization", link: `${apexref}/apex_ConnectAPI_Personalization_static_methods.htm`, section: "Documentation Apex> ConnectApi > Personalization", prod: false, isExternal: true}, + {label: "Class PickTicket", link: `${apexref}/apex_ConnectAPI_PickTicket_static_methods.htm`, section: "Documentation Apex> ConnectApi > PickTicket", prod: false, isExternal: true}, + {label: "Class QuestionAndAnswers", link: `${apexref}/apex_ConnectAPI_QuestionAndAnswers_static_methods.htm`, section: "Documentation Apex> ConnectApi > QuestionAndAnswers", prod: false, isExternal: true}, + {label: "Class Recommendations", link: `${apexref}/apex_ConnectAPI_Recommendations_static_methods.htm`, section: "Documentation Apex> ConnectApi > Recommendations", prod: false, isExternal: true}, + {label: "Class Records", link: `${apexref}/apex_ConnectAPI_Records_static_methods.htm`, section: "Documentation Apex> ConnectApi > Records", prod: false, isExternal: true}, + {label: "Class Repricing", link: `${apexref}/apex_ConnectAPI_Repricing_static_methods.htm`, section: "Documentation Apex> ConnectApi > Repricing", prod: false, isExternal: true}, + {label: "Class ReturnOrder", link: `${apexref}/apex_ConnectAPI_ReturnOrder_static_methods.htm`, section: "Documentation Apex> ConnectApi > ReturnOrder", prod: false, isExternal: true}, + {label: "Class Routing", link: `${apexref}/apex_ConnectAPI_Routing_static_methods.htm`, section: "Documentation Apex> ConnectApi > Routing", prod: false, isExternal: true}, + {label: "Class SalesforceInbox", link: `${apexref}/apex_ConnectAPI_SalesforceInbox_static_methods.htm`, section: "Documentation Apex> ConnectApi > SalesforceInbox", prod: false, isExternal: true}, + {label: "Class Sites", link: `${apexref}/apex_ConnectAPI_Sites_static_methods.htm`, section: "Documentation Apex> ConnectApi > Sites", prod: false, isExternal: true}, + {label: "Class SocialEngagement", link: `${apexref}/apex_ConnectAPI_SocialEngagement_static_methods.htm`, section: "Documentation Apex> ConnectApi > SocialEngagement", prod: false, isExternal: true}, + {label: "Class Surveys", link: `${apexref}/apex_ConnectAPI_Survey_static_methods.htm`, section: "Documentation Apex> ConnectApi > Surveys", prod: false, isExternal: true}, + {label: "Class TaxPlatform", link: `${apexref}/apex_ConnectAPI_TaxPlatform_static_methods.htm`, section: "Documentation Apex> ConnectApi > TaxPlatform", prod: false, isExternal: true}, + {label: "Class Topics", link: `${apexref}/apex_ConnectAPI_Topics_static_methods.htm`, section: "Documentation Apex> ConnectApi > Topics", prod: false, isExternal: true}, + {label: "Class UserProfiles", link: `${apexref}/apex_ConnectAPI_UserProfiles_static_methods.htm`, section: "Documentation Apex> ConnectApi > UserProfiles", prod: false, isExternal: true}, + {label: "Class Zones", link: `${apexref}/apex_ConnectAPI_Zones_static_methods.htm`, section: "Documentation Apex> ConnectApi > Zones", prod: false, isExternal: true}, + {label: "Class ConnectApi Input", link: `${apexref}/apex_connectapi_input.htm`, section: "Documentation Apex> ConnectApi > ActionLinks", prod: false, isExternal: true}, + {label: "Class ConnectApi Output", link: `${apexref}/apex_connectapi_output.htm`, section: "Documentation Apex> ConnectApi > ConnectApi Output", prod: false, isExternal: true}, + //Database namespace classes doc links + {label: "Class Batchable", link: `${apexref}/apex_interface_database_batchable.htm`, section: "Documentation Apex> Database > Batchable", prod: false, isExternal: true}, + {label: "Class BatchableContext", link: `${apexref}/apex_interface_database_batchablecontext.htm`, section: "Documentation Apex> Database > BatchableContext", prod: false, isExternal: true}, + {label: "Class DeletedRecord", link: `${apexref}/apex_class_database_deletedrecord.htm`, section: "Documentation Apex> Database > DeletedRecord", prod: false, isExternal: true}, + {label: "Class DeleteResult", link: `${apexref}/apex_methods_system_database_deleteresult.htm`, section: "Documentation Apex> Database > DeleteResult", prod: false, isExternal: true}, + {label: "Class DMLOptions", link: `${apexref}/apex_methods_system_database_dmloptions.htm`, section: "Documentation Apex> Database > DMLOptions", prod: false, isExternal: true}, + {label: "Class DuplicateError", link: `${apexref}/apex_class_Database_DuplicateError.htm`, section: "Documentation Apex> Database > DuplicateError", prod: false, isExternal: true}, + {label: "Class EmptyRecycleBinResult", link: `${apexref}/apex_methods_system_database_EmptyRecycleBinResult.htm`, section: "Documentation Apex> Database > EmptyRecycleBinResult", prod: false, isExternal: true}, + {label: "Class Error", link: `${apexref}/apex_methods_system_database_error.htm`, section: "Documentation Apex> Database > Error", prod: false, isExternal: true}, + {label: "Class GetDeletedResult", link: `${apexref}/apex_class_database_getdeletedresult.htm`, section: "Documentation Apex> Database > GetDeletedResult", prod: false, isExternal: true}, + {label: "Class GetUpdatedResult", link: `${apexref}/apex_class_database_getupdatedresult.htm`, section: "Documentation Apex> Database > GetUpdatedResult", prod: false, isExternal: true}, + {label: "Class LeadConvert", link: `${apexref}/apex_dml_convertLead.htm`, section: "Documentation Apex> Database > LeadConvert", prod: false, isExternal: true}, + {label: "Class LeadConvertResult", link: `${apexref}/apex_class_database_leadconvertresult.htm`, section: "Documentation Apex> Database > LeadConvertResult", prod: false, isExternal: true}, + {label: "Class MergeResult", link: `${apexref}/apex_class_database_mergeresult.htm`, section: "Documentation Apex> Database > MergeResult", prod: false, isExternal: true}, + {label: "Class QueryLocator", link: `${apexref}/apex_methods_system_database_batch.htm`, section: "Documentation Apex> Database > QueryLocator", prod: false, isExternal: true}, + {label: "Class QueryLocatorIterator", link: `${apexref}/apex_class_database_querylocatoriterator.htm`, section: "Documentation Apex> Database > QueryLocatorIterator", prod: false, isExternal: true}, + {label: "Class SaveResult", link: `${apexref}/apex_methods_system_database_saveresult.htm`, section: "Documentation Apex> Database > SaveResult", prod: false, isExternal: true}, + {label: "Class UndeleteResult", link: `${apexref}/apex_methods_system_database_undeleteresult.htm`, section: "Documentation Apex> Database > UndeleteResult", prod: false, isExternal: true}, + {label: "Class UpsertResult", link: `${apexref}/apex_methods_system_database_upsertresult.htm`, section: "Documentation Apex> Database > UpsertResult", prod: false, isExternal: true}, + //System namespace classes doc links + {label: "Class AccessLevel", link: `${apexref}/apex_class_System_AccessLevel.htm`, section: "Documentation Apex> System > AccessLevel", prod: false, isExternal: true}, + {label: "Class Address", link: `${apexref}/apex_class_system_Address.htm`, section: "Documentation Apex> System > Address", prod: false, isExternal: true}, + {label: "Class Answers", link: `${apexref}/apex_classes_answers.htm`, section: "Documentation Apex> System > Answers", prod: false, isExternal: true}, + {label: "Class ApexPages", link: `${apexref}/apex_methods_system_apexpages.htm`, section: "Documentation Apex> System > ApexPages", prod: false, isExternal: true}, + {label: "Class Approval", link: `${apexref}/apex_methods_system_approval.htm`, section: "Documentation Apex> System > Approval", prod: false, isExternal: true}, + {label: "Class Assert", link: `${apexref}/apex_class_System_Assert.htm`, section: "Documentation Apex> System > Assert", prod: false, isExternal: true}, + {label: "Class AsyncInfo", link: `${apexref}/apex_class_System_AsyncInfo.htm`, section: "Documentation Apex> System > AsyncInfo", prod: false, isExternal: true}, + {label: "Class AsyncOptions", link: `${apexref}/apex_class_System_AsyncOptions.htm`, section: "Documentation Apex> System > AsyncOptions", prod: false, isExternal: true}, + {label: "Class Blob", link: `${apexref}/apex_methods_system_blob.htm`, section: "Documentation Apex> System > Blob", prod: false, isExternal: true}, + {label: "Class Boolean", link: `${apexref}/apex_methods_system_boolean.htm`, section: "Documentation Apex> System > Boolean", prod: false, isExternal: true}, + {label: "Class BusinessHours", link: `${apexref}/apex_classes_businesshours.htm`, section: "Documentation Apex> System > BusinessHours", prod: false, isExternal: true}, + {label: "Class Callable", link: `${apexref}/apex_interface_System_Callable.htm`, section: "Documentation Apex> System > Callable", prod: false, isExternal: true}, + {label: "Class Cases", link: `${apexref}/apex_System_Cases_methods.htm`, section: "Documentation Apex> System > Cases", prod: false, isExternal: true}, + {label: "Class Collator", link: `${apexref}/apex_class_System_Collator.htm`, section: "Documentation Apex> System > Collator", prod: false, isExternal: true}, + {label: "Class Comparable", link: `${apexref}/apex_comparable.htm`, section: "Documentation Apex> System > Comparable", prod: false, isExternal: true}, + {label: "Class Comparator", link: `${apexref}/apex_interface_System_Comparator.htm`, section: "Documentation Apex> System > Comparator", prod: false, isExternal: true}, + {label: "Class Continuation", link: `${apexref}/apex_class_System_Continuation.htm`, section: "Documentation Apex> System > Continuation", prod: false, isExternal: true}, + {label: "Class Cookie", link: `${apexref}/apex_classes_sites_cookie.htm`, section: "Documentation Apex> System > Cookie", prod: false, isExternal: true}, + {label: "Class Crypto", link: `${apexref}/apex_classes_restful_crypto.htm`, section: "Documentation Apex> System > Crypto", prod: false, isExternal: true}, + {label: "Class Custom Metadata Type", link: `${apexref}/apex_methods_system_custom_metadata_types.htm`, section: "Documentation Apex> System > Custom Metadata Type", prod: false, isExternal: true}, + {label: "Class Custom Settings", link: `${apexref}/apex_methods_system_custom_settings.htm`, section: "Documentation Apex> System > Custom Settings", prod: false, isExternal: true}, + {label: "Class Database", link: `${apexref}/apex_methods_system_database.htm`, section: "Documentation Apex> System > Database", prod: false, isExternal: true}, + {label: "Class Date", link: `${apexref}/apex_methods_system_date.htm`, section: "Documentation Apex> System > Date", prod: false, isExternal: true}, + {label: "Class Datetime", link: `${apexref}/apex_methods_system_datetime.htm`, section: "Documentation Apex> System > Datetime", prod: false, isExternal: true}, + {label: "Class Decimal", link: `${apexref}/apex_methods_system_decimal.htm`, section: "Documentation Apex> System > Decimal", prod: false, isExternal: true}, + {label: "Class Domain", link: `${apexref}/apex_class_System_Domain.htm`, section: "Documentation Apex> System > Domain", prod: false, isExternal: true}, + {label: "Class DomainCreator", link: `${apexref}/apex_class_System_DomainCreator.htm`, section: "Documentation Apex> System > DomainCreator", prod: false, isExternal: true}, + {label: "Class DomainParser", link: `${apexref}/apex_class_System_DomainParser.htm`, section: "Documentation Apex> System > DomainParser", prod: false, isExternal: true}, + {label: "Class Double", link: `${apexref}/apex_methods_system_double.htm`, section: "Documentation Apex> System > Double", prod: false, isExternal: true}, + {label: "Class EmailMessages", link: `${apexref}/apex_class_system_emailmessages.htm`, section: "Documentation Apex> System > EmailMessages", prod: false, isExternal: true}, + {label: "Class EncodingUtil", link: `${apexref}/apex_classes_restful_encodingUtil.htm`, section: "Documentation Apex> System > EncodingUtil", prod: false, isExternal: true}, + {label: "Class EventBus", link: `${apexref}/apex_class_System_eventbus.htm`, section: "Documentation Apex> System > EventBus", prod: false, isExternal: true}, + {label: "Class FlexQueue", link: `${apexref}/apex_class_System_FlexQueue.htm`, section: "Documentation Apex> System > FlexQueue", prod: false, isExternal: true}, + {label: "Class FeatureManagement", link: `${apexref}/apex_class_System_FeatureManagement.htm`, section: "Documentation Apex> System > FeatureManagement", prod: false, isExternal: true}, + {label: "Class Formula", link: `${apexref}/apex_class_System_Formula.htm`, section: "Documentation Apex> System > Formula", prod: false, isExternal: true}, + {label: "Class FormulaRecalcFieldError", link: `${apexref}/apex_class_System_FormulaRecalcFieldError.htm`, section: "Documentation Apex> System > FormulaRecalcFieldError", prod: false, isExternal: true}, + {label: "Class FormulaRecalcResult", link: `${apexref}/apex_class_System_FormulaRecalcResult.htm`, section: "Documentation Apex> System > FormulaRecalcResult", prod: false, isExternal: true}, + {label: "Class Http", link: `${apexref}/apex_classes_restful_http_http.htm`, section: "Documentation Apex> System > Http", prod: false, isExternal: true}, + {label: "Class HttpCalloutMock", link: `${apexref}/apex_interface_httpcalloutmock.htm`, section: "Documentation Apex> System > HttpCalloutMock", prod: false, isExternal: true}, + {label: "Class HttpRequest", link: `${apexref}/apex_classes_restful_http_httprequest.htm`, section: "Documentation Apex> System > HttpRequest", prod: false, isExternal: true}, + {label: "Class HttpResponse", link: `${apexref}/apex_classes_restful_http_httpresponse.htm`, section: "Documentation Apex> System > HttpResponse", prod: false, isExternal: true}, + {label: "Class Id", link: `${apexref}/apex_methods_system_id.htm`, section: "Documentation Apex> System > Id", prod: false, isExternal: true}, + {label: "Class Ideas", link: `${apexref}/apex_classes_ideas.htm`, section: "Documentation Apex> System > Ideas", prod: false, isExternal: true}, + {label: "Class InstallHandler", link: `${apexref}/apex_install_handler.htm`, section: "Documentation Apex> System > InstallHandler", prod: false, isExternal: true}, + {label: "Class Integer", link: `${apexref}/apex_methods_system_integer.htm`, section: "Documentation Apex> System > Integer", prod: false, isExternal: true}, + {label: "Class JSON", link: `${apexref}/apex_class_System_Json.htm`, section: "Documentation Apex> System > JSON", prod: false, isExternal: true}, + {label: "Class JSONGenerator", link: `${apexref}/apex_class_System_JsonGenerator.htm`, section: "Documentation Apex> System > JSONGenerator", prod: false, isExternal: true}, + {label: "Class JSONParser", link: `${apexref}/apex_class_System_JsonParser.htm`, section: "Documentation Apex> System > JSONParser", prod: false, isExternal: true}, + {label: "Class Label", link: `${apexref}/apex_class_System_Label.htm`, section: "Documentation Apex> System > Label", prod: false, isExternal: true}, + {label: "Class Limits", link: `${apexref}/apex_methods_system_limits.htm`, section: "Documentation Apex> System > Limits", prod: false, isExternal: true}, + {label: "Class List", link: `${apexref}/apex_methods_system_list.htm`, section: "Documentation Apex> System > List", prod: false, isExternal: true}, + {label: "Class Location", link: `${apexref}/apex_class_system_Location.htm`, section: "Documentation Apex> System > Location", prod: false, isExternal: true}, + {label: "Class Long", link: `${apexref}/apex_methods_system_long.htm`, section: "Documentation Apex> System > Long", prod: false, isExternal: true}, + {label: "Class Map", link: `${apexref}/apex_methods_system_map.htm`, section: "Documentation Apex> System > Map", prod: false, isExternal: true}, + {label: "Class Matcher", link: `${apexref}/apex_classes_pattern_and_matcher_matcher_methods.htm`, section: "Documentation Apex> System > Matcher", prod: false, isExternal: true}, + {label: "Class Math", link: `${apexref}/apex_methods_system_math.htm`, section: "Documentation Apex> System > Math", prod: false, isExternal: true}, + {label: "Class Messaging", link: `${apexref}/apex_classes_email_outbound_messaging.htm`, section: "Documentation Apex> System > Messaging", prod: false, isExternal: true}, + {label: "Class MultiStaticResourceCalloutMock", link: `${apexref}/apex_methods_system_multistaticresourcecalloutmock.htm`, section: "Documentation Apex> System > MultiStaticResourceCalloutMock", prod: false, isExternal: true}, + {label: "Class Network", link: `${apexref}/apex_classes_network.htm`, section: "Documentation Apex> System > Network", prod: false, isExternal: true}, + {label: "Class OrgLimit", link: `${apexref}/apex_class_System_OrgLimit.htm`, section: "Documentation Apex> System > OrgLimit", prod: false, isExternal: true}, + {label: "Class OrgLimits", link: `${apexref}/apex_class_System_OrgLimits.htm`, section: "Documentation Apex> System > OrgLimits", prod: false, isExternal: true}, + {label: "Class PageReference", link: `${apexref}/apex_system_pagereference.htm`, section: "Documentation Apex> System > PageReference", prod: false, isExternal: true}, + {label: "Class Packaging", link: `${apexref}/apex_class_system_Packaging.htm`, section: "Documentation Apex> System > Packaging", prod: false, isExternal: true}, + {label: "Class Pattern", link: `${apexref}/apex_classes_pattern_and_matcher_pattern_methods.htm`, section: "Documentation Apex> System > Pattern", prod: false, isExternal: true}, + {label: "Class Queueable", link: `${apexref}/apex_class_System_Queueable.htm`, section: "Documentation Apex> System > Queueable", prod: false, isExternal: true}, + {label: "Class QueueableContext", link: `${apexref}/apex_interface_system_queueablecontext.htm`, section: "Documentation Apex> System > QueueableContext", prod: false, isExternal: true}, + {label: "Class QueueableDuplicateSignature", link: `${apexref}/apex_class_System_QueueableDuplicateSignature.htm`, section: "Documentation Apex> System > QueueableDuplicateSignature", prod: false, isExternal: true}, + {label: "Class QuickAction", link: `${apexref}/apex_class_system_quickaction.htm`, section: "Documentation Apex> System > QuickAction", prod: false, isExternal: true}, + {label: "Class RemoteObjectController", link: `${apexref}/apex_class_system_remoteobjectcontroller.htm`, section: "Documentation Apex> System > RemoteObjectController", prod: false, isExternal: true}, + {label: "Class Request", link: `${apexref}/apex_class_System_Request.htm`, section: "Documentation Apex> System > Request", prod: false, isExternal: true}, + {label: "Class ResetPasswordResult", link: `${apexref}/apex_class_System_ResetPasswordResult.htm`, section: "Documentation Apex> System > ResetPasswordResult", prod: false, isExternal: true}, + {label: "Class RestContext", link: `${apexref}/apex_methods_system_restcontext.htm`, section: "Documentation Apex> System > RestContext", prod: false, isExternal: true}, + {label: "Class RestRequest", link: `${apexref}/apex_methods_system_restrequest.htm`, section: "Documentation Apex> System > RestRequest", prod: false, isExternal: true}, + {label: "Class RestResponse", link: `${apexref}/apex_methods_system_restresponse.htm`, section: "Documentation Apex> System > RestResponse", prod: false, isExternal: true}, + {label: "Class SandboxPostCopy", link: `${apexref}/apex_interface_System_SandboxPostCopy.htm`, section: "Documentation Apex> System > SandboxPostCopy", prod: false, isExternal: true}, + {label: "Class Schedulable", link: `${apexref}/apex_interface_system_schedulable.htm`, section: "Documentation Apex> System > Schedulable", prod: false, isExternal: true}, + {label: "Class SchedulableContext", link: `${apexref}/apex_interface_system_schedulablecontext.htm`, section: "Documentation Apex> System > SchedulableContext", prod: false, isExternal: true}, + {label: "Class Schema", link: `${apexref}/apex_methods_system_schema.htm`, section: "Documentation Apex> System > Schema", prod: false, isExternal: true}, + {label: "Class Search", link: `${apexref}/apex_methods_system_search.htm`, section: "Documentation Apex> System > Search", prod: false, isExternal: true}, + {label: "Class Security", link: `${apexref}/apex_class_System_Security.htm`, section: "Documentation Apex> System > Security", prod: false, isExternal: true}, + {label: "Class SelectOption", link: `${apexref}/apex_pages_selectoption.htm`, section: "Documentation Apex> System > SelectOption", prod: false, isExternal: true}, + {label: "Class Set", link: `${apexref}/apex_methods_system_set.htm`, section: "Documentation Apex> System > Set", prod: false, isExternal: true}, + {label: "Class Site", link: `${apexref}/apex_classes_sites.htm`, section: "Documentation Apex> System > Site", prod: false, isExternal: true}, + {label: "Class SObject", link: `${apexref}/apex_methods_system_sobject.htm`, section: "Documentation Apex> System > SObject", prod: false, isExternal: true}, + {label: "Class SObjectAccessDecision", link: `${apexref}/apex_class_System_SObjectAccessDecision.htm`, section: "Documentation Apex> System > SObjectAccessDecision", prod: false, isExternal: true}, + {label: "Class StaticResourceCalloutMock", link: `${apexref}/apex_methods_system_staticresourcecalloutmock.htm`, section: "Documentation Apex> System > StaticResourceCalloutMock", prod: false, isExternal: true}, + {label: "Class String", link: `${apexref}/apex_methods_system_string.htm`, section: "Documentation Apex> System > String", prod: false, isExternal: true}, + {label: "Class StubProvider", link: `${apexref}/apex_interface_System_StubProvider.htm`, section: "Documentation Apex> System > StubProvider", prod: false, isExternal: true}, + {label: "Class System", link: `${apexref}/apex_methods_system_system.htm`, section: "Documentation Apex> System > System", prod: false, isExternal: true}, + {label: "Class Test", link: `${apexref}/apex_methods_system_test.htm`, section: "Documentation Apex> System > Test", prod: false, isExternal: true}, + {label: "Class Time", link: `${apexref}/apex_methods_system_time.htm`, section: "Documentation Apex> System > Time", prod: false, isExternal: true}, + {label: "Class TimeZone", link: `${apexref}/apex_methods_system_timezone.htm`, section: "Documentation Apex> System > TimeZone", prod: false, isExternal: true}, + {label: "Class Type", link: `${apexref}/apex_methods_system_type.htm`, section: "Documentation Apex> System > Type", prod: false, isExternal: true}, + {label: "Class UninstallHandler", link: `${apexref}/apex_uninstall_handler.htm`, section: "Documentation Apex> System > UninstallHandler", prod: false, isExternal: true}, + {label: "Class URL", link: `${apexref}/apex_methods_system_url.htm`, section: "Documentation Apex> System > URL", prod: false, isExternal: true}, + {label: "Class UserInfo", link: `${apexref}/apex_methods_system_userinfo.htm`, section: "Documentation Apex> System > UserInfo", prod: false, isExternal: true}, + {label: "Class UserManagement", link: `${apexref}/apex_class_System_UserManagement.htm`, section: "Documentation Apex> System > UserManagement", prod: false, isExternal: true}, + {label: "Class Version", link: `${apexref}/apex_methods_system_version.htm`, section: "Documentation Apex> System > Version", prod: false, isExternal: true}, + {label: "Class WebServiceCallout", link: `${apexref}/apex_class_System_WebServiceCallout.htm`, section: "Documentation Apex> System > WebServiceCallout", prod: false, isExternal: true}, + {label: "Class WebServiceMock", link: `${apexref}/apex_interface_webservicemock.htm`, section: "Documentation Apex> System > WebServiceMock", prod: false, isExternal: true}, + {label: "Class XmlStreamReader", link: `${apexref}/apex_classes_xml_XmlStream_reader.htm`, section: "Documentation Apex> System > XmlStreamReader", prod: false, isExternal: true}, + {label: "Class XmlStreamWriter", link: `${apexref}/apex_classes_xml_XmlStream_writer.htm`, section: "Documentation Apex> System > XmlStreamWriter", prod: false, isExternal: true}, + {label: "Class Boolean", link: "", section: "Documentation Apex> System > String", prod: false, isExternal: true} +]; diff --git a/addon/manifest-template.json b/addon/manifest-template.json index b09f8318f..c1ba8f82b 100644 --- a/addon/manifest-template.json +++ b/addon/manifest-template.json @@ -54,6 +54,7 @@ ], "all_frames": true, "css": [ + "inspector.css", "button.css", "inspect-inline.css" ], @@ -64,8 +65,7 @@ } ], "background": { - "service_worker": "background.js", - "type": "module" + "scripts": ["background.js"] }, "web_accessible_resources": [ { @@ -146,4 +146,4 @@ "description": "Event Monitor" } } -} \ No newline at end of file +} diff --git a/addon/metadata-retrieve.css b/addon/metadata-retrieve.css index 979747c8a..297fd9c69 100644 --- a/addon/metadata-retrieve.css +++ b/addon/metadata-retrieve.css @@ -8,13 +8,13 @@ body { } .sf-link { margin-right: 1em; - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 2em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } .sf-link svg { @@ -24,21 +24,21 @@ body { margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } .log-error { - color: red; + color: var(--inspector-error); font-weight: bold; } .log-working { - color: purple; + color: var(--inspector-working); font-weight: bold; } .object-bar { position: fixed; - background-color: rgba(255, 255, 255, 0.9); + background-color: var(--inspector-shade); width: 100%; padding: 8px; box-sizing: border-box; @@ -47,35 +47,47 @@ body { z-index: 1; align-items: center; } +.object-bar > a:last-child { + color: var(--inspector-link); +} .progress { margin: 0 .3rem; display: inline-block; - background-color: #f88; + background-color: var(--inspector-background); padding: 8px 12px; border-radius: 3px; + cursor: default; } .progress-ready { - background-color: #bbb; + background-color: var(--inspector-neutral); } @keyframes working { 50% { - background-color: #ccf; + background-color: var(--inspector-accent)/*#ccf;*/ } } .progress-working { - background-color: #88f; + background-color: var(--inspector-primary);/*#88f;*/ animation: working 1s cubic-bezier(.5, .4, .5, .6) infinite; + color: var(--inspector-text) } .progress-done { - background-color: #8f8; + background-color: var(--inspector-success);/*#8f8;*/ } .button { margin: 0 .3rem; display: inline-block; - border: 1px solid #ddd; - padding: 6px 10px; + border: 1px solid var(--inspector-button-border); + padding: 8px 12px; border-radius: 3px; font: unset; + color: var(--inspector-middle); + background-color: var(--inspector-background); + cursor: pointer; +} +.button:hover { + background-color: var(--inspector-shade); + color: var(--inspector-text); } .body { padding: 4.3em 8px 8px; @@ -87,3 +99,47 @@ label { display: inline-block; margin: 2px 5px; } + +.highlighted { + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); +} +.highlighted:hover { + background-color: var(--inspector-accent); + color: var(--inspector-white); +} +.highlighted:disabled { + background-color: var(--inspector-subtle-neutral) !important; + border-color: var(--inspector-subtle-neutral); + color: var(--inspector-inverted-text) !important; +} +input[type="checkbox"] { + accent-color: var(--inspector-primary); +} + +/* transitions */ +div.body > div > p { + transition-property: color; + transition-duration: 500ms; + transition-timing-function: ease-in-out; +} + +html { + transition-duration: 500ms; + transition-timing-function: ease-in-out; + scrollbar-color: var(--inspector-neutral) var(--inspector-shade); + background-color: var(--inspector-background); +} + +div:is(.log-info, .log-working) { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +span.progress { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/metadata-retrieve.html b/addon/metadata-retrieve.html index 2bfac9b5e..4e69c3b24 100644 --- a/addon/metadata-retrieve.html +++ b/addon/metadata-retrieve.html @@ -3,8 +3,10 @@ ... + +
@@ -13,4 +15,4 @@ - \ No newline at end of file + diff --git a/addon/metadata-retrieve.js b/addon/metadata-retrieve.js index 2c7f61ee2..fad3698cd 100644 --- a/addon/metadata-retrieve.js +++ b/addon/metadata-retrieve.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; /* global initButton */ class Model { @@ -243,6 +243,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.onStartClick = this.onStartClick.bind(this); this.onSelectAllChange = this.onSelectAllChange.bind(this); } @@ -258,6 +259,7 @@ class App extends React.Component { let {model} = this.props; model.startDownloading(); } + render() { let {model} = this.props; document.title = model.title(); @@ -291,7 +293,7 @@ class App extends React.Component { h("br", {}), model.metadataObjects.map(metadataObject => h(ObjectSelector, {key: metadataObject.xmlName, metadataObject, model})), h("p", {}, "Select what to download above, and then click the button below. If downloading fails, try unchecking some of the boxes."), - h("button", {onClick: this.onStartClick}, "Download metadata") + h("span", {onClick: this.onStartClick, className: "button highlighted"}, "Download metadata") ) : h("div", {}, model.logMessages.map(({level, text}, index) => h("div", {key: index, className: "log-" + level}, text))) ) diff --git a/addon/options.css b/addon/options.css index c569aac5a..99dd2f06f 100644 --- a/addon/options.css +++ b/addon/options.css @@ -45,7 +45,7 @@ body { margin: 0; height: 100%; display: flex; - background-color: #B0C4DF !important; + background-color: var(--inspector-sand-background) !important; background-image: url(images/lightning_blue_background.png) !important; background-repeat: no-repeat !important; background-size: contain !important; @@ -67,7 +67,7 @@ body { } #user-info { - background: #f7f9fb; + background: var(--inspector-background); min-height: 48px; display: flex; align-items: center; @@ -84,13 +84,13 @@ body { } .sf-link { - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } @@ -101,9 +101,9 @@ body { margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } .flex-right { @@ -132,20 +132,20 @@ body { } .options-tab-container { - background-color: #f7f9fb; + background-color: var(--inspector-shade); } .main-container { - background-color: #F8F8F8; + background-color: var(--inspector-background); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-neutral); margin: 12px 12px 0 12px; flex-grow: 1; } .prod { - background-color: #e0a4b5 !important; + background-color: var(--inspector-prod-background) !important; background-image: url(images/lightning_red_background.png) !important; background-repeat: no-repeat !important; background-size: contain !important; @@ -162,13 +162,13 @@ body { } button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-shade); height: 32px; display: inline-block; text-decoration: none; background-color: white; padding: 0 16px; - color: #0070d2; + color: var(--inspector-primary); cursor: pointer; outline: none; position: relative; @@ -180,24 +180,80 @@ button, button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-middle); } .button-brand { - background-color: #0070d2; - border-color: #0070d2; - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-inverted-text); } .button-brand:focus:not([disabled]), .button-brand:hover:not([disabled]) { - background-color: #005fb2; - border-color: #005fb2; - color: #fff; + background-color: var(--inspector-middle); + border-color: var(--inspector-middle); + color: var(--inspector-inverted-text); } .button-brand:active:not([disabled]) { - background-color: #005fb2; - border-color: #005fb2; - color: #fff; + background-color: var(--inspector-middle); + border-color: var(--inspector-middle); + color: var(--inspector-inverted-text); +} + +.slds-col.slds-size_2-of-12.slds-form-element.slds-grid.slds-grid_align-end.slds-grid_vertical-align-center.slds-gutters_small > .slds-form-element__control.slds-col.slds-size_2-of-12:has(button.change-value) { + display: flex; + flex-direction: row; + align-items: center; + + & > button.change-value { + width: 3rem; + height: 2rem; + padding: 0; + border-width: 1px; + border-radius: 3px; + + color: var(--inspector-text); + background-color: var(--inspector-background); + border-color: var(--inspector-subtle-neutral); + } +} + +/* transitions */ +a.slds-tabs_default__link { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +span.slds-checkbox_faux { + transition-property: background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + &:before, &:after { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } + +} + +div.slds-show div.slds-border_bottom { + transition-property: background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +div.slds-tabs_default > ul.options-tab-container > li:after { + transition-property: background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +#root > div > div:last-child > div:is(.slds-size_2-of-12, .slds-size_1-of-12) > a > svg > use { + transition-property: color, fill; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); } \ No newline at end of file diff --git a/addon/options.html b/addon/options.html index 76aec4c30..7210a0051 100644 --- a/addon/options.html +++ b/addon/options.html @@ -3,9 +3,12 @@ Salesforce Inspector Options + + +
@@ -14,4 +17,4 @@ - \ No newline at end of file + diff --git a/addon/options.js b/addon/options.js index b1fff10d5..8acbcdd6d 100644 --- a/addon/options.js +++ b/addon/options.js @@ -1,5 +1,6 @@ /* global React ReactDOM */ -import {sfConn, apiVersion, defaultApiVersion, nullToEmptyString} from "./inspector.js"; +import {sfConn, apiVersion, defaultApiVersion, nullToEmptyString, alignDynamicAppearanceButton, systemColorSchemeListener} from "./inspector.js"; +systemColorSchemeListener(window.localStorage.getItem("enableDynamicAppearance") === "true"); /* global initButton */ import {DescribeInfo} from "./data-load.js"; import Toast from "./components/Toast.js"; @@ -73,7 +74,7 @@ class OptionsTabSelector extends React.Component { this.state = { selectedTabId: initialTabId }; - + const navigatorData = (navigator.userAgentData?.platform || navigator.userAgent).toLowerCase(); this.tabs = [ { id: 1, @@ -176,6 +177,16 @@ class OptionsTabSelector extends React.Component { content: [ {option: enableLogsOption, props: {key: 1}} ] + }, + { + id: 7, + tabTitle: "Tab7", + title: "User Interface", + content: [ + window.matchMedia != null ? {option: Option, props: {type: "toggle", title: `Match Theme to ${navigatorData.indexOf("mac") > -1 ? "MacOS" : (navigatorData.indexOf("windows") > -1 ? "Windows" : (navigatorData.indexOf("linux") > -1 ? "Linux" : "System"))} Appearance`, storageKey: "enableDynamicAppearance", default: false}} : {option: "span"}, + {option: Option, props: {type: "toggle", title: "Enable Dark Mode", storageKey: "enableDarkMode", default: false}}, + {option: Option, props: {type: "toggle", title: "Enable Accent colors", storageKey: "enableAccentColors", default: false}}, + ] } ]; this.onTabSelect = this.onTabSelect.bind(this); @@ -297,6 +308,8 @@ class APIVersionOption extends React.Component { super(props); this.onChangeApiVersion = this.onChangeApiVersion.bind(this); this.onRestoreDefaultApiVersion = this.onRestoreDefaultApiVersion.bind(this); + //this.clickDecrease = this.clickDecrease.bind(this); + //this.clickIncrease = this.clickIncrease.bind(this); this.state = {apiVersion: localStorage.getItem("apiVersion") ? localStorage.getItem("apiVersion") : apiVersion}; } @@ -305,24 +318,44 @@ class APIVersionOption extends React.Component { this.setState({apiVersion}); localStorage.setItem("apiVersion", apiVersion + ".0"); } - + onRestoreDefaultApiVersion(){ localStorage.removeItem("apiVersion"); this.setState({apiVersion: defaultApiVersion}); } + /*changeValue(e, shouldIncrease = false) { + const inputTarget = document.getElementById(e.target.dataset.targetid); + const oldValue = +inputTarget.value; + if((""+oldValue) == "NaN") + return; + inputTarget.value = shouldIncrease ? oldValue + 1 : oldValue - 1; + // trigger the onChange listener + const event = new Event('input', { bubbles: true }); + inputTarget.dispatchEvent(event); + } + + clickDecrease(e) { + this.changeValue(e, false); + } + clickIncrease(e) { + this.changeValue(e, true); + }*/ render() { return h("div", {className: "slds-grid slds-border_bottom slds-p-horizontal_small slds-p-vertical_xx-small"}, h("div", {className: "slds-col slds-size_4-of-12 text-align-middle"}, h("span", {}, "API Version") ), - h("div", {className: "slds-col slds-size_5-of-12 slds-form-element slds-grid slds-grid_align-end slds-grid_vertical-align-center slds-gutters_small"}), - h("div", {className: "slds-col slds-size_3-of-12 slds-form-element slds-grid slds-grid_align-end slds-grid_vertical-align-center slds-gutters_small"}, + h("div", {className: "slds-col slds-size_6-of-12 slds-form-element slds-grid slds-grid_align-end slds-grid_vertical-align-center slds-gutters_small"}), + h("div", {className: "slds-col slds-size_2-of-12 slds-form-element slds-grid slds-grid_align-end slds-grid_vertical-align-center slds-gutters_small"}, this.state.apiVersion != defaultApiVersion ? h("div", {className: "slds-form-element__control"}, h("button", {className: "button button-brand", onClick: this.onRestoreDefaultApiVersion, title: "Restore Extension's default version"}, "Restore Default") ) : null, h("div", {className: "slds-form-element__control slds-col slds-size_2-of-12"}, - h("input", {type: "number", required: true, className: "slds-input", value: nullToEmptyString(this.state.apiVersion.split(".0")[0]), onChange: this.onChangeApiVersion}), + /*h("button", {className: "change-value decreaser", title: "Decrease the value by 1", onClick: this.clickDecrease, "data-targetid": "apiVersionInput"}, "-"), + h("input", {type: "text", required: true, id: "apiVersionInput", className: "slds-input", value: nullToEmptyString(this.state.apiVersion.split(".0")[0]), onChange: this.onChangeApiVersion}), + h("button", {className: "change-value increaser", title: "Increase the value by 1", onClick: this.clickIncrease, "data-targetid": "apiVersionInput"}, "+"),*/ + h("input", {type: "number", required: true, id: "apiVersionInput", className: "slds-input", value: nullToEmptyString(this.state.apiVersion.split(".0")[0]), onChange: this.onChangeApiVersion}), ) ) ); @@ -422,12 +455,37 @@ class Option extends React.Component { : this.type == "select" ? (value || props.default || props.options?.[0]?.value) : value}; this.title = props.title; + this.systemThemeListener = null; + } + + // change Theme or Accent + updateUI(key, enabled){ + const updateUIkeys = ["enableDarkMode", "enableAccentColors", "enableDynamicAppearance"]; + if (!updateUIkeys.includes(key)) { + return; + } + + if (key === "enableDynamicAppearance"){ + // add or remove listener to the system's color-scheme + systemColorSchemeListener(enabled); + return; + } + + const isThemeKey = key === "enableDarkMode"; + + const category = isThemeKey ? "theme" : "accent"; + const value = isThemeKey ? (enabled ? "dark" : "light") : (enabled ? "accent" : "default"); + const html = document.documentElement; + html.dataset[category] = value; + + alignDynamicAppearanceButton(isThemeKey); } onChangeToggle(e) { const enabled = e.target.checked; this.setState({[this.key]: enabled}); localStorage.setItem(this.key, JSON.stringify(enabled)); + this.updateUI(this.key, enabled); } onChange(e) { diff --git a/addon/popup.css b/addon/popup.css index 7b63fdbdc..2fc02ac25 100644 --- a/addon/popup.css +++ b/addon/popup.css @@ -45,7 +45,7 @@ html, body { white-space: normal; font-family: "Salesforce Sans", Arial, Helvetica, sans-serif; - background-color: white; + background-color: var(--inspector-background); margin: 0; } @@ -66,7 +66,7 @@ body, } a:visited { - color: #0176d3; + color: var(--inspector-visited-link); } a > span { color: #0176d3; @@ -77,20 +77,14 @@ a > span { overflow-y: scroll; } -.header-light{ - background: #f3f3f3; - color: #061c3f; -} -.header-light svg { - fill : #061c3f; -} - -.header-dark{ - background: #061c3f; - color: #f3f3f3; -} -.header-dark svg { - fill :#f3f3f3; +.header-logo { + background: var(--inspector-svg-background); + padding: 2px 1em 2px 2px; + color: var(--inspector-svg-text); + display: flex; + align-items: center; + margin: 0 auto; + border-radius: 3px; } button, @@ -103,6 +97,7 @@ input.api-input { font-size: inherit; border: none; background: transparent; + color: var(--inspector-text-neutral); } .page-button { @@ -113,11 +108,10 @@ input.api-input { font-size: .9em; font-family: inherit; width: 100%; - background-color: white; - color: #16325c; - border: 1px solid #d8dde6; + background-color: var(--inspector-background); + color: var(--inspector-text); + border: 1px solid var(--inspector-button-border); border-radius: 0 .25rem .25rem .25rem; - transition: border .1s linear, background-color .1s linear; display: inline-block; padding: 0 2rem 0 .25rem; line-height: 1.875rem; @@ -128,9 +122,9 @@ input.api-input { .all-data-input:active, .all-data-input:focus { outline: 0; - border-color: #1589ee; - background-color: #fff; - box-shadow: 0 0 3px #0070D2; + border-color: var(--inspector-button-active-border); + background-color: var(--inspector-background); + box-shadow: 0 0 3px var(--inspector-button-active-border); } .all-data-box-inner { @@ -139,7 +133,7 @@ input.api-input { flex-direction: column; min-height: 12em; /* should be heigh enough so the buttons below don't jump around when the contents of this box loads */ - color: #54698d; + color: var(--inspector-text-neutral); line-height: 1.5; } @@ -165,7 +159,7 @@ input.api-input { right: 1rem; top: 50%; margin-top: -.375rem; - fill: #54698d; + fill: var(--inspector-neutral); } .autocomplete-container { @@ -173,10 +167,10 @@ input.api-input { } .autocomplete { - border: 1px solid #d8dde6; + border: 1px solid var(--inspector-neutral); border-radius: .25rem; padding: .25rem 0; - background-color: white; + background-color: var(--inspector-background); max-height: 260px; position: absolute; width: 100%; @@ -188,7 +182,7 @@ input.api-input { .autocomplete-item { display: block; padding: .25rem .5rem; - color: #16325c; + color: var(--inspector-text); line-height: 1.5; cursor: pointer; } @@ -203,23 +197,24 @@ input.api-input { .autocomplete-item-sub { font-size: .75rem; - color: #54698d; + color: var(--inspector-text-neutral); margin-top: -.25rem; } .autocomplete-item mark { font-weight: 700; background-color: transparent; + color: var(--inspector-text); } .autocomplete-item.selected { - background-color: #f4f6f9; + background-color: var(--inspector-shade); } @keyframes bg-load { 50% { - background-color: #EEF6F1; - color: #006B2D; + background-color: var(--inspector-background); + color: var(--inspector-success-background); } } @@ -278,8 +273,8 @@ ul.small-tabs { ul.small-tabs li { display: inline; - border: solid 1px #d8dde6; - color: #0070d2; + border: solid 1px var(--inspector-button-border); + color: var(--inspector-link); padding: 2px 6px; font-style: italic; cursor: pointer; @@ -291,20 +286,20 @@ ul.small-tabs li:first-child { } ul.small-tabs li.active { - /*background-color: #d8dde6;*/ + /*background-color: var(--inspector-background);*/ font-style: normal; font-weight: bold; - color: rgb(112, 110, 107); + color: var(--inspector-text-neutral); padding-top: 6px; border-radius: 3px; } ul.small-tabs li:hover { - background-color: #f4f6f9; + background-color: var(--inspector-background); } .inactive { - color: #c0c0c0 + color: var(--inspector-text-neutral); } .small-font { @@ -330,7 +325,7 @@ ul.small-tabs li:hover { } .hide { - display: none; + display: none !important; } .mask { @@ -340,14 +335,17 @@ ul.small-tabs li:hover { a.icon { display: inline-block; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 0.95rem; - background-color: #706E6B; + mask-size: 0.95rem; + background-color: var(--inspector-neutral); width: 16px; height: 16px; } a.icon-url { -webkit-mask-image: url(images/link.svg); + mask-image: url(images/link.svg); } .pointer { cursor: pointer; @@ -365,6 +363,8 @@ a.icon { min-width:0; font-size: .95rem; padding-top: .4rem; + color: var(--inspector-text, #061c3f); + margin-top:0.25rem; } .popup-header__title { font-weight: 600; @@ -379,13 +379,15 @@ a.icon { border: 0 !important; border-radius: 0 !important; } -.popup-header__name-title, -.popup-header__name-title{ - margin-top:0.25rem; -} + .popup-header__icon{ width:1.75rem; height:1.75rem; + border-radius: 4px; + color: var(--inspector-text); + line-height: 1; + fill: var(--inspector-text); + vertical-align: middle; } .popup-icon_container, @@ -393,4 +395,104 @@ a.icon { display:inline-block; line-height:1; background-color:var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, transparent)); -} \ No newline at end of file +} + +.popup-footer-icon { + background-color: unset; + border: none; + + & > use { + fill: var(--inspector-text-neutral); + } +} + +.slds-col.slds-size_5-of-12.footer-small-text.slds-m-top_xx-small:has(button.change-value) { + display: flex; + flex-direction: row; + align-items: center; + + & > button.change-value { + width: 1rem; + height: 70%; + padding: 0; + border-width: 1px; + border-radius: 3px; + + color: var(--inspector-text); + background-color: var(--inspector-background); + border-color: var(--inspector-neutral); + } +} + + +/* transitions */ +a.slds-button { + &:has(> span) { + transition-property: background-color, border-color; + } + + &:not(:has(> span)) { + transition-property: color, background-color; + } + + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +a.autocomplete-item { + transition-property: color; + transition-duration: var(--inspector-transition-time-fast); + transition-timing-function: var(--inspector-transition-function); + + & span > mark { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} + +input.all-data-input { + transition-property: color, background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +#mainTabs { + transition-property: scrollbar-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + + & > div, + & ul.small-tabs > li { + transition-property: background-color, border-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); + } +} + +div.all-data-box-data > table :is(th, td > *), +div:is(.center, .all-data-box-inner.empty), +#root > div > div:last-child > div.slds-size_5-of-12 > :is(a, span, input) { + transition-property: color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +.popup-header__icon { + transition-property: fill, background-color; + transition-duration: inherit; + transition-timing-function: inherit; +} + +div.all-data-box-data > table { + transition-property: color, background-color; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} + +#root > div > div:last-child > div:is(.slds-size_2-of-12, .slds-size_1-of-12) > a > svg > use, +svg.slds-icon { + transition-property: color, fill; + transition-duration: var(--inspector-transition-time-slow); + transition-timing-function: var(--inspector-transition-function); +} diff --git a/addon/popup.html b/addon/popup.html index 0658861de..0dbe9fde2 100644 --- a/addon/popup.html +++ b/addon/popup.html @@ -2,9 +2,12 @@ + + + @@ -12,4 +15,4 @@
- \ No newline at end of file + diff --git a/addon/popup.js b/addon/popup.js index c6f637198..80ff38a3f 100644 --- a/addon/popup.js +++ b/addon/popup.js @@ -1,7 +1,7 @@ /* global React ReactDOM */ -import {sfConn, apiVersion, sessionError, getLinkTarget} from "./inspector.js"; +import {sfConn, apiVersion, sessionError, getLinkTarget, setupColorListeners, systemColorSchemeListener} from "./inspector.js"; import {getAllFieldSetupLinks} from "./setup-links.js"; -import {setupLinks} from "./links.js"; +import {setupLinks} from "./links.mjs"; let h = React.createElement; if (typeof browser === "undefined") { @@ -109,6 +109,10 @@ class App extends React.PureComponent { latestNotesViewed: localStorage.getItem("latestReleaseNotesVersionViewed") === this.props.addonVersion || browser.extension.inIncognitoContext, hideButtonsOption: JSON.parse(localStorage.getItem("hideButtonsOption")) }; + setupColorListeners(true); + const isSystemThemeEnabled = window.localStorage.getItem("enableDynamicAppearance") === "true"; + systemColorSchemeListener(isSystemThemeEnabled); + this.onContextUrlMessage = this.onContextUrlMessage.bind(this); this.onShortcutKey = this.onShortcutKey.bind(this); this.onChangeApi = this.onChangeApi.bind(this); @@ -412,15 +416,15 @@ class App extends React.PureComponent { ), h("div", {className: "slds-col slds-size_1-of-12 slds-text-align_right slds-icon_container", title: "Documentation"}, h("a", {href: "https://tprouvot.github.io/Salesforce-Inspector-reloaded/", target: linkTarget}, - h("svg", {className: "slds-button slds-icon_x-small slds-icon-text-default slds-m-top_xxx-small", viewBox: "0 0 52 52"}, - h("use", {xlinkHref: "symbols.svg#info_alt", style: {fill: "#9c9c9c"}}) + h("svg", {className: "slds-button slds-icon_x-small slds-icon-text-default slds-m-top_xxx-small popup-footer-icon", viewBox: "0 0 52 52"}, + h("use", {xlinkHref: "symbols.svg#info_alt"}), ) ) ), h("div", {id: "optionsBtn", className: "slds-col slds-size_1-of-12 slds-text-align_right slds-icon_container slds-m-right_small", title: "Options"}, h("a", {ref: "optionsBtn", href: "options.html?" + hostArg, target: linkTarget}, - h("svg", {className: "slds-button slds-icon_x-small slds-icon-text-default slds-m-top_xxx-small", viewBox: "0 0 52 52"}, - h("use", {xlinkHref: "symbols.svg#settings", style: {fill: "#9c9c9c"}}) + h("svg", {className: "slds-button slds-icon_x-small slds-icon-text-default slds-m-top_xxx-small popup-footer-icon", viewBox: "0 0 52 52"}, + h("use", {xlinkHref: "symbols.svg#settings"}) ) ) ) @@ -652,7 +656,7 @@ class AllDataBox extends React.PureComponent { h("li", {ref: "objectTab", onClick: this.onAspectClick, "data-aspect": this.SearchAspectTypes.sobject, className: (activeSearchAspect == this.SearchAspectTypes.sobject) ? "active" : ""}, h("span", {}, h("u", {}, "O"), "bjects")), h("li", {ref: "userTab", onClick: this.onAspectClick, "data-aspect": this.SearchAspectTypes.users, className: (activeSearchAspect == this.SearchAspectTypes.users) ? "active" : ""}, h("span", {}, h("u", {}, "U"), "sers")), h("li", {ref: "shortcutTab", onClick: this.onAspectClick, "data-aspect": this.SearchAspectTypes.shortcuts, className: (activeSearchAspect == this.SearchAspectTypes.shortcuts) ? "active" : ""}, h("span", {}, h("u", {}, "S"), "hortcuts")), - h("li", {ref: "orgTab", onClick: this.onAspectClick, "data-aspect": this.SearchAspectTypes.org, className: (activeSearchAspect == this.SearchAspectTypes.org) ? "active" : ""}, h("span", {}, "O", h("u", {}, "r"), "g")) + h("li", {ref: "orgTab", onClick: this.onAspectClick, "data-aspect": this.SearchAspectTypes.org, className: (activeSearchAspect == this.SearchAspectTypes.org) ? "active" : ""}, h("span", {}, "O", h("u", {}, "r"), "g")), ), (activeSearchAspect == this.SearchAspectTypes.sobject) ? h(AllDataBoxSObject, {ref: "showAllDataBoxSObject", sfHost, showDetailsSupported, sobjectsList, sobjectsLoading, contextRecordId, contextSobject, linkTarget, onContextRecordChange, isFieldsPresent, eventMonitorHref}) diff --git a/addon/rest-explore.css b/addon/rest-explore.css index e9d7f27b7..60b544827 100644 --- a/addon/rest-explore.css +++ b/addon/rest-explore.css @@ -47,7 +47,7 @@ body, [data-reactroot] { height: 100%; line-height: 1.5; - color: #16325c; + color: var(--inspector-text); } [data-reactroot] { @@ -60,7 +60,7 @@ body { font-size: .8125rem; overflow: hidden; margin: 0; - background-color: #B0C4DF; + background-color: var(--inspector-sand-background); background-image: url(images/lightning_blue_background.png); background-repeat: no-repeat; background-size: contain; @@ -68,7 +68,7 @@ body { } #user-info { - background: #f7f9fb; + background: var(--inspector-background); height: 48px; display: flex; align-items: center; @@ -85,28 +85,26 @@ body { } .sf-link { - background-color: rgb(6, 28, 63); + background-color: var(--inspector-svg-background); border-radius: 3px; line-height: 1.8em; text-decoration: none; display: inline-block; padding: 2px; - color: white; + color: var(--inspector-svg-text); padding-right: 1em; } .sf-link svg { - width: 1.8em; - ; - height: 1.8em; - ; + width: 1.8em;; + height: 1.8em;; display: block; margin-left: 1px; margin-right: 1em; float: left; - background-color: #ef7ead; + background-color: var(--inspector-svg-picture); border-radius: 2px; - fill: white; + fill: var(--inspector-svg-text); } textarea { @@ -117,7 +115,9 @@ textarea { font-size: 0.9rem; padding: 8px 10px; border-radius: 0.25rem; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); + color: var(--inspector-text); + background-color: var(--inspector-background); } textarea[hidden] { @@ -125,8 +125,8 @@ textarea[hidden] { } .help-text { - background: #fff; - border: 1px solid #DDDBDA; + background: var(--inspector-background); + border: 1px solid var(--inspector-subtle-neutral); padding: 0 15px; border-radius: 0.25rem; margin-top: 10px; @@ -155,7 +155,7 @@ textarea[hidden] { .result-info { font-style: italic; margin-left: 9px; - color: #8c8c8c; + color: var(--inspector-neutral); } #result-text { @@ -167,15 +167,15 @@ textarea[hidden] { #result-table { overflow: auto; flex: 1 1 0; - background-color: #fff; - border-top: 1px solid #DDDBDA; + background-color: var(--inspector-background); + border-top: 1px solid var(--inspector-subtle-neutral); } .area { - background-color: #F8F8F8; + background-color: var(--inspector-shade); padding: 8px 12px; border-radius: 5px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); margin: 12px 12px 0 12px; } #result-area.area{ @@ -185,7 +185,7 @@ textarea[hidden] { h1 { font-size: 1rem; display: inline; - color: #080707; + color: var(--inspector-text); font-weight: 700; line-height: 1.25; margin: revert; @@ -231,15 +231,50 @@ h1 { select, input[type=search], -input[type=save], input[type=default] { width: 8.5rem; font-family: inherit; padding: 5px 13px; - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); height: 32px; position: relative; border-radius: 0.25rem; + background-color: var(--inspector-background); + color: var(--inspector-text); + +} + +#save-wrapper { + border: 1px solid var(--inspector-subtle-neutral); + background-color: var(--inspector-background); + padding: 5px 13px; + width: 8.5rem; + display: inline-block; + overflow: hidden; + + &:has(:active, :focus) { + border: 1px solid var(--inspector-primary); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; + outline: none; + z-index: 1; + } + + & > svg { + width: 1rem; + fill: var(--inspector-text); + } + + & > input { + color: var(--inspector-text); + background-color: transparent; + border: none; + padding-left: 15px; + + &:active, &:focus { + border: none; + box-shadow: none; + } + } } input[type=search] { @@ -251,7 +286,7 @@ input[type=search] { } input[type=save] { - background-image: url(images/save.svg); + /*background-image: url(images/save.svg); this is already an svg near this input*/ background-repeat: no-repeat; background-size: 1rem; background-position: 10px 7px; @@ -275,8 +310,8 @@ input:active, input:focus, select:active, select:focus { - border: 1px solid rgb(21, 137, 238); - box-shadow: rgb(6, 28, 63) 0px 0px 3px 0px; + border: 1px solid var(--inspector-accent); + box-shadow: var(--inspector-accent) 0px 0px 3px 0px; outline: none; z-index: 1; } @@ -288,48 +323,43 @@ select:focus { .button-group select:focus:not(:first-child), .button-group select:focus:not(:first-child) { margin-left: -1px; - border: 1px solid rgb(21, 137, 238); + border: 1px solid var(--inspector-primary); } button:active, button:focus { - background-color: rgb(238, 241, 246); - color: #005fb2; + background-color: var(--inspector-background); + color: var(--inspector-middle); } button:disabled, input:disabled { - color: #dddbda; + color: var(--inspector-subtle-neutral); cursor: default; } button:disabled:hover, input:disabled:hover { - background-color: #fff; - color: #dddbda; + background-color: var(--inspector-background); + color: var(--inspector-subtle-neutral); } .highlighted { - background-color: rgb(0, 112, 210); - border-color: rgb(0, 112, 210); - color: #fff; + background-color: var(--inspector-primary); + border-color: var(--inspector-primary); + color: var(--inspector-white); } .highlighted:hover, .highlighted:active { - background-color: rgb(0, 95, 178); - color: #fff; + background-color: var(--inspector-accent); + color: var(--inspector-white); } .highlighted:disabled { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: #fff; -} - -.highlighted:disabled:hover { - background-color: #c9c7c5; - color: #fff; + background-color: var(--inspector-neutral); + border-color: var(--inspector-neutral); + color: var(--inspector-inverted-text); } option[value="null"][disabled] { @@ -340,7 +370,7 @@ textarea[readonly] { outline: none; border-radius: 0; border: none; - border-top: 1px solid #DDDBDA; + border-top: 1px solid var(--inspector-subtle-neutral); resize: vertical; word-wrap: normal; font-size: 11px; @@ -352,26 +382,28 @@ textarea[readonly] { text-decoration: none; font-size: 1.5rem; font-weight: 700; - color: #919191; + color: var(--inspector-neutral); display: flex; align-items: center; } #help-btn:hover .icon { - background-color: #818181; + background-color: var(--inspector-neutral); } #help-btn .icon { display: inline-block; width: 1.4rem; height: 1.4rem; - ; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 1.4rem; - ; + mask-size: 1.4rem; -webkit-mask-image: url(images/help.svg); + mask-image: url(images/help.svg); -webkit-mask-position: center; - background-color: #919191; + mask-position: center; + background-color: var(--inspector-neutral); } #spinner { @@ -389,57 +421,6 @@ textarea[readonly] { margin-right: 1em; } -.cancel-btn { - margin-left: 1em; - color: #c23934; -} - -.cancel-btn:not(:disabled):hover, -.cancel-btn:not(:disabled):active, -.cancel-btn:not(:disabled):focus { - color: #a12b2b; -} - -.delete-btn { - background-color: #c23934; - border-color: #c23934; - color: white; - /* Allows to still show the title even when disabled as it contains useful information */ - pointer-events: auto; -} - -.delete-btn:not(:disabled):hover, -.delete-btn:not(:disabled):focus { - background-color: #a61a14; - border-color: #c23934; - color: white; -} - -.delete-btn:not(:disabled):active { - background-color: #870500; - border-color: #870500; -} - -.delete-btn:disabled, .delete-btn:disabled:hover { - background-color: #c9c7c5; - border-color: #c9c7c5; - color: white; -} - -.char-btn { - color: white; - text-decoration: none; - background-color: gray; - display: inline-block; - width: 14px; - height: 14px; - border-radius: 7px; - line-height: 14px; - text-align: center; - margin: 1px 0 0 3px; -} - -.char-btn[hidden], button[hidden], .button[hidden] { display: none; @@ -473,13 +454,13 @@ button[hidden], button, .button { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-button-border); height: 32px; display: inline-block; text-decoration: none; - background-color: white; + background-color: var(--inspector-background); padding: 0 16px; - color: #0070d2; + color: var(--inspector-middle); cursor: pointer; outline: none; position: relative; @@ -491,45 +472,14 @@ button, button:hover, .button:hover { - background-color: #F4F6F9; - color: #005fb2; -} - -button.toggle { - padding: 0 11px; -} - -button.toggle .button-toggle-icon, -button.toggle .button-icon { - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 1rem; - background-color: #706E6B; - display: inline-block; - width: 16px; - height: 16px; -} - -button.toggle:hover .button-icon, -button.toggle:hover .button-toggle-icon { - background-color: #004487; + background-color: var(--inspector-shade); + color: var(--inspector-text); } .flex-right button:last-child { margin-right: 0; } -button.expand .button-toggle-icon { - -webkit-mask-image: url(images/down.svg); -} - -button.contract .button-toggle-icon { - -webkit-mask-image: url(images/up.svg); -} - -button.toggle .button-icon { - -webkit-mask-image: url(images/light_bulb.svg); -} - .autocomplete-header { display: flex; align-items: flex-end; @@ -552,17 +502,17 @@ button.toggle .button-icon { } .autocomplete-results a { - border: 1px solid #DDDBDA; + border: 1px solid var(--inspector-subtle-neutral); border-radius: 0.25rem; padding: 0px 4px; text-decoration: none; - color: #006dcc; + color: var(--inspector-link); } .autocomplete-results a:hover, .autocomplete-results a:active { - background-color: #eff1f5; - color: #005fb2; + background-color: var(--inspector-hover); + color: var(--inspector-middle); } .autocomplete-result, @@ -575,8 +525,10 @@ button.toggle .button-icon { display: inline-block; margin: -1px 2px 0 1px; -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; -webkit-mask-size: 0.95rem; - background-color: #706E6B; + mask-size: 0.95rem; + background-color: var(--inspector-neutral); width: 16px; height: 16px; } @@ -587,111 +539,137 @@ button.toggle .button-icon { .relationshipName .autocomplete-icon { -webkit-mask-image: url(images/relate.svg); - background-color: #0070d2; + mask-image: url(images/relate.svg); + background-color: var(--inspector-accent); } .object .autocomplete-icon { -webkit-mask-image: url(images/sobject.svg); - background-color: #04844B; + mask-image: url(images/sobject.svg); + background-color: var(--inspector-success-background); } .variable .autocomplete-icon { -webkit-mask-image: url(images/variable.svg); + mask-image: url(images/variable.svg); } .autocomplete-icon { -webkit-mask-image: url(images/quotation_marks.svg); + mask-image: url(images/quotation_marks.svg); } .null .autocomplete-icon { -webkit-mask-image: url(images/steps.svg); + mask-image: url(images/steps.svg); } .fieldName .autocomplete-icon { /* default icon */ -webkit-mask-image: url(images/question_mark.svg); + mask-image: url(images/question_mark.svg); } .fieldName.reference .autocomplete-icon { -webkit-mask-image: url(images/record_lookup.svg); + mask-image: url(images/record_lookup.svg); } .fieldName.string .autocomplete-icon { -webkit-mask-image: url(images/string.svg); + mask-image: url(images/string.svg); } .fieldName.id .autocomplete-icon { -webkit-mask-image: url(images/anchor.svg); + mask-image: url(images/anchor.svg); } .fieldName.picklist .autocomplete-icon { -webkit-mask-image: url(images/picklist.svg); + mask-image: url(images/picklist.svg); } .fieldName.multipicklist .autocomplete-icon { -webkit-mask-image: url(images/multi-picklist.svg); + mask-image: url(images/multi-picklist.svg); } .fieldName.boolean .autocomplete-icon { -webkit-mask-image: url(images/boolean.svg); + mask-image: url(images/boolean.svg); } .fieldName.phone .autocomplete-icon { -webkit-mask-image: url(images/call.svg); + mask-image: url(images/call.svg); } .fieldName.textarea .autocomplete-icon { -webkit-mask-image: url(images/textarea.svg); + mask-image: url(images/textarea.svg); } .fieldName.url .autocomplete-icon { -webkit-mask-image: url(images/link.svg); + mask-image: url(images/link.svg); } .fieldName.int .autocomplete-icon, .fieldName.double .autocomplete-icon, .fieldName.long .autocomplete-icon { -webkit-mask-image: url(images/number.svg); + mask-image: url(images/number.svg); } .fieldName.address .autocomplete-icon { -webkit-mask-image: url(images/home.svg); + mask-image: url(images/home.svg); } .fieldName.datetime .autocomplete-icon { -webkit-mask-image: url(images/date-time.svg); + mask-image: url(images/date-time.svg); } .fieldName.date .autocomplete-icon { -webkit-mask-image: url(images/date.svg); + mask-image: url(images/date.svg); } .fieldName.currency .autocomplete-icon { -webkit-mask-image: url(images/currency.svg); + mask-image: url(images/currency.svg); } .fieldName.email .autocomplete-icon { -webkit-mask-image: url(images/email.svg); + mask-image: url(images/email.svg); } .fieldName.location .autocomplete-icon { -webkit-mask-image: url(images/checkin.svg); + mask-image: url(images/checkin.svg); } .fieldName.percent .autocomplete-icon { -webkit-mask-image: url(images/percent.svg); + mask-image: url(images/percent.svg); } .fieldName.encryptedstring .autocomplete-icon { -webkit-mask-image: url(images/lock.svg); + mask-image: url(images/lock.svg); } .fieldName.time .autocomplete-icon { -webkit-mask-image: url(images/clock.svg); + mask-image: url(images/clock.svg); } .fieldName.complexvalue .autocomplete-icon { -webkit-mask-image: url(images/advanced_function.svg); + mask-image: url(images/advanced_function.svg); } .header { @@ -704,7 +682,7 @@ button.toggle .button-icon { height: 150px; } .success { - background-color: #2e844a; + background-color: var(--inspector-success); border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; @@ -715,7 +693,7 @@ button.toggle .button-icon { .error { border-top-left-radius: 5px; border-top-right-radius: 5px; - background-color: #ea001e; + background-color: var(--inspector-error); color: white; } .error > h1 { @@ -724,9 +702,6 @@ button.toggle .button-icon { .status-code{ font-weight: bold; } -.blue{ - color:#0070d2; -} .reset-margin{ margin: 0;; -} \ No newline at end of file +} diff --git a/addon/rest-explore.html b/addon/rest-explore.html index 096e759f8..39e3bb315 100644 --- a/addon/rest-explore.html +++ b/addon/rest-explore.html @@ -7,9 +7,13 @@ + + + + @@ -21,4 +25,4 @@ - \ No newline at end of file + diff --git a/addon/rest-explore.js b/addon/rest-explore.js index 21f7052ce..be01eae20 100644 --- a/addon/rest-explore.js +++ b/addon/rest-explore.js @@ -1,5 +1,5 @@ /* global React ReactDOM */ -import {sfConn, apiVersion} from "./inspector.js"; +import {sfConn, apiVersion, setupColorListeners} from "./inspector.js"; /* global initButton */ import {copyToClipboard, initScrollTable} from "./data-load.js"; @@ -287,6 +287,7 @@ let h = React.createElement; class App extends React.Component { constructor(props) { super(props); + setupColorListeners(); this.onSelectHistoryEntry = this.onSelectHistoryEntry.bind(this); this.onSelectRequestTemplate = this.onSelectRequestTemplate.bind(this); this.onSelectQueryMethod = this.onSelectQueryMethod.bind(this); @@ -514,7 +515,12 @@ class App extends React.Component { h("option", {value: JSON.stringify(null), disabled: true}, "Saved"), model.savedHistory.list.map(q => h("option", {key: JSON.stringify(q), value: q.key}, q.label + " " + q.method + " " + q.endpoint)) ), - h("input", {placeholder: "Query Label", type: "save", value: model.queryName, onInput: this.onSetQueryName}), + h("span", {id: "save-wrapper"}, + h("svg", {viewBox: "0 0 122.73 122.88", x: "0px", y: "0px", style: {enableBackground: "new 0 0 122.73 122.88"}}, + h("path", {style: {fillRule: "evenodd", clipRule: "evenodd"}, d: "M109.5,113.68L109.5,113.68l-6.09,0c-0.4,0-0.73-0.32-0.73-0.72V69.48l0-0.1c0-0.9-0.17-1.65-0.49-2.22 c-0.06-0.11-0.14-0.22-0.2-0.31c-0.06-0.09-0.16-0.18-0.23-0.27l-0.02-0.02c-0.3-0.3-0.68-0.53-1.12-0.69l-0.25-0.07l-0.04-0.01 l-0.01,0c-0.41-0.11-0.88-0.17-1.38-0.17h-0.05l-0.08,0H36.75c-0.89,0-1.62,0.17-2.18,0.49l-0.02,0.01l-0.27,0.17l-0.04,0.04 c-0.09,0.07-0.18,0.15-0.27,0.23l-0.02,0.02l-0.01,0.01c-0.62,0.63-0.92,1.57-0.92,2.82l0,0.04l0,43.54h0 c0,0.4-0.33,0.72-0.73,0.72l-9.85,0c0,0,0,0,0,0c-0.19,0-0.38-0.08-0.51-0.21L9.87,101.41c-0.18-0.14-0.29-0.36-0.29-0.59l0-87.91 l0-0.08c0-0.83,0.15-1.52,0.44-2.07l0,0c0.05-0.11,0.11-0.2,0.17-0.29l0.02-0.03c0.07-0.11,0.19-0.18,0.25-0.29l0.01-0.02 l0.02-0.02l0,0c0.25-0.25,0.57-0.45,0.92-0.59l0.04-0.02l0.02-0.01l0.02-0.01l0.18-0.06v0l0.01-0.01c0.42-0.14,0.9-0.2,1.44-0.21 l0.09-0.01l26.21,0c0.4,0,0.73,0.32,0.73,0.72v28.75c0,0.52,0.05,1.03,0.13,1.5c0.09,0.46,0.15,0.98,0.39,1.34l0.01,0.02l0,0.01v0 c0.18,0.44,0.42,0.87,0.67,1.25c0.24,0.37,0.56,0.77,0.9,1.13l0.02,0.02l0,0.01l0.01,0c0.48,0.5,0.94,1.15,1.62,1.27l0.01,0l0.01,0 l0.01,0.01l0.32,0.17l0,0l0.4,0.18v0l0.01,0l0,0l0,0v0c0.33,0.14,0.67,0.26,1,0.34l0.01,0l0.03,0l0.01,0l0.03,0l0.26,0.05v0 c0.45,0.09,0.93,0.14,1.42,0.14l0.02,0h47.8c1.03,0,1.98-0.18,2.85-0.53l0.01-0.01c0.87-0.36,1.67-0.9,2.39-1.61l0.03-0.03 c0.36-0.36,0.69-0.75,0.96-1.16c0.26-0.38,0.58-0.76,0.66-1.22l0-0.01l0.01-0.01l0.01-0.02c0.18-0.43,0.34-0.88,0.41-1.34l0-0.03 c0.09-0.47,0.13-0.97,0.13-1.49V9.92c0-0.4,0.33-0.73,0.73-0.73h6c0.58,0,1.09,0.07,1.54,0.21c0.48,0.15,0.89,0.39,1.2,0.7 c0.68,0.67,0.88,1.67,0.9,2.59l0.01,0.09v0.05l0,0.02v97.19c0,0.56-0.07,1.07-0.21,1.51l-0.01,0.03v0l0,0.02l-0.08,0.22l0,0 l-0.02,0.06l-0.09,0.2l-0.01,0.04l-0.02,0.04l0,0l-0.03,0.06l-0.15,0.22l0,0l-0.05,0.08l-0.14,0.17l-0.06,0.07 c-0.15,0.16-0.33,0.3-0.53,0.42c-0.17,0.1-0.36,0.19-0.55,0.26l-0.06,0.02c-0.16,0.05-0.34,0.1-0.53,0.14l-0.02,0l-0.01,0l-0.02,0 l-0.09,0.01l-0.02,0l0,0l-0.02,0c-0.22,0.03-0.49,0.05-0.76,0.06H109.5L109.5,113.68z M53.93,104.43c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3h31.12c1.66,0,3,1.34,3,3c0,1.66-1.34,3-3,3H53.93L53.93,104.43z M53.93,89.03c-1.66,0-3-1.34-3-3s1.34-3,3-3 h31.12c1.66,0,3,1.34,3,3s-1.34,3-3,3H53.93L53.93,89.03z M94.03,9.39l-45.32-0.2v25.86H48.7c0,0.46,0.06,0.86,0.17,1.2 c0.03,0.06,0.04,0.1,0.07,0.15c0.09,0.23,0.22,0.44,0.4,0.61l0.03,0.03v0c0.06,0.06,0.11,0.1,0.17,0.15 c0.06,0.05,0.13,0.09,0.2,0.14c0.39,0.23,0.92,0.34,1.58,0.34v0l40.1,0.25v0l0,0v0c0.91,0,1.57-0.21,1.98-0.63 c0.42-0.43,0.63-1.1,0.63-2.02h0V9.39L94.03,9.39z M41.91,73.23h53.07v0c0.35,0,0.65,0.29,0.65,0.64l0,39.17 c0,0.35-0.29,0.65-0.65,0.65H41.91v0c-0.35,0-0.65-0.29-0.65-0.64l0-39.17C41.26,73.52,41.56,73.23,41.91,73.23L41.91,73.23 L41.91,73.23z M9.68,0h104.26c4.91,0,8.79,3.86,8.79,8.79V114c0,4.95-3.9,8.88-8.79,8.88l-96.61,0l-0.24-0.25L1.05,106.6L0,105.9 V8.76C0,3.28,4.81,0,9.68,0L9.68,0L9.68,0z"}) + ), + h("input", {placeholder: "Query Label", type: "save", value: model.queryName, onInput: this.onSetQueryName}), + ), h("button", {onClick: this.onAddToHistory, title: "Add request to saved history"}, "Save Query"), h("div", {ref: "buttonQueryMenu", className: "slds-dropdown-trigger slds-dropdown-trigger_click slds-button_last"}, h("button", {className: "slds-button slds-button_icon slds-button_icon-border-filled", onMouseEnter: () => this.toggleQueryMoreMenu(), title: "Show more options"}, diff --git a/addon/slds-spinner.css b/addon/slds-spinner.css index b9adde7e7..e841e00c0 100644 --- a/addon/slds-spinner.css +++ b/addon/slds-spinner.css @@ -71,7 +71,7 @@ .slds-spinner__dot-b:before { content: ""; position: absolute; - background: #0070d2; + background: var(--inspector-primary); border-radius: 50%; -webkit-animation-duration: 1s; animation-duration: 1s; @@ -949,4 +949,4 @@ -webkit-transform: translateX(0); transform: translateX(0) } -} \ No newline at end of file +} diff --git a/addon/styles/slds/color-override.css b/addon/styles/slds/color-override.css new file mode 100644 index 000000000..f29d496d2 --- /dev/null +++ b/addon/styles/slds/color-override.css @@ -0,0 +1,160 @@ +::placeholder { + color: var(--inspector-text-neutral); +} + +a { + color: var(--inspector-link); +} + +a:active { + color: var(--inspector-accent); +} + +.slds-border_bottom, +.slds-border--bottom { + border-bottom-color: var(--inspector-button-border); +} + +.slds-button { + background-color: var(--inspector-background); + border-color: var(--inspector-button-border); + color: var(--inspector-button-text); + + &:hover { + color: var(--inspector-text); + background-color: var(--inspector-accent); + } +} +.slds-button_icon-border-filled{ + color: var(--inspector-neutral); + background-color: var(--inspector-background); + + &:hover { + color: var(--inspector-accent); + background-color: var(--inspector-shade); + } +} + +.slds-button_neutral:hover { + background-color: var(--inspector-shade); +} + +.slds-card { + background: var(--inspector-background); + border-color: var(--inspector-silver-sand); + color: var(--inspector-text); +} + +.slds-checkbox_toggle .slds-checkbox_faux, +.slds-checkbox_toggle .slds-checkbox--faux, +.slds-checkbox--toggle .slds-checkbox_faux, +.slds-checkbox--toggle .slds-checkbox--faux { + border-color: var(--inspector-subtle-neutral); + background-color: var(--inspector-subtle-neutral); +} + +.slds-checkbox_toggle .slds-checkbox_faux:after, +.slds-checkbox_toggle .slds-checkbox--faux:after, +.slds-checkbox--toggle .slds-checkbox_faux:after, +.slds-checkbox--toggle .slds-checkbox--faux:after { + background-color: var(--inspector-background); +} + +.slds-checkbox_toggle [type=checkbox] + .slds-checkbox_faux_container, +.slds-checkbox_toggle [type=checkbox] + .slds-checkbox--faux_container, +.slds-checkbox--toggle [type=checkbox] + .slds-checkbox_faux_container, +.slds-checkbox--toggle [type=checkbox] + .slds-checkbox--faux_container { + color: var(--inspector-text-neutral); +} + +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux, +.slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox_faux, +.slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox--faux, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux, +.slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox_faux, +.slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox--faux, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux { + border-color: var(--inspector-primary); + background-color: var(--inspector-primary); +} + +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux:before, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux:before, +.slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox_faux:before, +.slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox--faux:before, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, +.slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux:before, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux:before, +.slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox_faux:before, +.slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox--faux:before, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, +.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before { + background-color: var(--inspector-background); +} + +.slds-icon { + fill: var(--inspector-text); +} + +.slds-input { + border-color: var(--inspector-silver-sand); + background-color: var(--inspector-background); + color: var(--inspector-text); +} + +.slds-tabs_default__item, +.slds-tabs--default__item { + color: var(--inspector-dark-neutral); +} + +.slds-tabs_default__item.slds-active, .slds-tabs_default__item.slds-is-active, +.slds-tabs--default__item.slds-active, +.slds-tabs--default__item.slds-is-active { + color: var(--inspector-text); +} + +.slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after, +.slds-tabs--default__item.slds-active:after, +.slds-tabs--default__item.slds-is-active:after { + background-color: var(--inspector-primary); +} + +.slds-tabs_default__item.slds-active .slds-tabs_default__link:hover, +.slds-tabs_default__item.slds-active .slds-tabs--default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover, +.slds-tabs_default__item.slds-is-active .slds-tabs--default__link:hover, +.slds-tabs--default__item.slds-active .slds-tabs_default__link:hover, +.slds-tabs--default__item.slds-active .slds-tabs--default__link:hover, +.slds-tabs--default__item.slds-is-active .slds-tabs_default__link:hover, +.slds-tabs--default__item.slds-is-active .slds-tabs--default__link:hover{ + color: var(--inspector-text); +} + +.slds-theme_shade, +.slds-theme--shade { + background-color: var(--inspector-shade); +} + +.slds-page-header { + background: var(--inspector-shade); +} + +.slds-dropdown { + border: 1px solid var(--inspector-shade); + background: var(--inspector-background); + color: var(--inspector-text); + + & a { + color: var(--inspector-text); + } +} + +.slds-dropdown__item > a:hover, .slds-dropdown__item > a:focus { + background-color: var(--inspector-neutral); + color: var(--inspector-inverted-text); +} diff --git a/addon/styles/slds/slds.css b/addon/styles/slds/slds.css index 73bc3a435..14279d802 100644 --- a/addon/styles/slds/slds.css +++ b/addon/styles/slds/slds.css @@ -585,8 +585,8 @@ ul{ a{ color:#0176d3; text-decoration:none; - -webkit-transition:color 0.1s linear; - transition:color 0.1s linear; + /*-webkit-transition:color 0.1s linear;*/ + /*transition:color 0.1s linear;*/ } a:active{ @@ -704,6 +704,7 @@ img{ text-decoration:none; color:var(--slds-c-button-text-color, var(--sds-c-button-text-color, #0176d3)); -webkit-appearance:none; + appearance:none; white-space:normal; -webkit-user-select:none; -moz-user-select:none; @@ -1242,8 +1243,6 @@ a.slds-button--inverse:focus{ -ms-flex-align:center; align-items:center; } -.slds-not-selected{ -} .slds-not-selected .slds-text-selected{ display:none; } @@ -1297,8 +1296,6 @@ a.slds-button--inverse:focus{ display:-ms-inline-flexbox; display:inline-flex; } -.slds-button_dual-stateful{ -} .slds-button_dual-stateful .slds-text-not-pressed{ display:block; } @@ -1750,11 +1747,6 @@ a.slds-button--inverse:focus{ box-shadow:none; } -.slds-card, -.slds-modal, -.slds-tabs_default, -.slds-tabs--default{ -} .slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary, @@ -2302,9 +2294,6 @@ a.slds-button--inverse:focus{ .slds-checkbox--toggle [type=checkbox][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after{ background-color:transparent; } - .slds-checkbox_add-button, - .slds-checkbox--add-button{ - } .slds-checkbox_add-button .slds-checkbox_faux, .slds-checkbox_add-button .slds-checkbox--faux, .slds-checkbox--add-button .slds-checkbox_faux, @@ -3675,9 +3664,6 @@ a.slds-button--inverse:focus{ /*! @css-var-fallback padding-right */ --slds-c-input-spacing-horizontal-end:2rem; } -.slds-input-has-icon_left-right, -.slds-input-has-icon--left-right{ -} .slds-input-has-icon_left-right .slds-input__icon_left, .slds-input-has-icon_left-right .slds-input__icon--left, .slds-input-has-icon--left-right .slds-input__icon_left, @@ -5249,6 +5235,7 @@ a.slds-button--inverse:focus{ padding:.2rem .2rem; border-bottom:1px solid var(--slds-g-color-border-base-1, #c9c9c9); border-radius:0.25rem; + background: #f3f3f3; background-clip:padding-box; -webkit-box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.1); @@ -6204,4 +6191,4 @@ a.slds-button--inverse:focus{ .slds-theme_error a:not(.slds-button--neutral)[disabled], .slds-theme--error a:not(.slds-button--neutral)[disabled]{ color:var(--slds-g-color-neutral-100-opacity-10, rgba(255, 255, 255, 0.15)); -} \ No newline at end of file +} diff --git a/docs/how-to.md b/docs/how-to.md index cd786fafe..f55948694 100644 --- a/docs/how-to.md +++ b/docs/how-to.md @@ -95,9 +95,9 @@ Add a new property `csvSeparator` containing the needed separator for CSV files ## Disable query input autofocus -Option available in Data Export tab +Add a new property `disableQueryInputAutoFocus` with `true` -Disable query input +![image](https://github.com/tprouvot/Salesforce-Inspector-reloaded/assets/35368290/89563a58-d8fa-4b14-a150-99c389e8df75) ## Add custom query templates @@ -275,29 +275,17 @@ From the option page, enable "Use favicon color on sandbox banner" ## Select all fields in a query This functionality already exists in the legacy version but since many users don't know about it, I would like to document it. -When on the export page, put the cursor between `SELECT` and `FROM` and press `Ctrl + space` for inserting all fields (if you don't have the rights for a particular field, it wont' be added). +When on the export page, put the cursor between `SaELECT` and `FROM` and press `Ctrl + space` for inserting all fields (if you don't have the rights for a particular field, it wont' be added). If you want to insert only custom fields, enter `__c` between `SELECT` and `FROM`. ![2024-04-16_08-53-32 (1)](https://github.com/tprouvot/Salesforce-Inspector-reloaded/assets/35368290/ef7ba7a0-c9c4-4573-9aaa-b72e64430f64) -## Customize Select all fields in a query shortcut - -If the default `Ctrl + space` shortcut is already used by another extension or app, you can customize it in `chrome://extensions/shortcuts` and choose the one you prefer. - -Customize Select all fields in a query shortcut - ## Exclude formula fields from data export autocomplete You can exclude formula fields to be included in the autocomplete by disable the toogle Exclude formula fields from autocomplete -## Convert times from data export to local time - -You can configure Data Export to convert times to local time. Navigate to Options -> Data Export and enable "Show local time". - -Show local time in data export checkbox option - ## Customize extension's shortcuts Navigate to [chrome://extensions/shortcut](chrome://extensions/shortcut) and choose dedicated shortcuts for the pages you want. @@ -343,10 +331,4 @@ To export and import your current configuration, go to the options page and clic Since the extension offers more features, the number of button is increasing. Some of the users may don't need some of those, to make the popup lighter some of the buttons can be hidden: -Hide Buttons - -## Switch user language from the popup - -From the User tab in the popup, click on the user language flag to display the available languages. - -![2024-12-04_16-07-35 (1)](https://github.com/user-attachments/assets/d07da946-dba0-4bb4-8f3b-313392bbf557) \ No newline at end of file +Hide Buttons \ No newline at end of file diff --git a/docs/screenshots/color-scheme/theme-dark-accent.png b/docs/screenshots/color-scheme/theme-dark-accent.png new file mode 100644 index 000000000..4f937180c Binary files /dev/null and b/docs/screenshots/color-scheme/theme-dark-accent.png differ diff --git a/docs/screenshots/color-scheme/theme-dark-mode.png b/docs/screenshots/color-scheme/theme-dark-mode.png new file mode 100644 index 000000000..acc3c8b48 Binary files /dev/null and b/docs/screenshots/color-scheme/theme-dark-mode.png differ diff --git a/docs/screenshots/color-scheme/theme-follow-dark.png b/docs/screenshots/color-scheme/theme-follow-dark.png new file mode 100644 index 000000000..faa4d911b Binary files /dev/null and b/docs/screenshots/color-scheme/theme-follow-dark.png differ diff --git a/docs/screenshots/color-scheme/theme-follow-light.png b/docs/screenshots/color-scheme/theme-follow-light.png new file mode 100644 index 000000000..15344781d Binary files /dev/null and b/docs/screenshots/color-scheme/theme-follow-light.png differ diff --git a/docs/screenshots/color-scheme/theme-white-accent.png b/docs/screenshots/color-scheme/theme-white-accent.png new file mode 100644 index 000000000..50d97503f Binary files /dev/null and b/docs/screenshots/color-scheme/theme-white-accent.png differ diff --git a/docs/screenshots/color-scheme/theme-white-mode.png b/docs/screenshots/color-scheme/theme-white-mode.png new file mode 100644 index 000000000..d34f4e947 Binary files /dev/null and b/docs/screenshots/color-scheme/theme-white-mode.png differ diff --git a/test/main/default/settings/Account.settings-meta.xml b/test/main/default/settings/Account.settings-meta.xml deleted file mode 100644 index 3909c82f0..000000000 --- a/test/main/default/settings/Account.settings-meta.xml +++ /dev/null @@ -1,4 +0,0 @@ - - - true - \ No newline at end of file