simdeck 0.1.4 → 0.1.5

package/client/dist/chrome-devtools-ui/ui/components/text_editor/text_editor.js

@@ -0,0 +1 @@
+import*as t from"../../../core/common/common.js";import*as e from"../../../core/i18n/i18n.js";import*as o from"../../../models/text_utils/text_utils.js";import*as n from"../../../services/window_bounds/window_bounds.js";import*as i from"../../../third_party/codemirror.next/codemirror.next.js";import*as r from"../../legacy/legacy.js";import*as s from"../../visual_logging/visual_logging.js";import*as a from"../code_highlighter/code_highlighter.js";import*as c from"../icon_button/icon_button.js";import*as l from"../../../core/root/root.js";import*as d from"../../../core/sdk/sdk.js";import*as u from"../../../models/bindings/bindings.js";import*as p from"../../../models/javascript_metadata/javascript_metadata.js";import*as m from"../../../models/source_map_scopes/source_map_scopes.js";import*as h from"../../legacy/theme_support/theme_support.js";var f=Object.freeze({__proto__:null,AutocompleteHistory:class t{static#t=300;#e;#o=[];#n=1;#i=!1;constructor(t){this.#e=t,this.#o=this.#e.get()}clear(){this.#o=[],this.#e.set([]),this.#n=1}length(){return this.#o.length}pushHistoryItem(t){this.#i&&(this.#o.pop(),this.#i=!1),this.#n=1,t!==this.#r()&&this.#o.push(t),this.#s()}#a(t){this.#i&&this.#o.pop(),this.#i=!0,this.#o.push(t)}previous(t){if(!(this.#n>this.#o.length))return 1===this.#n&&this.#a(t),++this.#n,this.#r()}next(){if(1!==this.#n)return--this.#n,this.#r()}matchingEntries(t,e=50){const o=new Set;for(let n=this.#o.length-1;n>=0&&o.size<e;--n){const e=this.#o[n];e.startsWith(t)&&o.add(e)}return o}#r(){return this.#o[this.#o.length-this.#n]}#s(){this.#e.set(this.#o.slice(-t.#t))}}});const g=i.EditorView.theme({"&.cm-editor":{color:"color: var(--sys-color-on-subtle)",cursor:"auto","&.cm-focused":{outline:"none"}},".cm-scroller":{lineHeight:"1.4em",fontFamily:"var(--source-code-font-family)",fontSize:"var(--source-code-font-size)"},".cm-content":{lineHeight:"1.4em"},".cm-panels":{backgroundColor:"var(--sys-color-cdt-base-container)"},".cm-panels-bottom":{borderTop:"1px solid var(--sys-color-divider)"},".cm-selectionMatch":{backgroundColor:"var(--sys-color-yellow-container)"},".cm-cursor":{borderLeft:"1px solid var(--sys-color-inverse-surface)"},"&.cm-readonly .cm-cursor":{display:"none"},".cm-cursor-secondary":{borderLeft:"1px solid var(--sys-color-neutral-outline)"},"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground":{background:"var(--sys-color-tonal-container)"},".cm-line::selection":{color:"currentColor"},".cm-selectionBackground":{background:"var(--sys-color-neutral-container)"},".cm-gutters":{borderRight:"none",whiteSpace:"nowrap",backgroundColor:"var(--sys-color-cdt-base-container)"},".cm-gutters .cm-foldGutterElement":{cursor:"pointer",opacity:"0%",transition:"opacity 0.2s"},".cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement":{opacity:"100%"},".cm-lineNumbers":{overflow:"visible",minWidth:"40px"},".cm-lineNumbers .cm-gutterElement":{color:"var(--sys-color-outline)",padding:"0 3px 0 9px"},".cm-foldPlaceholder":{background:"transparent",border:"none",color:"var(--sys-color-token-subtle)"},".cm-matchingBracket, .cm-nonmatchingBracket":{background:"transparent",borderBottom:"none"},"&:focus-within .cm-matchingBracket":{color:"inherit",backgroundColor:"var(--sys-color-surface-variant)",borderBottom:"1px solid var(--sys-color-outline)"},"&:focus-within .cm-nonmatchingBracket":{backgroundColor:"var(--sys-color-error-container)",borderBottom:"1px solid var(--sys-color-error)"},".cm-trailingWhitespace":{backgroundColor:"var(--sys-color-error-container)"},".cm-highlightedTab":{display:"inline-block",position:"relative","&:before":{content:'""',borderBottom:"1px solid var(--sys-color-token-subtle)",position:"absolute",left:"5%",bottom:"50%",width:"90%",pointerEvents:"none"}},".cm-highlightedSpaces:before":{color:"var(--sys-color-token-subtle)",content:"attr(data-display)",position:"absolute",pointerEvents:"none"},".cm-placeholder":{color:"var(--sys-color-token-subtle)"},".cm-completionHint":{color:"var(--sys-color-token-subtle)"},".cm-tooltip":{boxShadow:"var(--drop-shadow)",backgroundColor:"var(--sys-color-neutral-container)"},".cm-argumentHints":{pointerEvents:"none",padding:"0 4px",whiteSpace:"nowrap",lineHeight:"20px",marginBottom:"4px",width:"fit-content"},".cm-tooltip.cm-tooltip-autocomplete > ul":{backgroundColor:"var(--sys-color-cdt-base-container)",maxHeight:"25em",minWidth:"16em","& > li":{display:"flex",justifyContent:"space-between",border:"1px solid var(--sys-color-cdt-base-container)"},"& > li.cm-secondaryCompletion":{display:"flex",backgroundColor:"var(--sys-color-neutral-container)",borderColor:"var(--sys-color-neutral-container)",justifyContent:"space-between","&::before":{content:'">"',fontWeight:"bold",color:"var(--sys-color-primary-bright)",marginRight:"5px"}},"& > li:hover":{backgroundColor:"var(--sys-color-state-hover-on-subtle)"},"& > li[aria-selected]":{backgroundColor:"var(--sys-color-tonal-container)",borderColor:"var(--sys-color-tonal-container)","&, &.cm-secondaryCompletion::before":{color:"var(--sys-color-on-tonal-container)"},"&::after":{content:'"tab"',color:"var(--sys-color-primary-bright)",border:"1px solid var(--sys-color-primary-bright)",borderRadius:"2px",marginLeft:"5px",padding:"1px 3px",fontSize:"10px",lineHeight:"10px"}}},".cm-tooltip.cm-tooltip-autocomplete.cm-conservativeCompletion > ul > li[aria-selected]":{backgroundColor:"var(--sys-color-cdt-base-container)",border:"1px dotted var(--sys-color-on-surface)","&, &.cm-secondaryCompletion::before":{color:"var(--sys-color-on-surface)"},"&::after":{border:"1px solid var(--sys-color-neutral-outline)",color:"var(--sys-color-token-subtle)"}},".cm-completionMatchedText":{textDecoration:"none",fontWeight:"bold"},".cm-highlightedLine":{animation:"cm-fading-highlight 2s 0s"},"@keyframes cm-fading-highlight":{from:{backgroundColor:"var(--sys-color-yellow-container)"},to:{backgroundColor:"transparent"}}}),y={codeEditor:"Code editor",sSuggestionSOfS:"{PH1}, suggestion {PH2} of {PH3}"},b=e.i18n.registerUIStrings("ui/components/text_editor/config.ts",y),v=e.i18n.getLocalizedString.bind(void 0,b),w=[],x=i.Facet.define();class S{settingName;getExtension;compartment=new i.Compartment;constructor(t,e){this.settingName=t,this.getExtension=e}settingValue(){return t.Settings.Settings.instance().moduleSetting(this.settingName).get()}instance(){return[this.compartment.of(this.getExtension(this.settingValue())),x.of(this)]}sync(t,e){const o=this.compartment.get(t),n=this.getExtension(e);return o===n?null:this.compartment.reconfigure(n)}static bool(t,e,o=w){return new S(t,(t=>t?e:o))}static none=[]}const C=S.bool("text-editor-tab-moves-focus",[],i.keymap.of([{key:"Tab",run:t=>!!t.state.doc.length&&i.indentMore(t),shift:t=>!!t.state.doc.length&&i.indentLess(t)}])),E=i.StateEffect.define(),k=i.StateField.define({create:()=>!0,update:(t,e)=>"active"!==i.completionStatus(e.state)||(i.selectedCompletionIndex(e.startState)??0)===(i.selectedCompletionIndex(e.state)??0)&&!e.effects.some((t=>t.is(E)))&&t});function M(t){return!t.state.field(k,!1)&&i.acceptCompletion(t)}function T(t){const e=t.state.selection.main.head,o=t.state.doc.lineAt(e);return!!(e-o.from>=o.length)&&i.acceptCompletion(t)}function D(t,e="option"){return o=>{if("active"!==i.completionStatus(o.state))return!1;if(o.state.field(k,!1))return o.dispatch({effects:E.of(null)}),L(o),!0;const n=i.moveCompletionSelection(t,e)(o);return L(o),n}}function j(){return t=>"active"===i.completionStatus(t.state)&&(i.moveCompletionSelection(!1)(t),L(t),!0)}function L(t){const e=v(y.sSuggestionSOfS,{PH1:i.selectedCompletion(t.state)?.label||"",PH2:(i.selectedCompletionIndex(t.state)||0)+1,PH3:i.currentCompletions(t.state).length});r.ARIAUtils.alert(e)}const O=new S("text-editor-autocompletion",(t=>[i.autocompletion({activateOnTyping:t,icons:!1,optionClass:t=>"secondary"===t.type?"cm-secondaryCompletion":"",tooltipClass:t=>t.field(k,!1)?"cm-conservativeCompletion":"",defaultKeymap:!1,updateSyncTime:100}),i.Prec.highest(i.keymap.of([{key:"End",run:T},{key:"ArrowRight",run:T},{key:"Ctrl-Space",run:i.startCompletion},{key:"Escape",run:i.closeCompletion},{key:"ArrowDown",run:D(!0)},{key:"ArrowUp",run:j()},{mac:"Ctrl-n",run:D(!0)},{mac:"Ctrl-p",run:j()},{key:"PageDown",run:i.moveCompletionSelection(!0,"page")},{key:"PageUp",run:i.moveCompletionSelection(!1,"page")},{key:"Enter",run:M}]))])),P=S.bool("text-editor-bracket-matching",i.bracketMatching()),_=S.bool("text-editor-code-folding",[i.foldGutter({markerDOM(t){const e=t?"triangle-down":"triangle-right",o=new c.Icon.Icon;return o.setAttribute("class",t?"cm-foldGutterElement":"cm-foldGutterElement cm-foldGutterElement-folded"),o.setAttribute("jslog",`${s.expand().track({click:!0})}`),o.data={iconName:e,color:"var(--icon-fold-marker)",width:"14px",height:"14px"},o}}),i.keymap.of(i.foldKeymap)]),I=i.StateField.define({create:t=>H(t.doc),update:(t,e)=>e.docChanged&&function(t){let e=0;return t.iterGaps(((t,o,n)=>{e+=n})),e}(e.changes)<=200?H(e.state.doc):t,provide:t=>i.Prec.highest(i.indentUnit.from(t))});function H(e){const n=e.iterLines(1,Math.min(e.lines+1,1e3));return o.TextUtils.detectIndentation(n)??t.Settings.Settings.instance().moduleSetting("text-editor-indent").get()}const A=S.bool("text-editor-auto-detect-indent",I);function B(t){return i.ViewPlugin.define((e=>({decorations:t.createDeco(e),update(e){this.decorations=t.updateDeco(e,this.decorations)}})),{decorations:t=>t.decorations})}const N=new Map;const R=B(new i.MatchDecorator({regexp:/\t| +/g,decoration:t=>function(t){const e=N.get(t);if(e)return e;const o=i.Decoration.mark({attributes:"\t"===t?{class:"cm-highlightedTab"}:{class:"cm-highlightedSpaces","data-display":"·".repeat(t.length)}});return N.set(t,o),o}(t[0]),boundary:/\S/})),z=B(new i.MatchDecorator({regexp:/\s+$/g,decoration:i.Decoration.mark({class:"cm-trailingWhitespace"}),boundary:/\S/})),F=new S("show-whitespaces-in-editor",(t=>"all"===t?R:"trailing"===t?z:w)),W=S.bool("allow-scroll-past-eof",i.scrollPastEnd()),V=Object.create(null);const $=new S("text-editor-indent",(function(t){let e=V[t];return e||(e=V[t]=i.indentUnit.of(t)),e})),U=S.bool("dom-word-wrap",i.EditorView.lineWrapping);function G(t){return/\r\n/.test(t)&&!/(^|[^\r])\n/.test(t)?i.EditorState.lineSeparator.of("\r\n"):[]}const K=i.keymap.of([{key:"Tab",run:i.acceptCompletion},{key:"Ctrl-m",run:i.cursorMatchingBracket,shift:i.selectMatchingBracket},{key:"Mod-/",run:i.toggleComment},{key:"Mod-d",run:i.selectNextOccurrence},{key:"Alt-ArrowLeft",mac:"Ctrl-ArrowLeft",run:i.cursorSyntaxLeft,shift:i.selectSyntaxLeft},{key:"Alt-ArrowRight",mac:"Ctrl-ArrowRight",run:i.cursorSyntaxRight,shift:i.selectSyntaxRight},{key:"Ctrl-ArrowLeft",mac:"Alt-ArrowLeft",run:i.cursorGroupLeft,shift:i.selectGroupLeft},{key:"Ctrl-ArrowRight",mac:"Alt-ArrowRight",run:i.cursorGroupRight,shift:i.selectGroupRight},...i.standardKeymap,...i.historyKeymap]);function J(){const e=t.Settings.Settings.instance().moduleSetting("ui-theme").get();return"systemPreferred"===e?window.matchMedia("(prefers-color-scheme: dark)").matches:"dark"===e}const q=i.EditorView.theme({},{dark:!0}),Q=new i.Compartment;function X(){return[g,J()?Q.of(q):Q.of([])]}let Y=null;function Z(){return Y||(Y=n.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement()),Y.getBoundingClientRect()}function tt(t){return[X(),i.highlightSpecialChars(),i.highlightSelectionMatches(),i.history(),i.drawSelection(),i.EditorState.allowMultipleSelections.of(!0),i.indentOnInput(),i.syntaxHighlighting(a.CodeHighlighter.highlightStyle),K,i.EditorView.clickAddsSelectionRange.of((t=>t.altKey||t.ctrlKey)),C.instance(),P.instance(),$.instance(),i.Prec.lowest(i.EditorView.contentAttributes.of({"aria-label":v(y.codeEditor)})),t instanceof i.Text?[]:G(t),i.tooltips({parent:nt(),tooltipSpace:Z}),i.bidiIsolates()]}const et=S.bool("text-editor-bracket-closing",[i.html.autoCloseTags,i.closeBrackets(),i.keymap.of(i.closeBracketsKeymap)]);let ot=null;function nt(){if(!ot){const t=i.EditorState.create({extensions:[g,J()?q:[],i.syntaxHighlighting(a.CodeHighlighter.highlightStyle),i.showTooltip.of({pos:0,create:()=>({dom:document.createElement("div")})})]}).facet(i.EditorView.styleModule),e=document.body.appendChild(document.createElement("div"));e.className="editor-tooltip-host",ot=e.attachShadow({mode:"open"}),i.StyleModule.mount(ot,t)}return ot}class it extends i.WidgetType{text;constructor(t){super(),this.text=t}eq(t){return this.text===t.text}toDOM(){const t=document.createElement("span");return t.className="cm-completionHint",t.textContent=this.text,t}}const rt=i.ViewPlugin.fromClass(class{decorations=i.Decoration.none;currentHint=null;update(t){const e=this.currentHint=this.topCompletion(t.state);!e||t.state.field(k,!1)?this.decorations=i.Decoration.none:this.decorations=i.Decoration.set([i.Decoration.widget({widget:new it(e),side:1}).range(t.state.selection.main.head)])}topCompletion(t){const e=i.selectedCompletion(t);if(!e)return null;let{label:o,apply:n}=e;if("string"==typeof n&&(o=n,n=void 0),n||o.length>100||o.indexOf("\n")>-1||"secondary"===e.type)return null;const r=t.selection.main.head,s=t.doc.lineAt(r);if(r!==s.to)return null;const a=("'"===o[0]?/'(\\.|[^'\\])*$/:'"'===o[0]?/"(\\.|[^"\\])*$/:/#?[\w$]+$/).exec(s.text);return a&&!o.startsWith(a[0])?null:o.slice(a?a[0].length:0)}},{decorations:t=>t.decorations});var st=Object.freeze({__proto__:null,DynamicSetting:S,allowScrollPastEof:W,autoDetectIndent:A,autocompletion:O,baseConfiguration:tt,bracketMatching:P,closeBrackets:et,codeFolding:_,conservativeCompletion:k,contentIncludingHint:function(t){const e=t.plugin(rt);let o=t.state.doc.toString();if(e?.currentHint){const{head:n}=t.state.selection.main;o=o.slice(0,n)+e.currentHint+o.slice(n)}return o},domWordWrap:U,dummyDarkTheme:q,dynamicSetting:x,indentUnit:$,showCompletionHint:rt,showWhitespace:F,tabMovesFocus:C,theme:X,themeSelection:Q});const at=i.StateEffect.define(),ct=i.StateEffect.define();var lt=Object.freeze({__proto__:null,clearHighlightedPosition:ct,positionHighlighter:function(t,e){const o=i.Decoration.line({attributes:{class:t}}),n=i.Decoration.mark({attributes:{class:e}}),r=i.StateField.define({create:()=>null,update(t,e){t&&(t=e.changes.mapPos(t,-1,i.MapMode.TrackDel));for(const o of e.effects)o.is(ct)?t=null:o.is(at)&&(t=Math.max(0,Math.min(o.value,e.newDoc.length-1)));return t}});function s(t){return t.field(r)}return[r,i.ViewPlugin.fromClass(class{tree;decorations;constructor({state:t}){this.tree=i.syntaxTree(t),this.decorations=this.#c(t,s(t))}update(t){const e=i.syntaxTree(t.state),o=s(t.state),n=o!==s(t.startState);e.length!==this.tree.length||n?(this.tree=e,this.decorations=this.#c(t.state,o)):this.decorations=this.decorations.map(t.changes)}#c(t,e){const r=new i.RangeSetBuilder;if(null!==e){const{doc:s}=t,a=s.lineAt(e);r.add(a.from,a.from,o);const c=i.syntaxTree(t).resolveInner(e,1),l=Math.min(a.to,c.to);l>e&&r.add(e,l,n)}return r.finish()}},{decorations:({decorations:t})=>t})]},setHighlightedPosition:at});const dt=i.StateEffect.define();class ut{completions;seen;constructor(t=[],e=new Set){this.completions=t,this.seen=e}add(t){this.seen.has(t.label)||(this.seen.add(t.label),this.completions.push(t))}copy(){return new ut(this.completions.slice(),new Set(this.seen))}}const pt=["async","await","break","case","catch","class","const","continue","debugger","default","delete","do","else","export","extends","false","finally","for","function","if","import","in","instanceof","let","new","null","of","return","static","super","switch","this","throw","true","try","typeof","var","void","while","with","yield"],mt=["clear","copy","debug","dir","dirxml","getEventListeners","inspect","keys","monitor","monitorEvents","profile","profileEnd","queryObjects","table","undebug","unmonitor","unmonitorEvents","values"],ht=["$","$$","$x","$0","$_"],ft=new Set,gt=new ut,yt=new ut;for(const t of pt)yt.add({label:t,type:"keyword"}),gt.add({label:t,type:"keyword"});for(const t of mt)yt.add({label:t,type:"function"}),ft.has(t)&&gt.add({label:t,type:"function"});for(const t of ht)yt.add({label:t,type:"variable"}),ft.has(t)&&gt.add({label:t,type:"variable"});const bt=new Set(["TemplateString","LineComment","BlockComment","TypeDefinition","VariableDefinition","PropertyDefinition","TypeName"]);function vt(t,e,o){let n=t.resolveInner(e,-1);const i=n.parent;if(bt.has(n.name))return null;if("PropertyName"===n.name||"PrivatePropertyName"===n.name)return"MemberExpression"!==i?.name?null:{type:1,from:n.from,relatedNode:i};if("VariableName"===n.name||!n.firstChild&&n.to-n.from<20&&!/[^a-z]/.test(o.sliceString(n.from,n.to)))return{type:0,from:n.from};if("String"===n.name){const t=n.parent;return"MemberExpression"===t?.name&&"["===t.childBefore(n.from)?.name?{type:2,from:n.from,relatedNode:t}:null}if(n=n.enterUnfinishedNodesBefore(e),n.to===e&&"MemberExpression"===n.parent?.name&&(n=n.parent),"MemberExpression"===n.name){const t=n.childBefore(Math.min(e,n.to));if("["===t?.name)return{type:2,relatedNode:n};if("."===t?.name||"?."===t?.name)return{type:1,relatedNode:n}}if("("===n.name&&"ArgList"===i?.name&&"CallExpression"===i?.parent?.name){const t=i?.parent?.firstChild;if("MemberExpression"===t?.name){const e=t?.lastChild;if(e&&"get"===o.sliceString(e.from,e.to)){const e=t?.firstChild;return{type:3,relatedNode:e||void 0}}}}return{type:0}}async function wt(t){const e=vt(i.syntaxTree(t.state),t.pos,t.state.doc);if(!e||void 0===e.from&&!t.explicit&&0===e.type)return null;const o=Et()?.debuggerModel.selectedCallFrame()?.script;if(o&&u.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().pluginManager.hasPluginForScript(o))return null;let n,r;if(0===e.type){const[t,e]=await Promise.all([Lt(),Ot()]);if(t.completions.length){n=t;for(const t of e.completions)n.add(t)}else n=e}else if(1===e.type||2===e.type){const o=e.relatedNode.getChild("Expression");if(2===e.type&&(r=void 0===e.from?"'":t.state.sliceDoc(e.from,e.from+1)),!o)return null;n=await async function(t,e,o=!1){const n=Dt.instance();if(!e){const e=n.get(t);if(e)return await e}const i=Et();if(!i)return new ut;const r=jt(t,i,e,o);e||n.set(t,r);return await r}(t.state.sliceDoc(o.from,o.to),r,"]"===t.state.sliceDoc(t.pos,t.pos+1))}else{if(3!==e.type)return null;{const o=e.relatedNode;if(!o)return null;n=await async function(t){const e=new ut,o=Et();if(!o)return e;const n=await kt(o,`[...Map.prototype.keys.call(${t})]`,"completion");if(!n)return e;const i=d.RemoteObject.RemoteArray.objectAsArray(n),r=i.length();for(let t=0;t<r;t++)e.add({label:`"${(await i.at(t)).value}")`,type:"constant",boost:-1*t});return e}(t.state.sliceDoc(o.from,o.to))}}return{from:e.from??t.pos,options:n.completions,validFor:r?"'"===r?St:Ct:xt}}const xt=/^#?(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u,St=/^\'(\\.|[^\\'\n])*'?$/,Ct=/^"(\\.|[^\\"\n])*"?$/;function Et(){return r.Context.Context.instance().flavor(d.RuntimeModel.ExecutionContext)}async function kt(t,e,o){const n=await t.evaluate({expression:e,objectGroup:o,includeCommandLineAPI:!0,silent:!0,returnByValue:!1,generatePreview:!1,throwOnSideEffect:!0,timeout:500,replMode:!0},!1,!1);return"error"in n||n.exceptionDetails||!n.object?null:n.object}const Mt=new Map([["string","String"],["symbol","Symbol"],["number","Number"],["boolean","Boolean"],["bigint","BigInt"]]);let Tt=null;class Dt{#l=new Map;constructor(){const t=()=>this.#l.clear();d.TargetManager.TargetManager.instance().addModelListener(d.ConsoleModel.ConsoleModel,d.ConsoleModel.Events.CommandEvaluated,t),r.Context.Context.instance().addFlavorChangeListener(d.RuntimeModel.ExecutionContext,t),d.TargetManager.TargetManager.instance().addModelListener(d.DebuggerModel.DebuggerModel,d.DebuggerModel.Events.DebuggerResumed,t),d.TargetManager.TargetManager.instance().addModelListener(d.DebuggerModel.DebuggerModel,d.DebuggerModel.Events.DebuggerPaused,t)}get(t){return this.#l.get(t)}set(t,e){this.#l.set(t,e),window.setTimeout((()=>{this.#l.get(t)===e&&this.#l.delete(t)}),3e4)}static instance(){return Tt||(Tt=new Dt),Tt}}async function jt(t,e,o,n=!1){const i=new ut;if(!e)return i;let r=await kt(e,t,"completion");if(!r)return i;for(;"object"===r.type&&"proxy"===r.subtype;){const t=await r.getOwnProperties(!1),e=t.internalProperties?.find((t=>"[[Target]]"===t.name))?.value;if(!e)break;r=e}const s=Mt.get(r.type);s&&(r=await kt(e,s+".prototype","completion"));const a="globalThis"===t?"function":"method",c="globalThis"===t?"variable":"property";if(r&&("object"===r.type||"function"===r.type)){const t=await r.getAllProperties(!1,!1,!0),e="function"===r.type;for(const r of t.properties||[])if(!r.symbol&&(!e||"arguments"!==r.name&&"caller"!==r.name)&&(o||xt.test(r.name))){const t=o?o+r.name.replaceAll("\\","\\\\").replaceAll(o,"\\"+o)+o:r.name,e=o&&!n?`${t}]`:void 0,s=2*Number(r.isOwn)+1*Number(r.enumerable),l="function"===r.value?.type?a:c;i.add({apply:e,label:t,type:l,boost:s})}}return e.runtimeModel.releaseObjectGroup("completion"),i}async function Lt(){const t=new ut,e=Et()?.debuggerModel.selectedCallFrame();if(!e)return t;const o=await Promise.all(e.scopeChain().map((t=>m.NamesResolver.resolveScopeInObject(t).getAllProperties(!1,!1))));for(const e of o)for(const o of e.properties||[])t.add({label:o.name,type:"function"===o.value?.type?"function":"variable"});return t}async function Ot(){const t=Dt.instance(),e=t.get("");if(e)return await e;const o=l.Runtime.experiments.isEnabled("react-native-specific-ui")?gt:yt,n=Et();if(!n)return o;const i=o.copy(),r=jt("globalThis",n).then((t=>n.globalLexicalScopeNames().then((e=>{for(const e of t.completions)i.add(e);for(const t of e||[])i.add({label:t,type:"variable"});return i}))));return t.set("",r),await r}async function Pt(t,e){const o=i.syntaxTree(t).resolveInner(e).enterUnfinishedNodesBefore(e);if("ArgList"!==o.name)return null;const n=o.parent?.getChild("Expression");if(!n)return null;const r=await async function(t,e){const o=Et();if(!o)return null;const n=e.sliceString(t.from,t.to),i=await kt(o,n,"argumentsHint");if(!i||"function"!==i.type)return null;const r=async()=>{const n=t.firstChild;return n&&"MemberExpression"===t.name?await kt(o,e.sliceString(n.from,n.to),"argumentsHint"):null};return await It(i,r,n).finally((()=>o.runtimeModel.releaseObjectGroup("argumentsHint")))}(n,t.doc);if(!r)return null;let s=0;for(let t=e;;){const e=o.childBefore(t);if(!e)break;e.type.is("Expression")&&s++,t=e.from}return()=>function(t,e){const o=document.createElement("div");o.className="cm-argumentHints";for(const n of t){const t=document.createElement("span");for(let o=0;o<n.length;o++){if(o===e||o<e&&n[o].startsWith("...")){t.appendChild(document.createElement("b")).appendChild(document.createTextNode(n[o]))}else t.appendChild(document.createTextNode(n[o]));o<n.length-1&&t.appendChild(document.createTextNode(", "))}const i=o.appendChild(document.createElement("div"));i.className="source-code",i.appendChild(document.createTextNode("ƒ(")),i.appendChild(t),i.appendChild(document.createTextNode(")"))}return{dom:o}}(r,s)}function _t(t){function e(e){for(;"ParamList"!==e.name;)e.nextSibling();const o=[];if("ParamList"===e.name&&e.firstChild()){let n="";do{switch(e.name){case"ArrayPattern":o.push(n+"arr"),n="";break;case"ObjectPattern":o.push(n+"obj"),n="";break;case"VariableDefinition":o.push(n+t.slice(e.from,e.to)),n="";break;case"Spread":n="..."}}while(e.nextSibling())}return o}try{try{const{parser:o}=i.javascript.javascriptLanguage.configure({strict:!0,top:"SingleClassItem"}),n=o.parse(t).cursor();if(n.firstChild()&&"MethodDeclaration"===n.name&&n.firstChild())return e(n);throw new Error("SingleClassItem rule is expected to have exactly one MethodDeclaration child")}catch{const{parser:o}=i.javascript.javascriptLanguage.configure({strict:!0,top:"SingleExpression"}),n=o.parse(t).cursor();if(!n.firstChild())throw new Error("SingleExpression rule is expected to have children");switch(n.name){case"ArrowFunction":case"FunctionExpression":if(!n.firstChild())throw new Error(`${n.name} rule is expected to have children`);return e(n);case"ClassExpression":if(!n.firstChild())throw new Error(`${n.name} rule is expected to have children`);do{n.nextSibling()}while("ClassBody"!==n.name);if("ClassBody"===n.name&&n.firstChild())do{if("MethodDeclaration"===n.name&&n.firstChild()){if("PropertyDefinition"===n.name&&"constructor"===t.slice(n.from,n.to))return e(n);n.parent()}}while(n.nextSibling());return[]}throw new Error("Unexpected expression")}}catch(e){throw new Error(`Failed to parse for arguments list: ${t}`,{cause:e})}}async function It(t,e,o){const n=t.description;if(!n)return null;if(!n.endsWith("{ [native code] }"))return[_t(n)];if("function () { [native code] }"===n){const e=await async function(t){const{internalProperties:e}=await t.getOwnProperties(!1);if(!e)return null;const o=e.find((t=>"[[TargetFunction]]"===t.name))?.value,n=e.find((t=>"[[BoundArgs]]"===t.name))?.value,i=e.find((t=>"[[BoundThis]]"===t.name))?.value;if(!i||!o||!n)return null;const r=await It(o,(()=>Promise.resolve(i))),s=d.RemoteObject.RemoteObject.arrayLength(n);if(!r)return null;return r.map((t=>{const e=t.findIndex((t=>t.startsWith("...")));return e>-1&&e<s?t.slice(e):t.slice(s)}))}(t);if(e)return e}const i=p.JavaScriptMetadata.JavaScriptMetadataImpl.instance(),r=/^function ([^(]*)\(/.exec(n),s=r?.[1]||o;if(!s)return null;const a=i.signaturesForNativeFunction(s);if(a)return a;const c=await e();if(!c)return null;const l=c.className;if(l){const t=i.signaturesForInstanceMethod(s,l);if(t)return t}if(c.description&&"function"===c.type&&c.description.endsWith("{ [native code] }")){const t=/^function ([^(]*)\(/.exec(c.description);if(t){const e=t[1],o=i.signaturesForStaticMethod(s,e);if(o)return o}}for(const t of await async function(t){if("number"===t.type)return["Number","Object"];if("string"===t.type)return["String","Object"];if("symbol"===t.type)return["Symbol","Object"];if("bigint"===t.type)return["BigInt","Object"];if("boolean"===t.type)return["Boolean","Object"];if("undefined"===t.type||"null"===t.subtype)return[];return await t.callFunctionJSON((function(){const t=[];for(let e=this;e;e=Object.getPrototypeOf(e))"object"==typeof e&&e.constructor?.name&&(t[t.length]=e.constructor.name);return t}),[])}(c)){const e=i.signaturesForInstanceMethod(s,t);if(e)return e}return null}var Ht=Object.freeze({__proto__:null,argumentHints:function(){return function(t){const e=i.StateEffect.define();return[i.StateField.define({create:()=>null,update(t,o){if(o.selection&&(t=null),t&&!o.changes.empty){const e=o.changes.mapPos(t.pos,-1,i.MapMode.TrackDel);t=null===e?null:{pos:e,create:t.create,above:!0}}for(const n of o.effects)n.is(e)?t={pos:o.state.selection.main.from,create:n.value,above:!0}:n.is(dt)&&(t=null);return t},provide:t=>i.showTooltip.from(t)}),i.ViewPlugin.fromClass(class{pending=-1;updateID=0;update(t){this.updateID++,t.transactions.some((t=>t.selection))&&t.state.selection.main.empty&&this.#d(t.view)}#d(t){this.pending>-1&&clearTimeout(this.pending),this.pending=window.setTimeout((()=>this.#u(t)),50)}#u(o){this.pending=-1;const{main:n}=o.state.selection;if(n.empty){const{updateID:i}=this;t(o.state,n.from).then((t=>{this.updateID!==i?this.pending<0&&this.#d(o):t?o.dispatch({effects:e.of(t)}):o.dispatch({effects:dt.of(null)})}))}}})]}(Pt)},argumentsList:_t,closeArgumentsHintsTooltip:function(t,e){return null!==t.state.field(e)&&(t.dispatch({effects:dt.of(null)}),!0)},completeInContext:async function(t,e,o=!1){const n=i.EditorState.create({doc:t+e,selection:{anchor:t.length},extensions:i.javascript.javascriptLanguage}),r=await wt(new i.CompletionContext(n,n.doc.length,o));return r?r.options.filter((t=>t.label.startsWith(e))).map((t=>({text:t.label,priority:100+(t.boost||0),isSecondary:"secondary"===t.type}))):[]},completion:function(){return i.javascript.javascriptLanguage.data.of({autocomplete:wt})},getQueryType:vt,isExpressionComplete:async function(t){const e=r.Context.Context.instance().flavor(d.RuntimeModel.ExecutionContext);if(!e)return!0;const o=await e.runtimeModel.compileScript(t,"",!1,e.id);if(!o?.exceptionDetails?.exception)return!0;const n=o.exceptionDetails.exception.description;return!!n&&(!n.startsWith("SyntaxError: Unexpected end of input")&&!n.startsWith("SyntaxError: Unterminated template literal"))},javascriptCompletionSource:wt});function At(t,{lineNumber:e,columnNumber:o}){const n=t.line(Math.max(1,Math.min(t.lines,e+1)));return Math.max(n.from,Math.min(n.to,n.from+o))}function Bt(t,e){e=Math.max(0,Math.min(e,t.length));const o=t.lineAt(e);return{lineNumber:o.number-1,columnNumber:e-o.from}}var Nt=Object.freeze({__proto__:null,toLineColumn:Bt,toOffset:At});let Rt=class extends HTMLElement{#p=this.attachShadow({mode:"open"});#m=void 0;#h=S.none;#f=[];#g;#y;#b=-1;#v=()=>{this.#b<0&&(this.#b=window.setTimeout((()=>{this.#b=-1,this.#m&&i.repositionTooltips(this.#m)}),50))};#w=new ResizeObserver(this.#v);constructor(t){super(),this.#g=t,this.#p.createChild("style").textContent=a.codeHighlighterStyles.cssText}#x(){return this.#m=new i.EditorView({state:this.state,parent:this.#p,root:this.#p,dispatch:(t,e)=>{e.update([t]),this.#S(t),t.reconfigured&&this.#C()},scrollTo:this.#y}),this.#m.scrollDOM.addEventListener("scroll",(()=>{this.#m&&(this.#y=this.#m.scrollSnapshot(),this.scrollEventHandledToSaveScrollPositionForTest())})),this.#C(),this.#E(),h.ThemeSupport.instance().addEventListener(h.ThemeChangeEvent.eventName,(()=>{const t="dark"===h.ThemeSupport.instance().themeName()?q:[];this.editor.dispatch({effects:Q.reconfigure(t)})})),this.#m}get editor(){return this.#m||this.#x()}dispatch(t){return this.editor.dispatch(t)}get state(){return this.#m?this.#m.state:(this.#g||(this.#g=i.EditorState.create({extensions:tt("")})),this.#g)}set state(t){this.#g!==t&&(this.#g=t,this.#m&&(this.#m.setState(t),this.#C()))}scrollEventHandledToSaveScrollPositionForTest(){}connectedCallback(){this.#m?this.#m.dispatch({effects:this.#y}):this.#x()}disconnectedCallback(){this.#m&&(this.#m.dispatch({effects:zt.of(null)}),this.#g=this.#m.state,this.#w.disconnect(),window.removeEventListener("resize",this.#v),this.#m.destroy(),this.#m=void 0,this.#C())}focus(){this.#m&&this.#m.focus()}#C(){const e=this.#m?this.#m.state.facet(x):S.none;if(e!==this.#h){this.#h=e;for(const[t,e]of this.#f)t.removeChangeListener(e);this.#f=[];for(const o of e){const e=({data:t})=>{const e=o.sync(this.state,t);e&&this.#m&&this.#m.dispatch({effects:e})},n=t.Settings.Settings.instance().moduleSetting(o.settingName);n.addChangeListener(e),this.#f.push([n,e])}}}#E(){const t=n.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();t&&this.#w.observe(t),window.addEventListener("resize",this.#v)}#S(t){const e=t.annotation(i.Transaction.userEvent),o=e?Vt.get(e):null;o&&this.dispatchEvent(new InputEvent("input",{inputType:o}))}revealPosition(t,e=!0){const o=this.#m;if(!o)return;const n=o.state.doc.lineAt(t.main.head),r=[];e&&(o.state.field(Wt,!1)?o.dispatch({effects:zt.of(null)}):o.dispatch({effects:i.StateEffect.appendConfig.of(Wt)}),r.push(Ft.of(n.from)));const s=o.scrollDOM.getBoundingClientRect(),a=o.coordsAtPos(t.main.head);t.main.empty?!a||a.top<s.top||a.bottom>s.bottom?r.push(i.EditorView.scrollIntoView(t.main,{y:"center"})):(a.left<s.left||a.right>s.right)&&r.push(i.EditorView.scrollIntoView(t.main,{x:"center"})):r.push(i.EditorView.scrollIntoView(t.main)),o.dispatch({selection:t,effects:r,userEvent:"select.reveal"})}createSelection(t,e){const{doc:o}=this.state,n=At(o,t);return i.EditorSelection.single(e?At(o,e):n,n)}toLineColumn(t){return Bt(this.state.doc,t)}toOffset(t){return At(this.state.doc,t)}};customElements.define("devtools-text-editor",Rt);const zt=i.StateEffect.define(),Ft=i.StateEffect.define(),Wt=i.StateField.define({create:()=>i.Decoration.none,update(t,e){!e.changes.empty&&t.size&&(t=t.map(e.changes));for(const o of e.effects)o.is(zt)?t=i.Decoration.none:o.is(Ft)&&(t=i.Decoration.set([i.Decoration.line({attributes:{class:"cm-highlightedLine"}}).range(o.value)]));return t},provide:t=>i.EditorView.decorations.from(t,(t=>t))}),Vt=new Map([["input.type","insertText"],["input.type.compose","insertCompositionText"],["input.paste","insertFromPaste"],["input.drop","insertFromDrop"],["input.complete","insertReplacementText"],["delete.selection","deleteContent"],["delete.forward","deleteContentForward"],["delete.backward","deleteContentBackward"],["delete.cut","deleteByCut"],["move.drop","deleteByDrag"],["undo","historyUndo"],["redo","historyRedo"]]);var $t=Object.freeze({__proto__:null,TextEditor:Rt});var Ut=Object.freeze({__proto__:null,TextEditorHistory:class{#k;#M;constructor(t,e){this.#k=t,this.#M=e}moveHistory(t,e=!1){const{editor:o}=this.#k,{main:n}=o.state.selection,r=-1===t;if(!e){if(!n.empty)return!1;const t=o.coordsAtPos(n.head),e=o.coordsAtPos(r?0:o.state.doc.length);if(t&&e&&(r?t.top>e.top+5:t.bottom<e.bottom-5))return!1}const s=o.state.doc.toString(),a=this.#M,c=r?a.previous(s):a.next();if(void 0===c)return!1;const l=c.length;if(o.dispatch({changes:{from:0,to:o.state.doc.length,insert:c},selection:i.EditorSelection.cursor(l),scrollIntoView:!0}),r){const t=c.search(/\n|$/);o.dispatch({selection:i.EditorSelection.cursor(t)})}return!0}historyCompletions(t){const{explicit:e,pos:o,state:n}=t,i=n.doc.toString();if(!(o===i.length)||!i.length&&!e)return null;const r=this.#M.matchingEntries(i);if(!r.size)return null;const s=[...r].map((t=>({label:t,type:"secondary",boost:-1e5})));return{from:0,to:i.length,options:s}}}});export{f as AutocompleteHistory,st as Config,lt as ExecutionPositionHighlighter,Ht as JavaScript,Nt as Position,$t as TextEditor,Ut as TextEditorHistory};

package/client/dist/chrome-devtools-ui/ui/components/text_prompt/text_prompt.js

@@ -0,0 +1,4 @@
+import*as t from"../../../core/platform/platform.js";import{html as e,render as s}from"../../lit/lit.js";var i=`:host{white-space:pre;overflow:hidden;display:flex}input{font-size:var(--sys-typescale-body3-size)}.prefix{flex:none;font-weight:var(--ref-typeface-weight-medium);font-size:var(--sys-typescale-body3-size);color:var(--sys-color-primary)}.text-prompt-input{flex:auto;position:relative}.text-prompt-input input{width:100%;border:none;outline:none;position:absolute;left:0;padding:0;z-index:2;color:var(--sys-color-on-surface);background-color:transparent;line-height:var(--sys-typescale-body3-line-height)}.text-prompt-input .suggestion{color:var(--sys-color-on-surface-subtle);line-height:var(--sys-typescale-body3-line-height);position:absolute;left:0;z-index:1}\n/*# sourceURL=${import.meta.resolve("./textPrompt.css")} */\n`;class n extends Event{static eventName="promptinputchanged";data;constructor(t){super(n.eventName),this.data=t}}class o extends HTMLElement{#t=this.attachShadow({mode:"open"});#e="";#s="";#i="";set data(t){this.#e=t.ariaLabel,this.#s=t.prefix,this.#i=t.suggestion,this.#n()}get data(){return{ariaLabel:this.#e,prefix:this.#s,suggestion:this.#i}}focus(){this.#o().focus()}#o(){const t=this.#t.querySelector(".input");if(!t)throw new Error("Expected an input element!");return t}moveCaretToEndOfInput(){this.setSelectedRange(this.#r().length,this.#r().length)}onInput(){this.#a().value=this.#r(),this.dispatchEvent(new n(this.#r()))}onKeyDown(e){e.key===t.KeyboardUtilities.ENTER_KEY&&e.preventDefault()}setSelectedRange(t,e){if(t<0)throw new RangeError("Selected range start must be a nonnegative integer");const s=this.#r().length;e>s&&(e=s),e<t&&(e=t),this.#o().setSelectionRange(t,e)}setPrefix(t){this.#s=t,this.#n()}setSuggestion(t){this.#i=t,this.#a().value+=this.#i,this.#n()}setText(t){this.#o().value=t,this.#a().value=this.#r(),this.#o().hasFocus()&&(this.moveCaretToEndOfInput(),this.#o().scrollIntoView())}#a(){const t=this.#t.querySelector(".suggestion");if(!t)throw new Error("Expected an suggestion element!");return t}#r(){return this.#o().value||""}#n(){const t=e`
+      <style>${i}</style>
+      <span class="prefix">${this.#s} </span>
+      <span class="text-prompt-input"><input class="input" aria-label=${this.#e} spellcheck="false" @input=${this.onInput} @keydown=${this.onKeyDown}/><input class="suggestion" tabindex=-1 aria-label=${this.#e+" Suggestion"}></span>`;s(t,this.#t,{host:this})}}customElements.define("devtools-text-prompt",o);var r=Object.freeze({__proto__:null,PromptInputEvent:n,TextPrompt:o});export{r as TextPrompt};

package/client/dist/chrome-devtools-ui/ui/components/tooltips/tooltips.js

@@ -0,0 +1,7 @@
+import*as t from"../../lit/lit.js";import*as e from"../../visual_logging/visual_logging.js";var o=`:host{--tooltip-viewport-distance:var(--sys-size-5);margin:0;background:none;border:none;padding:0;overflow:visible;position-area:bottom;position-visibility:anchors-visible;justify-self:anchor-center;position-try-fallbacks:flip-block;& .container{width:max-content;margin:var(--sys-size-2);font:var(--sys-typescale-body4-regular);color:var(--sys-color-inverse-on-surface);background-color:var(--sys-color-inverse-surface);box-shadow:var(--sys-elevation-level2);border-radius:var(--sys-shape-corner-extra-small);padding:var(--sys-size-4) var(--sys-size-5)}}:host([variant='rich']){justify-self:unset;margin:0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0;position-area:bottom span-right;position-try-fallbacks:--bottom-left,--bottom-center,--top-right,--top-left,--top-center;& .container{max-width:calc(100vw - 2 * (var(--tooltip-viewport-distance) + var(--sys-size-8) + var(--sys-size-3)));margin-inline:0;margin-block:var(--sys-size-3);color:var(--sys-color-on-surface);background-color:var(--sys-color-base-container-elevated);border-radius:var(--sys-shape-corner-small);padding:var(--sys-size-6) var(--sys-size-8);overflow:auto}}@position-try --bottom-left{position-area:bottom span-left;margin:0 0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance)}@position-try --top-right{position-area:top span-right;margin:var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 0}@position-try --top-left{position-area:top span-left;margin:var(--tooltip-viewport-distance) 0 0 var(--tooltip-viewport-distance)}@position-try --bottom-center{justify-self:anchor-center;position-area:bottom;margin:0 var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) var(--tooltip-viewport-distance)}@position-try --top-center{justify-self:anchor-center;position-area:top;margin:var(--tooltip-viewport-distance) var(--tooltip-viewport-distance) 0 var(--tooltip-viewport-distance)}\n/*# sourceURL=${import.meta.resolve("./tooltip.css")} */\n`;const{html:i}=t;class s extends HTMLElement{static observedAttributes=["id","variant","jslogcontext"];static lastOpenedTooltipId=null;#t=this.attachShadow({mode:"open"});#e=null;#o=null;#i=!1;#s=null;get open(){return this.matches(":popover-open")}get useHotkey(){return this.hasAttribute("use-hotkey")??!1}set useHotkey(t){t?this.setAttribute("use-hotkey",""):this.removeAttribute("use-hotkey")}get useClick(){return this.hasAttribute("use-click")??!1}set useClick(t){t?this.setAttribute("use-click",""):this.removeAttribute("use-click")}get hoverDelay(){return this.hasAttribute("hover-delay")?Number(this.getAttribute("hover-delay")):200}set hoverDelay(t){this.setAttribute("hover-delay",t.toString())}get variant(){return"rich"===this.getAttribute("variant")?"rich":"simple"}set variant(t){this.setAttribute("variant",t)}get jslogContext(){return this.getAttribute("jslogcontext")}set jslogContext(t){this.setAttribute("jslogcontext",t),this.#r()}get anchor(){return this.#e}constructor(t){if(super(),t&&(this.id=t.id),t?.variant&&(this.variant=t.variant),t?.jslogContext&&(this.jslogContext=t.jslogContext),t?.anchor){if((t.anchor.getAttribute("aria-details")??t.anchor.getAttribute("aria-describedby"))!==t.id)throw new Error("aria-details or aria-describedby must be set on the anchor");this.#e=t.anchor}}attributeChangedCallback(t,e,o){this.isConnected&&("id"===t?(this.#n(),this.#a(),s.lastOpenedTooltipId===e&&(s.lastOpenedTooltipId=o)):"jslogcontext"===t&&this.#r())}connectedCallback(){this.#a(),this.#h(),this.#l(),t.render(i`
+      <style>${o}</style>
+      <!-- Wrapping it into a container, so that the tooltip doesn't disappear when the mouse moves from the anchor to the tooltip. -->
+      <div class="container">
+        <slot></slot>
+      </div>
+    `,this.#t,{host:this}),s.lastOpenedTooltipId===this.id&&this.showPopover()}disconnectedCallback(){this.#n(),this.#s?.disconnect()}showTooltip=t=>{t&&"buttons"in t&&t.buttons||(this.#o&&window.clearTimeout(this.#o),this.#o=window.setTimeout((()=>{this.showPopover(),s.lastOpenedTooltipId=this.id}),this.hoverDelay))};hideTooltip=t=>{this.#o&&window.clearTimeout(this.#o),t&&"rich"===this.variant&&t.target===this.#e&&t.relatedTarget instanceof Node&&this.contains(t.relatedTarget)||(!t||"rich"!==this.variant||t.relatedTarget!==this&&t.relatedTarget?.parentElement!==this)&&(this.open&&s.lastOpenedTooltipId===this.id&&(s.lastOpenedTooltipId=null),this.#o=window.setTimeout((()=>{this.hidePopover()}),this.hoverDelay))};toggle=()=>{this.#i||this.togglePopover()};#r(){this.jslogContext&&this.#e?(e.setMappedParent(this,this.#e),this.setAttribute("jslog",e.popover(this.jslogContext).parent("mapped").toString())):this.removeAttribute("jslog")}#l(){this.hasAttribute("role")||this.setAttribute("role","tooltip"),this.setAttribute("popover",this.useClick?"auto":"manual"),this.#r()}#c(t){t.stopPropagation()}#p=t=>{"closed"===t.newState&&(this.#i=!0)};#d=t=>{"closed"===t.newState&&(this.#i=!1)};#v=t=>{(t.altKey&&"ArrowDown"===t.key||"Escape"===t.key&&this.open)&&(this.toggle(),t.consume(!0))};#h(){this.#e&&(this.useClick?this.#e.addEventListener("click",this.toggle):(this.#e.addEventListener("mouseenter",this.showTooltip),this.useHotkey?this.#e.addEventListener("keydown",this.#v):this.#e.addEventListener("focus",this.showTooltip),this.#e.addEventListener("blur",this.hideTooltip),this.#e.addEventListener("mouseleave",this.hideTooltip),this.addEventListener("mouseleave",this.hideTooltip))),this.addEventListener("click",this.#c),this.addEventListener("mouseup",this.#c),this.addEventListener("beforetoggle",this.#p),this.addEventListener("toggle",this.#d)}#n(){this.#o&&window.clearTimeout(this.#o),this.#e&&(this.#e.removeEventListener("click",this.toggle),this.#e.removeEventListener("mouseenter",this.showTooltip),this.#e.removeEventListener("focus",this.showTooltip),this.#e.removeEventListener("blur",this.hideTooltip),this.#e.removeEventListener("keydown",this.#v),this.#e.removeEventListener("mouseleave",this.hideTooltip)),this.removeEventListener("mouseleave",this.hideTooltip),this.removeEventListener("click",this.#c),this.removeEventListener("mouseup",this.#c),this.removeEventListener("beforetoggle",this.#p),this.removeEventListener("toggle",this.#d)}#a(){if(!this.#e){const t=this.getAttribute("id");if(!t)throw new Error("<devtools-tooltip> must have an id.");const e=this.getRootNode();if(e.querySelectorAll(`#${t}`)?.length>1)throw new Error("Duplicate <devtools-tooltip> ids found.");const o=e.querySelector(`[aria-describedby="${t}"]`),i=e.querySelector(`[aria-details="${t}"]`),s=o??i;if(!s)throw new Error(`No anchor for tooltip with id ${t} found.`);if(!(s instanceof HTMLElement))throw new Error("Anchor must be an HTMLElement.");this.#e=s,"rich"===this.variant&&o&&console.warn(`The anchor for tooltip ${t} was defined with "aria-describedby". For rich tooltips "aria-details" is more appropriate.`)}const t=`--devtools-tooltip-${this.id}-anchor`;this.#e.style.anchorName=t,this.style.positionAnchor=t,this.#u(this.#e),this.#r()}#u(t){null!==t.parentElement&&(this.#s&&this.#s.disconnect(),this.#s=new MutationObserver((e=>{for(const o of e)"childList"===o.type&&[...o.removedNodes].includes(t)&&(this.#o&&window.clearTimeout(this.#o),this.hidePopover())})),this.#s.observe(t.parentElement,{childList:!0}))}}customElements.define("devtools-tooltip",s);var r=Object.freeze({__proto__:null,Tooltip:s});export{r as Tooltip};

package/client/dist/chrome-devtools-ui/ui/components/tree_outline/tree_outline.js

@@ -0,0 +1,32 @@
+import*as e from"../../../core/platform/platform.js";import*as t from"../../lit/lit.js";import*as r from"../../visual_logging/visual_logging.js";import*as o from"../code_highlighter/code_highlighter.js";import*as n from"../helpers/helpers.js";import*as i from"../render_coordinator/render_coordinator.js";var s=`:host{--list-group-padding:16px}li{border:2px solid transparent;list-style:none;text-overflow:ellipsis;min-height:12px}.compact{border:0}.tree-item:hover{background-color:var(--sys-color-state-hover-on-subtle)}.tree-node-key{white-space:var(--override-key-whitespace-wrapping);min-width:0;flex-grow:1}.arrow-icon{display:block;user-select:none;mask-image:var(--image-file-arrow-collapse);background-color:var(--icon-default);margin-top:-2px;margin-right:3px;content:"";text-shadow:none;height:14px;width:14px;overflow:hidden;flex:none}ul{margin:0;padding:0}ul[role="group"]{padding-left:var(--list-group-padding)}li:not(.parent) > .arrow-and-key-wrapper > .arrow-icon{mask-size:0}li.parent.expanded > .arrow-and-key-wrapper > .arrow-icon{mask-image:var(--image-file-arrow-drop-down)}li.is-top-level{border-top:var(--override-top-node-border)}li.is-top-level:last-child{border-bottom:var(--override-top-node-border)}:host([animated]) li:not(.is-top-level){animation-name:slideIn;animation-duration:150ms;animation-timing-function:cubic-bezier(0,0,0.3,1);animation-fill-mode:forwards}@keyframes slideIn{from{transform:translateY(-5px);opacity:0%}to{transform:none;opacity:100%}}.arrow-and-key-wrapper{display:flex;align-content:center;align-items:center;& ::selection{background-color:var(--sys-color-state-focus-select);color:currentcolor}}[role="treeitem"]:focus{outline:0}ul[role="tree"]:focus-within [role="treeitem"].selected > .arrow-and-key-wrapper{background-color:var(--sys-color-tonal-container)}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-icon{vertical-align:sub}@media (forced-colors: active){.arrow-icon{background-color:ButtonText}ul[role="tree"]:focus-within [role="treeitem"].selected{outline:solid 1px ButtonText}}\n/*# sourceURL=${import.meta.resolve("./treeOutline.css")} */\n`;function a(e){return"children"in e}class d extends t.Directive.Directive{constructor(e){if(super(e),e.type!==t.Directive.PartType.ATTRIBUTE)throw new Error("TrackDOMNodeToTreeNode directive must be used as an attribute.")}update(e,[t,r]){const o=e.element;if(!(o instanceof HTMLLIElement))throw new Error("trackTreeNodeToDOMNode must be used on <li> elements.");t.set(o,r)}render(e,t){}}const l=t.Directive.directive(d),c=e=>{const t=e.parentElement?.parentElement;if(t&&t instanceof HTMLLIElement){const e=t.nextElementSibling;return e&&e instanceof HTMLLIElement?e:c(t)}return null},p=e=>{const t=e.querySelector(':scope > [role="group"] > [role="treeitem"]:first-child');if(!t)throw new Error("Could not find child of expanded node.");return t},h=e=>null!==e.getAttribute("aria-expanded"),u=e=>h(e)&&"true"===e.getAttribute("aria-expanded"),f=e=>{const t=e.querySelector(':scope > [role="group"] > [role="treeitem"]:last-child');if(!t)throw new Error("Could not find child of expanded node.");return u(t)?f(t):t},m=e=>{let t=e.parentElement;if(!t)return null;for(;t&&"treeitem"!==t.getAttribute("role")&&t instanceof HTMLLIElement==!1;)t=t.parentElement;return t},w=new WeakMap,g=async e=>{if(!e.children)throw new Error("Asked for children of node that does not have any children.");const t=w.get(e);if(t)return t;const r=await e.children();return w.set(e,r),r},N=async(e,t)=>{for(const r of e){const e=await v(r,t,[r]);if(null!==e)return e}return null},v=async(e,t,r)=>{if(e.id===t)return r;if(e.children){const o=await g(e);for(const e of o){const o=await v(e,t,[...r,e]);if(null!==o)return o}}return null},y=e=>{const{currentDOMNode:t,currentTreeNode:r,direction:o,setNodeExpandedState:n}=e;if(!r)return t;if("ArrowDown"===o){if(u(t))return p(t);const e=(e=>{const t=e.nextElementSibling;return t&&t instanceof HTMLLIElement?t:null})(t);if(e)return e;const r=c(t);if(r)return r}else{if("ArrowRight"===o)return h(t)?u(t)?p(t):(n(r,!0),t):t;if("ArrowUp"===o){const e=(e=>{const t=e.previousElementSibling;return t&&t instanceof HTMLLIElement?t:null})(t);if(e)return u(e)?f(e):e;const r=m(t);if(r&&r instanceof HTMLLIElement)return r}else if("ArrowLeft"===o){if(u(t))return n(r,!1),t;const e=m(t);if(e&&e instanceof HTMLLIElement)return e}}return t};var T=Object.freeze({__proto__:null,findNextNodeForTreeOutlineKeyboardNavigation:y,getNodeChildren:g,getPathToTreeNode:N,isExpandableNode:a,trackDOMNodeToTreeNode:l});const{html:E,Directives:{ifDefined:x}}=t;class b extends Event{static eventName="itemselected";data;constructor(e){super(b.eventName,{bubbles:!0,composed:!0}),this.data={node:e}}}class S extends Event{static eventName="itemmouseover";data;constructor(e){super(S.eventName,{bubbles:!0,composed:!0}),this.data={node:e}}}class k extends Event{static eventName="itemmouseout";data;constructor(e){super(k.eventName,{bubbles:!0,composed:!0}),this.data={node:e}}}class I extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=[];#r=new Map;#o=new WeakMap;#n=!1;#i=null;#s=null;#a=(e,t)=>("string"!=typeof e.treeNodeData&&console.warn(`The default TreeOutline renderer simply stringifies its given value. You passed in ${JSON.stringify(e.treeNodeData,null,2)}. Consider providing a different defaultRenderer that can handle nodes of this type.`),E`${String(e.treeNodeData)}`);#d;#l=!1;#c=!1;#p=!1;static get observedAttributes(){return["nowrap","toplevelbordercolor"]}attributeChangedCallback(e,t,r){switch(e){case"nowrap":this.#h(r);break;case"toplevelbordercolor":this.#u(r)}}connectedCallback(){this.#u(this.getAttribute("toplevelbordercolor")),this.#h(this.getAttribute("nowrap"))}get data(){return{tree:this.#t,defaultRenderer:this.#a}}set data(e){this.#a=e.defaultRenderer,this.#t=e.tree,this.#d=e.filter,this.#l=e.compact||!1,this.#n||(this.#s=this.#t[0]),this.#f()}async expandRecursively(e=2){await Promise.all(this.#t.map((t=>this.#m(t,0,e)))),await this.#f()}async collapseAllNodes(){this.#r.clear(),await this.#f()}async expandToAndSelectTreeNode(e){return await this.expandToAndSelectTreeNodeId(e.id)}async expandToAndSelectTreeNodeId(e){const t=await N(this.#t,e);if(null===t)throw new Error(`Could not find node with id ${e} in the tree.`);t.forEach(((e,r)=>{r<t.length-1&&this.#w(e,!0)})),this.#i=e,await this.#f()}expandNodeIds(e){return e.forEach((e=>this.#r.set(e,!0))),this.#f()}focusNodeId(e){return this.#i=e,this.#f()}async collapseChildrenOfNode(e){const t=this.#o.get(e);t&&(await this.#g(t),await this.#f())}#h(e){this.style.setProperty("--override-key-whitespace-wrapping",null!==e?"nowrap":"initial")}#u(e){this.style.setProperty("--override-top-node-border",e?`1px solid ${e}`:"")}async#g(e){if(!a(e)||!this.#N(e))return;const t=await this.#v(e),r=Promise.all(t.map((e=>this.#g(e))));await r,this.#w(e,!1)}async#y(e,t){const r=await g(e),o=[];for(const e of r){const r=t(e.treeNodeData),n=this.#T(e)||e.id===this.#i,i=this.#r.get(e.id);if("SHOW"===r||n||i)o.push(e);else if("FLATTEN"===r&&a(e)){const r=await this.#y(e,t);o.push(...r)}}return o}async#v(e){const t=await g(e),r=this.#d;if(!r)return t;const o=await this.#y(e,r);return o.length?o:t}#w(e,t){this.#r.set(e.id,t)}#N(e){return this.#r.get(e.id)||!1}async#m(e,t,r){if(!a(e))return;if(this.#w(e,!0),t===r||!a(e))return;const o=await this.#v(e);await Promise.all(o.map((e=>this.#m(e,t+1,r))))}#E(e){return t=>{t.stopPropagation(),a(e)&&(this.#w(e,!this.#N(e)),this.#f())}}#x(e){e.stopPropagation();const t=null!==this.getAttribute("clickabletitle"),r=e.currentTarget,o=this.#o.get(r);t&&o&&a(o)&&this.#w(o,!this.#N(o)),this.#b(r)}async#b(e){const t=this.#o.get(e);t&&(this.#s=t,await this.#f(),this.dispatchEvent(new b(t)),i.write("DOMNode focus",(()=>{e.focus()})))}#S(e){if("Home"===e){const e=this.#e.querySelector('ul[role="tree"] > li[role="treeitem"]');e&&this.#b(e)}else if("End"===e){const e=this.#e.querySelectorAll('li[role="treeitem"]'),t=e[e.length-1];t&&this.#b(t)}}async#k(e,t){const r=this.#o.get(t);if(!r)return;const o=y({currentDOMNode:t,currentTreeNode:r,direction:e,setNodeExpandedState:(e,t)=>this.#w(e,t)});await this.#b(o)}#I(e){const t=this.#o.get(e);if(t&&a(t)){const e=this.#N(t);this.#w(t,!e),this.#f()}}async#A(t){if(!(t.target instanceof HTMLLIElement))throw new Error("event.target was not an <li> element");"Home"===t.key||"End"===t.key?(t.preventDefault(),this.#S(t.key)):e.KeyboardUtilities.keyIsArrowKey(t.key)?(t.preventDefault(),await this.#k(t.key,t.target)):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.#I(t.target))}#D(e){this.#i=null,this.#b(e)}#T(e){return!!this.#s&&e.id===this.#s.id}#M(e,{depth:o,setSize:i,positionInSet:s}){let d;const c=this.#N(e);if(a(e)&&c){const r=this.#v(e).then((e=>e.map(((t,r)=>this.#M(t,{depth:o+1,setSize:e.length,positionInSet:r})))));d=E`<ul role="group">${t.Directives.until(r)}</ul>`}else d=t.nothing;const p=this.#T(e)?0:-1,h=t.Directives.classMap({expanded:a(e)&&c,parent:a(e),selected:this.#T(e),"is-top-level":0===o,compact:this.#l}),u=a(e)?c?"true":"false":void 0;let f;return f=e.renderer?e.renderer(e,{isExpanded:c}):this.#a(e,{isExpanded:c}),E`
+      <li role="treeitem"
+        tabindex=${p}
+        aria-setsize=${i}
+        aria-expanded=${x(u)}
+        aria-level=${o+1}
+        aria-posinset=${s+1}
+        class=${h}
+        jslog=${r.treeItem(e.jslogContext).track({click:!0,keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End"})}
+        @click=${this.#x}
+        track-dom-node-to-tree-node=${l(this.#o,e)}
+        on-render=${n.Directives.nodeRenderedCallback((t=>{t instanceof HTMLLIElement&&this.#i&&e.id===this.#i&&this.#D(t)}))}
+      >
+        <span class="arrow-and-key-wrapper"
+          @mouseover=${()=>{this.dispatchEvent(new S(e))}}
+          @mouseout=${()=>{this.dispatchEvent(new k(e))}}
+        >
+          <span class="arrow-icon" @click=${this.#E(e)} jslog=${r.expand().track({click:!0})}>
+          </span>
+          <span class="tree-node-key" data-node-key=${e.treeNodeData}>${f}</span>
+        </span>
+        ${d}
+      </li>
+    `}async#f(){if(!this.#c)return this.#c=!0,await i.write("TreeOutline render",(()=>{t.render(E`
+      <style>${s}</style>
+      <style>${o.codeHighlighterStyles.cssText}</style>
+      <div class="wrapping-container">
+        <ul role="tree" @keydown=${this.#A}>
+          ${this.#t.map(((e,t)=>this.#M(e,{depth:0,setSize:this.#t.length,positionInSet:t})))}
+        </ul>
+      </div>
+      `,this.#e,{host:this})})),this.#n=!0,this.#c=!1,this.#p?(this.#p=!1,await this.#f()):void 0;this.#p=!0}}customElements.define("devtools-tree-outline",I);var A=Object.freeze({__proto__:null,ItemMouseOutEvent:k,ItemMouseOverEvent:S,ItemSelectedEvent:b,TreeOutline:I,defaultRenderer:function(e){return E`${e.treeNodeData}`}});export{A as TreeOutline,T as TreeOutlineUtils};

package/client/dist/chrome-devtools-ui/ui/legacy/components/color_picker/color_picker.js

@@ -0,0 +1 @@
+import*as t from"../../../../core/common/common.js";import*as e from"../../../../core/platform/platform.js";import*as o from"../../legacy.js";import*as s from"../../../../core/host/host.js";import*as r from"../../../../core/i18n/i18n.js";import*as n from"../../../../core/root/root.js";import*as a from"../../../components/icon_button/icon_button.js";import*as i from"../../../../core/sdk/sdk.js";import*as l from"../../../components/srgb_overlay/srgb_overlay.js";import*as c from"../../../visual_logging/visual_logging.js";const h=t=>t.map((t=>e.StringUtilities.stringifyWithPrecision(t,2))),d=t=>`${t[0]} ${t[1]} ${t[2]} / ${t[3]}`,p={rgb:{label:"RGBA",toValues:function(t){return h(t.as("rgba").canonicalRGBA())},fromValues:function(e){return t.Color.parse(`rgb(${d(e)})`)}},hsl:{label:"HSLA",toValues:function(t){const e=h(t.as("hsla").canonicalHSLA());return e[1]=e[1]+"%",e[2]=e[2]+"%",e},fromValues:function(e){return t.Color.parse(`hsl(${d(e)})`)}},hwb:{label:"HWBA",toValues:function(t){const e=h(t.as("hwba").canonicalHWBA());return e[1]=e[1]+"%",e[2]=e[2]+"%",e},fromValues:function(e){return t.Color.parse(`hwb(${d(e)})`)}},lch:{label:"lchA",toValues:function(t){const e=t.as("lch");return h([e.l,e.c,e.h,e.alpha??1])},fromValues:function(e){return t.Color.parse(`lch(${d(e)})`)}},oklch:{label:"lchA",toValues:function(t){const e=t.as("oklch");return h([e.l,e.c,e.h,e.alpha??1])},fromValues:function(e){return t.Color.parse(`oklch(${d(e)})`)}},lab:{label:"labA",toValues:function(t){const e=t.as("lab");return h([e.l,e.a,e.b,e.alpha??1])},fromValues:function(e){return t.Color.parse(`lab(${d(e)})`)}},oklab:{label:"labA",toValues:function(t){const e=t.as("oklab");return h([e.l,e.a,e.b,e.alpha??1])},fromValues:function(e){return t.Color.parse(`oklab(${d(e)})`)}},srgb:{label:"RGBA",toValues:function(t){const e=t.as("srgb");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(srgb ${d(e)})`)}},"srgb-linear":{label:"RGBA",toValues:function(t){const e=t.as("srgb-linear");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(srgb-linear ${d(e)})`)}},"display-p3":{label:"RGBA",toValues(t){const e=t.as("display-p3");return h([e.p0,e.p1,e.p2,1])},fromValues:e=>t.Color.parse(`color(display-p3 ${d(e)})`)},"a98-rgb":{label:"RGBA",toValues:function(t){const e=t.as("a98-rgb");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(a98-rgb ${d(e)})`)}},"prophoto-rgb":{label:"RGBA",toValues:function(t){const e=t.as("prophoto-rgb");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(prophoto-rgb ${d(e)})`)}},rec2020:{label:"RGBA",toValues:function(t){const e=t.as("rec2020");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(rec2020 ${d(e)})`)}},xyz:{label:"xyzA",toValues:function(t){const e=t.as("xyz");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(xyz ${d(e)})`)}},"xyz-d50":{label:"xyzA",toValues:function(t){const e=t.as("xyz-d50");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(xyz-d50 ${d(e)})`)}},"xyz-d65":{label:"xyzA",toValues:function(t){const e=t.as("xyz-d65");return h([e.p0,e.p1,e.p2,e.alpha??1])},fromValues:function(e){return t.Color.parse(`color(xyz-d65 ${d(e)})`)}}};var u=Object.freeze({__proto__:null,colorFormatSpec:p});const g={noContrastInformationAvailable:"No contrast information available",contrastRatio:"Contrast ratio",showMore:"Show more",pickBackgroundColor:"Pick background color",toggleBackgroundColorPicker:"Toggle background color picker",useSuggestedColorStoFixLow:"Use suggested color {PH1}to fix low contrast",apca:"APCA",aa:"AA",placeholderWithColon:": {PH1}",aaa:"AAA",showLess:"Show less"},m=r.i18n.registerUIStrings("ui/legacy/components/color_picker/ContrastDetails.ts",g),C=r.i18n.getLocalizedString.bind(void 0,m);class b extends t.ObjectWrapper.ObjectWrapper{contrastInfo;elementInternal;toggleMainColorPicker;expandedChangedCallback;colorSelectedCallback;expandedInternal;passesAA;contrastUnknown;visibleInternal;noContrastInfoAvailable;contrastValueBubble;contrastValue;contrastValueBubbleIcons;expandButton;expandedDetails;contrastThresholds;contrastAA;contrastPassFailAA;contrastAAA;contrastPassFailAAA;contrastAPCA;contrastPassFailAPCA;chooseBgColor;bgColorPickerButton;bgColorPickedBound;bgColorSwatch;constructor(t,e,s,r,n){super(),this.contrastInfo=t,this.elementInternal=e.createChild("div","spectrum-contrast-details collapsed"),this.toggleMainColorPicker=s,this.expandedChangedCallback=r,this.colorSelectedCallback=n,this.expandedInternal=!1,this.passesAA=!0,this.contrastUnknown=!1,this.visibleInternal=!1,this.noContrastInfoAvailable=e.createChild("div","no-contrast-info-available"),this.noContrastInfoAvailable.textContent=C(g.noContrastInformationAvailable),this.noContrastInfoAvailable.classList.add("hidden");const i=this.elementInternal.createChild("div");i.addEventListener("click",this.topRowClicked.bind(this));const l=i.createChild("div","container");o.UIUtils.createTextChild(l,C(g.contrastRatio)),this.contrastValueBubble=l.createChild("span","contrast-details-value"),this.contrastValue=this.contrastValueBubble.createChild("span"),this.contrastValueBubbleIcons=[],this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(a.Icon.create("checkmark"))),this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(a.Icon.create("check-double"))),this.contrastValueBubbleIcons.push(this.contrastValueBubble.appendChild(a.Icon.create("clear"))),this.contrastValueBubbleIcons.forEach((t=>t.addEventListener("click",(t=>{b.showHelp(),t.consume(!1)}))));const c=l.createChild("devtools-toolbar","expand");this.expandButton=new o.Toolbar.ToolbarButton(C(g.showMore),"chevron-down"),this.expandButton.addEventListener("Click",this.expandButtonClicked.bind(this)),o.ARIAUtils.setExpanded(this.expandButton.element,!1),c.appendToolbarItem(this.expandButton),this.expandedDetails=this.elementInternal.createChild("div","expanded-details"),o.ARIAUtils.setControls(this.expandButton.element,this.expandedDetails),this.contrastThresholds=this.expandedDetails.createChild("div","contrast-thresholds"),this.contrastAA=this.contrastThresholds.createChild("div","contrast-threshold"),this.contrastPassFailAA=this.contrastAA.createChild("div","contrast-pass-fail"),this.contrastAAA=this.contrastThresholds.createChild("div","contrast-threshold"),this.contrastPassFailAAA=this.contrastAAA.createChild("div","contrast-pass-fail"),this.contrastAPCA=this.contrastThresholds.createChild("div","contrast-threshold"),this.contrastPassFailAPCA=this.contrastAPCA.createChild("div","contrast-pass-fail"),this.chooseBgColor=this.expandedDetails.createChild("div","contrast-choose-bg-color"),this.chooseBgColor.textContent=C(g.pickBackgroundColor);const h=this.expandedDetails.createChild("div","background-color"),d=h.createChild("devtools-toolbar","spectrum-eye-dropper");this.bgColorPickerButton=new o.Toolbar.ToolbarToggle(C(g.toggleBackgroundColorPicker),"color-picker","color-picker-filled"),this.bgColorPickerButton.addEventListener("Click",this.toggleBackgroundColorPickerInternal.bind(this,void 0,!0)),d.appendToolbarItem(this.bgColorPickerButton),this.bgColorPickedBound=this.bgColorPicked.bind(this),this.bgColorSwatch=new v(h),this.contrastInfo.addEventListener("ContrastInfoUpdated",this.update.bind(this))}showNoContrastInfoAvailableMessage(){this.noContrastInfoAvailable.classList.remove("hidden")}hideNoContrastInfoAvailableMessage(){this.noContrastInfoAvailable.classList.add("hidden")}computeSuggestedColor(e){const o=this.contrastInfo.color(),s=this.contrastInfo.bgColor();if(!o||!s)return;if("APCA"===e){const e=this.contrastInfo.contrastRatioAPCAThreshold();if(null===e)return;return t.Color.findFgColorForContrastAPCA(o,s,e+1)}const r=this.contrastInfo.contrastRatioThreshold(e);return r?t.Color.findFgColorForContrast(o,s,r+.1):void 0}onSuggestColor(t){const e=this.computeSuggestedColor(t);e&&this.colorSelectedCallback(e)}createFixColorButton(t,e){const s=t.createChild("button","contrast-fix-button"),r=e.asString(this.contrastInfo.colorFormat()),n=r?r+" ":"",a=C(g.useSuggestedColorStoFixLow,{PH1:n});return o.ARIAUtils.setLabel(s,a),o.Tooltip.Tooltip.install(s,a),s.tabIndex=0,s.style.backgroundColor=n,s}update(){if(this.contrastInfo.isNull())return this.showNoContrastInfoAvailableMessage(),void this.setVisible(!1);this.setVisible(!0),this.hideNoContrastInfoAvailableMessage();const t=n.Runtime.experiments.isEnabled("apca"),o=this.contrastInfo.color(),s=this.contrastInfo.bgColor();if(t){const t=this.contrastInfo.contrastRatioAPCA();if(null===t||!s||!o)return this.contrastUnknown=!0,this.contrastValue.textContent="",this.contrastValueBubble.classList.add("contrast-unknown"),this.chooseBgColor.classList.remove("hidden"),this.contrastThresholds.classList.add("hidden"),void this.showNoContrastInfoAvailableMessage();this.contrastUnknown=!1,this.chooseBgColor.classList.add("hidden"),this.contrastThresholds.classList.remove("hidden"),this.contrastValueBubble.classList.remove("contrast-unknown"),this.contrastValue.textContent=`${e.NumberUtilities.floor(t,2)}%`;const r=this.contrastInfo.contrastRatioAPCAThreshold(),n=!(!t||!r)&&Math.abs(t)>=r;this.contrastPassFailAPCA.removeChildren();const i=this.contrastPassFailAPCA.createChild("span","contrast-link-label");if(i.textContent=C(g.apca),null!==r&&(this.contrastPassFailAPCA.createChild("span").textContent=`: ${r.toFixed(2)}%`),n){const t=new a.Icon.Icon;t.data={iconName:"checkmark",color:"var(--icon-checkmark-green)",width:"20px",height:"14px"},this.contrastPassFailAPCA.appendChild(t)}else{const t=new a.Icon.Icon;t.data={iconName:"clear",color:"var(--icon-error)",width:"14px",height:"14px"},this.contrastPassFailAPCA.appendChild(t);const e=this.computeSuggestedColor("APCA");if(e){this.createFixColorButton(this.contrastPassFailAPCA,e).addEventListener("click",(()=>this.onSuggestColor("APCA")))}}return i.addEventListener("click",(t=>b.showHelp())),this.elementInternal.classList.toggle("contrast-fail",!n),this.contrastValueBubble.classList.toggle("contrast-aa",n),void this.bgColorSwatch.setColors(o,s)}const r=this.contrastInfo.contrastRatio();if(!r||!s||!o)return this.contrastUnknown=!0,this.contrastValue.textContent="",this.contrastValueBubble.classList.add("contrast-unknown"),this.chooseBgColor.classList.remove("hidden"),this.contrastThresholds.classList.add("hidden"),void this.showNoContrastInfoAvailableMessage();this.contrastUnknown=!1,this.chooseBgColor.classList.add("hidden"),this.contrastThresholds.classList.remove("hidden"),this.contrastValueBubble.classList.remove("contrast-unknown"),this.contrastValue.textContent=String(e.NumberUtilities.floor(r,2)),this.bgColorSwatch.setColors(o,s);const i=this.contrastInfo.contrastRatioThreshold("aa")||0;this.passesAA=(this.contrastInfo.contrastRatio()||0)>=i,this.contrastPassFailAA.removeChildren();const l=this.contrastPassFailAA.createChild("span","contrast-link-label");if(l.textContent=C(g.aa),this.contrastPassFailAA.createChild("span").textContent=C(g.placeholderWithColon,{PH1:i.toFixed(1)}),this.passesAA){const t=new a.Icon.Icon;t.data={iconName:"checkmark",color:"var(--icon-checkmark-green)",width:"20px",height:"14px"},this.contrastPassFailAA.appendChild(t)}else{const t=new a.Icon.Icon;t.data={iconName:"clear",color:"var(--icon-error)",width:"14px",height:"14px"},this.contrastPassFailAA.appendChild(t);const e=this.computeSuggestedColor("aa");if(e){this.createFixColorButton(this.contrastPassFailAA,e).addEventListener("click",(()=>this.onSuggestColor("aa")))}}const c=this.contrastInfo.contrastRatioThreshold("aaa")||0,h=(this.contrastInfo.contrastRatio()||0)>=c;this.contrastPassFailAAA.removeChildren();const d=this.contrastPassFailAAA.createChild("span","contrast-link-label");if(d.textContent=C(g.aaa),this.contrastPassFailAAA.createChild("span").textContent=C(g.placeholderWithColon,{PH1:c.toFixed(1)}),h){const t=new a.Icon.Icon;t.data={iconName:"checkmark",color:"var(--icon-checkmark-green)",width:"20px",height:"14px"},this.contrastPassFailAAA.appendChild(t)}else{const t=new a.Icon.Icon;t.data={iconName:"clear",color:"var(--icon-error)",width:"14px",height:"14px"},this.contrastPassFailAAA.appendChild(t);const e=this.computeSuggestedColor("aaa");if(e){this.createFixColorButton(this.contrastPassFailAAA,e).addEventListener("click",(()=>this.onSuggestColor("aaa")))}}[l,d].forEach((t=>t.addEventListener("click",(()=>b.showHelp())))),this.elementInternal.classList.toggle("contrast-fail",!this.passesAA),this.contrastValueBubble.classList.toggle("contrast-aa",this.passesAA&&!h),this.contrastValueBubble.classList.toggle("contrast-aaa",h)}static showHelp(){o.UIUtils.openInNewTab("https://web.dev/color-and-contrast-accessibility/")}setVisible(t){this.visibleInternal=t,this.elementInternal.classList.toggle("hidden",!t)}visible(){return this.visibleInternal}element(){return this.elementInternal}expandButtonClicked(){const t=this.contrastValueBubble.getComponentSelection();t&&t.empty(),this.toggleExpanded()}topRowClicked(t){const e=this.contrastValueBubble.getComponentSelection();e&&e.empty(),this.toggleExpanded(),t.consume(!0)}toggleExpanded(){this.expandedInternal=!this.expandedInternal,o.ARIAUtils.setExpanded(this.expandButton.element,this.expandedInternal),this.elementInternal.classList.toggle("collapsed",!this.expandedInternal),this.expandedInternal?(this.toggleMainColorPicker(!1),this.expandButton.setGlyph("chevron-up"),this.expandButton.setTitle(C(g.showLess)),this.contrastUnknown&&this.toggleBackgroundColorPickerInternal(!0)):(this.toggleBackgroundColorPickerInternal(!1),this.expandButton.setGlyph("chevron-down"),this.expandButton.setTitle(C(g.showMore))),this.expandedChangedCallback()}collapse(){this.elementInternal.classList.remove("expanded"),this.toggleBackgroundColorPickerInternal(!1),this.toggleMainColorPicker(!1)}expanded(){return this.expandedInternal}backgroundColorPickerEnabled(){return this.bgColorPickerButton.isToggled()}toggleBackgroundColorPicker(t){this.toggleBackgroundColorPickerInternal(t,!1)}toggleBackgroundColorPickerInternal(t,e=!0){void 0===t&&(t=this.bgColorPickerButton.isToggled()),e&&this.dispatchEventToListeners("BackgroundColorPickerWillBeToggled",t),s.InspectorFrontendHost.InspectorFrontendHostInstance.setEyeDropperActive(t),t?s.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(s.InspectorFrontendHostAPI.Events.EyeDropperPickedColor,this.bgColorPickedBound):s.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(s.InspectorFrontendHostAPI.Events.EyeDropperPickedColor,this.bgColorPickedBound)}bgColorPicked({data:e}){const o=[e.r,e.g,e.b,(e.a/2.55|0)/100],r=t.Color.Legacy.fromRGBA(o);this.contrastInfo.setBgColor(r),this.toggleBackgroundColorPickerInternal(!1),s.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront()}}let v=class{parentElement;swatchElement;swatchInnerElement;textPreview;constructor(t){this.parentElement=t,this.swatchElement=t.createChild("span","swatch contrast swatch-inner-white"),this.swatchInnerElement=this.swatchElement.createChild("span","swatch-inner"),this.textPreview=this.swatchElement.createChild("div","text-preview"),this.textPreview.textContent="Aa"}setColors(t,e){this.textPreview.style.color=t.asString("rgba"),this.swatchInnerElement.style.backgroundColor=e.asString("rgba"),this.swatchElement.classList.toggle("swatch-inner-white",e.as("hsl").l>.9)}};var f=Object.freeze({__proto__:null,ContrastDetails:b,Swatch:v});class x extends t.ObjectWrapper.ObjectWrapper{isNullInternal;contrastRatioInternal;contrastRatioAPCAInternal;contrastRatioThresholds;contrastRationAPCAThreshold;fgColor;bgColorInternal;colorFormatInternal;constructor(e){if(super(),this.isNullInternal=!0,this.contrastRatioInternal=null,this.contrastRatioAPCAInternal=null,this.contrastRatioThresholds=null,this.contrastRationAPCAThreshold=0,this.fgColor=null,this.bgColorInternal=null,!e)return;if(!e.computedFontSize||!e.computedFontWeight||!e.backgroundColors||1!==e.backgroundColors.length)return;this.isNullInternal=!1,this.contrastRatioThresholds=t.ColorUtils.getContrastThreshold(e.computedFontSize,e.computedFontWeight),this.contrastRationAPCAThreshold=t.ColorUtils.getAPCAThreshold(e.computedFontSize,e.computedFontWeight);const o=e.backgroundColors[0],s=t.Color.parse(o)?.asLegacyColor();s&&this.setBgColorInternal(s)}isNull(){return this.isNullInternal}setColor(t,e){this.fgColor=t,this.colorFormatInternal=e,this.updateContrastRatio(),this.dispatchEventToListeners("ContrastInfoUpdated")}colorFormat(){return this.colorFormatInternal}color(){return this.fgColor}contrastRatio(){return this.contrastRatioInternal}contrastRatioAPCA(){return this.contrastRatioAPCAInternal}contrastRatioAPCAThreshold(){return this.contrastRationAPCAThreshold}setBgColor(t){this.setBgColorInternal(t),this.dispatchEventToListeners("ContrastInfoUpdated")}setBgColorInternal(e){if(this.bgColorInternal=e,!this.fgColor)return;const o=this.fgColor.rgba();if(e.hasAlpha()){const s=t.ColorUtils.blendColors(e.rgba(),o);this.bgColorInternal=new t.Color.Legacy(s,"rgba")}this.contrastRatioInternal=t.ColorUtils.contrastRatio(o,this.bgColorInternal.rgba()),this.contrastRatioAPCAInternal=t.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(),this.bgColorInternal.rgba())}bgColor(){return this.bgColorInternal}updateContrastRatio(){this.bgColorInternal&&this.fgColor&&(this.contrastRatioInternal=t.ColorUtils.contrastRatio(this.fgColor.rgba(),this.bgColorInternal.rgba()),this.contrastRatioAPCAInternal=t.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(),this.bgColorInternal.rgba()))}contrastRatioThreshold(t){return this.contrastRatioThresholds?this.contrastRatioThresholds[t]:null}}var w=Object.freeze({__proto__:null,ContrastInfo:x});class A{contrastInfo;visible;contrastRatioSVG;contrastRatioLines;width;height;contrastRatioLineBuilder;contrastRatioLinesThrottler;drawContrastRatioLinesBound;constructor(e,s){this.contrastInfo=e,this.visible=!1,this.contrastRatioSVG=o.UIUtils.createSVGChild(s,"svg","spectrum-contrast-container fill"),this.contrastRatioLines=new Map,n.Runtime.experiments.isEnabled("apca")?this.contrastRatioLines.set("APCA",o.UIUtils.createSVGChild(this.contrastRatioSVG,"path","spectrum-contrast-line")):(this.contrastRatioLines.set("aa",o.UIUtils.createSVGChild(this.contrastRatioSVG,"path","spectrum-contrast-line")),this.contrastRatioLines.set("aaa",o.UIUtils.createSVGChild(this.contrastRatioSVG,"path","spectrum-contrast-line"))),this.width=0,this.height=0,this.contrastRatioLineBuilder=new y(this.contrastInfo),this.contrastRatioLinesThrottler=new t.Throttler.Throttler(0),this.drawContrastRatioLinesBound=this.drawContrastRatioLines.bind(this),this.contrastInfo.addEventListener("ContrastInfoUpdated",this.update.bind(this))}update(){this.visible&&!this.contrastInfo.isNull()&&(n.Runtime.experiments.isEnabled("apca")&&null===this.contrastInfo.contrastRatioAPCA()||this.contrastInfo.contrastRatio()&&this.contrastRatioLinesThrottler.schedule(this.drawContrastRatioLinesBound))}setDimensions(t,e){this.width=t,this.height=e,this.update()}setVisible(t){this.visible=t,this.contrastRatioSVG.classList.toggle("hidden",!t),this.update()}async drawContrastRatioLines(){for(const[t,e]of this.contrastRatioLines){const o=this.contrastRatioLineBuilder.drawContrastRatioLine(this.width,this.height,t);o?e.setAttribute("d",o):e.removeAttribute("d")}}}class y{contrastInfo;constructor(t){this.contrastInfo=t}drawContrastRatioLine(e,o,s){const r=n.Runtime.experiments.isEnabled("apca"),a=r?this.contrastInfo.contrastRatioAPCAThreshold():this.contrastInfo.contrastRatioThreshold(s);if(!e||!o||null===a)return null;const i=.02,l=this.contrastInfo.color(),c=this.contrastInfo.bgColor();if(!l||!c)return null;const h=l.rgba(),d=l.as("hsl").hsva(),p=c.rgba(),u=t.ColorUtils.luminance(p);let g=t.ColorUtils.blendColors(h,p);const m=t.ColorUtils.luminance(g)>u,C=r?t.ColorUtils.desiredLuminanceAPCA(u,a,m):t.Color.desiredLuminance(u,a,m);if(r&&Math.abs(Math.round(t.ColorUtils.contrastRatioByLuminanceAPCA(C,u)))<a)return null;let b=d[2],v=0;const f=[d[0],0,0,d[3]];let x=[];const w=t.Color.hsva2rgba(f);g=t.ColorUtils.blendColors(w,p);let A,y=e=>t.ColorUtils.luminance(t.ColorUtils.blendColors(t.Color.Legacy.fromHSVA(e).rgba(),p));for(n.Runtime.experiments.isEnabled("apca")&&(y=e=>t.ColorUtils.luminanceAPCA(t.ColorUtils.blendColors(t.Color.Legacy.fromHSVA(e).rgba(),p))),A=0;A<1.02;A+=i){A=Math.min(1,A),f[1]=A,f[2]=b+v*i;const s=t.Color.approachColorValue(f,p,2,C,y);if(null===s)break;v=0===A?0:(s-b)/i,b=s,x.push(x.length?"L":"M"),x.push((A*e).toFixed(2)),x.push(((1-s)*o).toFixed(2))}return A<1.02&&(A-=i,f[2]=1,A=t.Color.approachColorValue(f,p,1,C,y),null!==A&&(x=x.concat(["L",(A*e).toFixed(2),"-0.1"]))),0===x.length?null:x.join(" ")}}var k=Object.freeze({__proto__:null,ContrastOverlay:A,ContrastRatioLineBuilder:y});const E={colorClippedTooltipText:"This color was clipped to match the format's gamut. The actual result was {PH1}"},I=r.i18n.registerUIStrings("ui/legacy/components/color_picker/FormatPickerContextMenu.ts",E),P=r.i18n.getLocalizedString.bind(void 0,I);class F{#t;constructor(t){this.#t=t}async show(e,s){const{resolve:r,promise:n}=Promise.withResolvers(),a=["hex","hexa","rgb","rgba","hsl","hwb"],i=["lch","oklch","lab","oklab","srgb","srgb-linear","display-p3","a98-rgb","prophoto-rgb","rec2020","xyz","xyz-d50","xyz-d65"],l=new o.ContextMenu.ContextMenu(e,{onSoftMenuClosed:()=>r()}),c=l.section("legacy"),h=l.section("wide"),d=l.section("color-function").appendSubMenuItem("color()",!1,"color").section();if(!(this.#t instanceof t.Color.Nickname)){const t=this.#t.asLegacyColor().nickname();t&&this.addColorToSection(t,c,s)}if(!(this.#t instanceof t.Color.ShortHex)){const t=this.#t.as(1===(this.#t.alpha??1)?"hex":"hexa").shortHex();t&&this.addColorToSection(t,c,s)}for(const e of[...a,...i]){if(e===this.#t.format())continue;const o=this.#t.as(e),r=a.includes(e)?c:o instanceof t.Color.ColorFunction?d:h;this.addColorToSection(o,r,s)}await l.show(),await n}addColorToSection(e,o,s){if(e instanceof t.Color.Legacy){const t=1!==(this.#t.alpha??1);if(null!==e.alpha!==t)return}const r=e.asString();if(!r)return;let n;e.isGamutClipped()&&(n=new a.Icon.Icon,n.data={iconName:"warning",color:"var(--icon-default)",width:"16px",height:"16px"},n.style.marginLeft="1px",n.style.marginTop="-1px",n.style.minWidth="16px",n.style.minHeight="16px");const i=n?P(E.colorClippedTooltipText,{PH1:e.getAsRawString()??"none"}):void 0;o.appendItem(r,(()=>s(e)),{additionalElement:n,tooltip:i,jslogContext:e.isGamutClipped()?"color":"clipped-color"})}}var B=Object.freeze({__proto__:null,FormatPickerContextMenu:F}),S={cssText:`:host{width:232px;height:319px;user-select:none;overflow:hidden}:selection{background-color:var(--sys-color-tonal-container);color:var(--sys-color-on-tonal-container)}.spectrum-color{position:relative;width:232px;height:127px;border-radius:2px 2px 0 0;overflow:hidden;flex:none;touch-action:none}.spectrum-dragger,\n.spectrum-slider{user-select:none}.spectrum-dragger{border-radius:12px;height:12px;width:12px;border:1px solid var(--sys-color-surface);cursor:move;z-index:1;position:absolute;top:0;left:0;background:var(--sys-color-inverse-surface);box-shadow:var(--drop-shadow)}.spectrum-slider{position:absolute;top:-1px;cursor:ew-resize;width:13px;height:13px;border-radius:13px;background-color:var(--sys-color-neutral-container);box-shadow:var(--drop-shadow)}.spectrum-color:focus .spectrum-dragger{border:1px solid var(--sys-color-state-focus-ring)}.spectrum-tools{position:relative;height:110px;width:100%;flex:none}.spectrum-hue{top:16px;background:linear-gradient(to left in hsl longer hue,#f00 0 100%)}.spectrum-hue.display-p3{background:linear-gradient(to left in hsl longer hue,color(display-p3 1 0 0) 0 100%)}.spectrum-alpha{top:35px;background-image:var(--image-file-checker);background-size:12px 11px}.spectrum-alpha-background{height:100%;border-radius:2px}.spectrum-hue,\n.spectrum-alpha{position:absolute;left:86px;width:130px;height:11px;border-radius:2px;touch-action:none}.spectrum-hue:focus-visible .spectrum-slider,\n.spectrum-alpha:focus-visible .spectrum-slider{border:1px solid var(--sys-color-state-focus-ring);width:14px;height:14px;border-radius:14px}.spectrum-sat,\n.-theme-preserve{background-image:linear-gradient(to right,#fff,rgb(204 154 129/0%))}.spectrum-val,\n.-theme-preserve{background-image:linear-gradient(to top,#000,rgb(204 154 129/0%))}.spectrum-contrast-details{position:relative;background-color:var(--sys-color-cdt-base-container);width:100%;height:83px;top:0;font-size:13px;color:var(--sys-color-on-surface);border-top:1px solid var(--sys-color-divider);line-height:initial;overflow:hidden;flex:none}.spectrum-contrast-details.collapsed{height:36px;flex:none}.spectrum-contrast-details devtools-toolbar.expand{position:absolute;right:6px;top:6px;margin:0}.spectrum-contrast-details.visible{display:initial}.spectrum-contrast-details div.container{margin:10px}.spectrum-contrast-details .expanded-details{display:flex;margin:12px 12px 0 4px}.spectrum-contrast-details.collapsed .expanded-details{display:none}.contrast-pass-fail{margin-left:0.5em;display:flex;align-items:center}.contrast-choose-bg-color{margin:8px 0 0 5px;font-style:italic}.spectrum-contrast-details .contrast-choose-bg-color,\n.spectrum-contrast-details .contrast-thresholds{width:150px}.contrast-threshold:first-child{margin-bottom:5px}.contrast-fix-button{cursor:pointer;font-size:13px;padding:0;margin:0 0 0 10px;background:0;width:12px;height:12px;border:1px solid var(--sys-color-neutral-outline);display:inline-block;position:relative}.contrast-fix-button::after{content:' ';width:13px;height:13px;background-image:var(--image-file-refresh);background-size:contain;position:absolute;left:5.5px;top:3.5px;background-color:var(--sys-color-cdt-base-container);border-radius:50%}.contrast-fix-button:hover,\n.contrast-fix-button:focus{border:1px solid var(--sys-color-state-focus-ring);transform:scale(1.2)}.contrast-link-label{cursor:pointer}.contrast-link-label:hover{text-decoration:underline}.spectrum-contrast-details .background-color{position:absolute;flex:none;right:12px}.spectrum-eye-dropper{width:32px;height:24px;position:relative;left:8px;top:17px;cursor:pointer}.spectrum-contrast-details .spectrum-eye-dropper{top:2px;right:34px;position:absolute;left:auto}.contrast-details-value{color:var(--sys-color-on-surface);margin:1px 5px;user-select:text}.contrast-pass-fail devtools-icon{margin-left:5px}.contrast-details-value devtools-icon{display:none;margin-left:5px;color:var(--sys-color-on-surface)}.spectrum-contrast-details .toolbar-state-on devtools-icon{color:var(--sys-color-token-subtle)}devtools-icon.clear{transform:scale(0.7);color:var(--icon-error)}devtools-icon.checkmark,\ndevtools-icon.check-double{color:var(--icon-checkmark-green)}.spectrum-contrast-details .contrast-details-value.contrast-unknown{background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-on-surface);width:3em;text-align:center}.contrast-details-value .clear,\n.contrast-details-value .checkmark,\n.contrast-details-value .check-double{cursor:pointer;vertical-align:-5px}.spectrum-contrast-details.contrast-fail .contrast-details-value .clear,\n.contrast-details-value.contrast-aa .checkmark,\n.contrast-details-value.contrast-aaa .check-double{display:inline-block}.swatch{width:32px;height:32px;margin:0;position:absolute;top:15px;left:44px;background-image:var(--image-file-checker);border-radius:16px}.swatch-inner,\n.swatch-overlay{position:absolute;width:100%;height:100%;display:inline-block;border-radius:16px}.swatch-inner-white{border:1px solid var(--sys-color-neutral-outline)}.swatch-overlay{cursor:pointer;opacity:0%;padding:4px}.swatch-overlay:hover,\n.swatch-overlay:focus-visible{background-color:var(--color-background-inverted-opacity-30);opacity:100%}.swatch-overlay:active{background-color:var(--color-background-inverted-opacity-50)}devtools-icon.copy-color-icon{color:var(--sys-color-cdt-base-container);margin-top:2px;margin-left:2px}.spectrum-text{position:absolute;top:60px;left:16px}.spectrum-text-value{display:inline-block;width:40px;overflow:hidden;text-align:center;margin-right:6px;line-height:20px;padding:0;color:var(--sys-color-on-surface);border:1px solid var(--sys-color-neutral-outline);white-space:nowrap}.spectrum-text-label{letter-spacing:39.5px;margin-top:8px;display:block;color:var(--sys-color-state-disabled);margin-left:16px;width:174px}.spectrum-text-hex > .spectrum-text-value{width:178px}.spectrum-text-hex > .spectrum-text-label{letter-spacing:normal;margin-left:0;text-align:center}.spectrum-switcher{border-radius:2px;height:20px;width:20px;padding:2px;border:none;background:none;margin:0}.spectrum-display-switcher{top:72px;position:absolute;right:10px}.spectrum-switcher:hover{background-color:var(--sys-color-state-hover-on-subtle)}.spectrum-switcher:focus-visible{background-color:var(--sys-color-state-focus-highlight)}.spectrum-palette-container{border-top:1px solid var(--sys-color-divider);position:relative;width:100%;padding:6px 24px 6px 6px;display:flex;flex-wrap:wrap}.spectrum-palette{display:flex;flex-wrap:wrap;width:198px}.spectrum-palette-color{width:12px;height:12px;flex:0 0 12px;border-radius:2px;margin:6px;cursor:pointer;position:relative;border:1px solid var(--sys-color-divider);background-position:-1px!important;z-index:14}.spectrum-palette-color-shadow{position:absolute;opacity:0%;margin:0;top:-5px;left:3px;border:0;border-radius:1px;width:11px;height:11px}.spectrum-palette-color:hover:not(.spectrum-shades-shown)\n  > .spectrum-palette-color-shadow,\n.spectrum-palette-color:focus:not(.spectrum-shades-shown)\n  > .spectrum-palette-color-shadow{opacity:20%}.spectrum-palette-color:hover:not(.spectrum-shades-shown)\n  > .spectrum-palette-color-shadow:first-child,\n.spectrum-palette-color:focus:not(.spectrum-shades-shown)\n  > .spectrum-palette-color-shadow:first-child{opacity:60%;top:-3px;left:1px}.palette-color-shades{position:absolute;background-color:var(--sys-color-cdt-base-container);height:228px;width:28px;box-shadow:var(--drop-shadow);z-index:14;border-radius:2px;transform-origin:0 228px;margin-top:16px;margin-left:-8px}.spectrum-palette > .spectrum-palette-color.spectrum-shades-shown{z-index:15}.palette-color-shades > .spectrum-palette-color{margin:8px 0 0;margin-left:8px;width:12px}.spectrum-palette > .spectrum-palette-color{transition:transform 100ms cubic-bezier(0,0,0.2,1);will-change:transform;z-index:13}.palette-preview > .spectrum-palette-color{margin-top:1px}.spectrum-palette > .spectrum-palette-color.empty-color{border-color:transparent}.spectrum-palette-color:not(.has-material-shades):focus{border:1px solid var(--sys-color-state-focus-ring);transform:scale(1.4)}.palette-color-shades > .spectrum-palette-color:not(.empty-color):hover,\n.spectrum-palette\n  > .spectrum-palette-color:not(.empty-color, .has-material-shades):hover{transform:scale(1.15)}.add-color-toolbar{margin-left:-3px;margin-top:-1px}.spectrum-palette-switcher{right:10px;top:0;margin-top:9px;position:absolute}.palette-panel{width:100%;position:absolute;top:100%;display:flex;flex-direction:column;background-color:var(--sys-color-cdt-base-container);z-index:14;transition:transform 200ms cubic-bezier(0,0,0.2,1),visibility 0s 200ms;border-top:1px solid var(--sys-color-divider);visibility:hidden}.palette-panel-showing > .palette-panel{transform:translateY(-100%);transition-delay:0s;visibility:visible}.palette-panel > devtools-toolbar{position:absolute;right:6px;top:6px}.palette-panel > div{flex:0 0 38px;border-bottom:1px solid var(--sys-color-divider);padding:12px;line-height:14px;color:var(--sys-color-on-surface)}.palette-panel > div.palette-title{font-size:14px;line-height:16px;color:var(--sys-color-on-surface);flex-basis:40px}div.palette-preview{display:flex;cursor:pointer}.palette-preview-title{flex:0 0 84px}.palette-preview:focus-visible,\n.palette-preview:hover{background-color:var(--sys-color-state-hover-on-subtle)}.spectrum-overlay{z-index:13;visibility:hidden;background-color:hsl(0deg 0% 0%/50%);opacity:0%;transition:opacity 100ms cubic-bezier(0,0,0.2,1),visibility 0s 100ms}.palette-panel-showing > .spectrum-overlay{transition-delay:0s;visibility:visible;opacity:100%}.spectrum-contrast-container{width:100%;height:100%}.spectrum-contrast-line,\n:host-context(.theme-with-dark-background) .spectrum-contrast-line{fill:none;stroke:#fff;opacity:70%;stroke-width:1.5px}.delete-color-toolbar{position:absolute;right:0;top:0;background-color:var(--sys-color-cdt-base-container);visibility:hidden;z-index:3;width:36px;display:flex;align-items:center;padding-left:4px;bottom:2px;border-bottom-right-radius:2px}@keyframes showDeleteToolbar{from{opacity:0%}to{opacity:100%}}.delete-color-toolbar.dragging{visibility:visible;animation:showDeleteToolbar 100ms 150ms cubic-bezier(0,0,0.2,1) backwards}.delete-color-toolbar-active{background-color:var(--sys-color-state-hover-on-subtle);color:var(--sys-color-cdt-base-container)}.swatch.contrast{width:30px;height:30px;position:absolute;top:0;right:0;left:auto;background-image:var(--image-file-checker);border-radius:15px;display:flex;align-items:center;justify-content:center}.swatch.contrast .swatch-overlay{padding:0}.background-color .text-preview{color:var(--sys-color-inverse-surface);font-size:16px;position:relative;padding-bottom:2px}.swatch.contrast devtools-icon{margin:-2px}.no-contrast-info-available{border-top:1px solid var(--sys-color-divider);position:relative;width:100%;padding:10px;justify-content:center;display:flex;flex-wrap:wrap}@media (forced-colors: active){:host{border:1px solid canvastext!important}.spectrum-color{forced-color-adjust:none}.spectrum-switcher:hover,\n  .spectrum-switcher:focus-visible{forced-color-adjust:none;background-color:Highlight!important}:host-context(.theme-with-dark-background) .spectrum-switcher{filter:unset}.spectrum-switcher:hover svg,\n  .spectrum-switcher:focus-visible svg{fill:HighlightText}.swatch{forced-color-adjust:none}.swatch-inner,\n  .swatch-overlay,\n  .swatch-inner-white{border:1px solid ButtonText}.swatch-overlay:hover,\n  .swatch-overlay:focus-visible{background-color:canvas!important}.spectrum-slider{forced-color-adjust:none;background-color:ButtonText!important;box-shadow:0 1px 4px 0 ButtonFace!important}}\n/*# sourceURL=${import.meta.resolve("./spectrum.css")} */\n`};const L={toggleColorPicker:"Eye dropper [{PH1}]",changeHue:"Change hue",changeAlpha:"Change alpha",hex:"HEX",changeColorFormat:"Change color format",previewPalettes:"Preview palettes",addToPalette:"Add to palette",colorPalettes:"Color Palettes",returnToColorPicker:"Return to color picker",colorS:"Color {PH1}",longclickOrLongpressSpaceToShow:"Long-click or long-press space to show alternate shades of {PH1}",removeColor:"Remove color",removeAllToTheRight:"Remove all to the right",clearPalette:"Clear palette",sInS:"{PH1} in {PH2}",copyColorToClipboard:"Copy color to clipboard",pressArrowKeysMessage:"Press arrow keys with or without modifiers to move swatch position. Arrow key with Shift key moves position largely, with Ctrl key it is less and with Alt key it is even less"},D=r.i18n.registerUIStrings("ui/legacy/components/color_picker/Spectrum.ts",L),T=r.i18n.getLocalizedString.bind(void 0,D),R=new WeakMap,U=new WeakMap,H=["srgb","rgb","hex","hsl","hwb"],V="EyeDropper"in window;function M(t){return!H.includes(t)}function O(e,o){const s=t.Color.Legacy.fromHSVA(o);switch(e){case"display-p3":{const e=t.Color.hsva2rgba(o);return new t.Color.ColorFunction("display-p3",e[0],e[1],e[2],e[3],void 0)}case"srgb":return s}}class z extends(t.ObjectWrapper.eventMixin(o.Widget.VBox)){colorInternal;gamut="srgb";colorElement;colorDragElement;dragX;dragY;colorPickerButton;swatch;hueElement;hueSlider;alphaElement;alphaElementBackground;alphaSlider;displayContainer;textValues;textLabels;hexContainer;hexValue;contrastInfo;srgbOverlay;contrastOverlay;contrastDetails;contrastDetailsBackgroundColorPickedToggledBound;palettes;palettePanel;palettePanelShowing;paletteSectionContainer;paletteContainer;shadesContainer;deleteIconToolbar;deleteButton;addColorToolbar;colorPickedBound;hsv;hueAlphaWidth;dragWidth;dragHeight;colorDragElementHeight;slideHelperWidth;numPaletteRowsShown;selectedColorPalette;customPaletteSetting;colorOffset;closeButton;paletteContainerMutable;shadesCloseHandler;dragElement;dragHotSpotX;dragHotSpotY;colorNameInternal;colorFormat="rgb";eyeDropperAbortController=null;isFormatPickerShown=!1;colorStringInternal;constructor(t){super(!0),this.registerRequiredCSS(S),this.contentElement.tabIndex=0,this.contentElement.setAttribute("jslog",`${c.dialog("colorPicker").parent("mapped").track({keydown:"Enter|Escape"})}`),this.colorElement=this.contentElement.createChild("div","spectrum-color"),this.colorElement.tabIndex=0,this.colorElement.setAttribute("jslog",`${c.canvas("color").track({click:!0,drag:!0,keydown:"ArrowLeft|ArrowRight|ArrowDown|ArrowUp"})}`),this.setDefaultFocusedElement(this.colorElement),this.colorElement.addEventListener("keydown",this.onSliderKeydown.bind(this,f.bind(this)));const s=T(L.pressArrowKeysMessage);o.ARIAUtils.setLabel(this.colorElement,s),o.ARIAUtils.markAsApplication(this.colorElement),this.colorDragElement=this.colorElement.createChild("div","spectrum-sat fill").createChild("div","spectrum-val fill").createChild("div","spectrum-dragger"),this.dragX=0,this.dragY=0;const r=this.contentElement.createChild("div","spectrum-tools"),n=r.createChild("devtools-toolbar","spectrum-eye-dropper"),i=o.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction("elements.toggle-eye-dropper"),h=i[0]?.descriptors.flatMap((t=>t.name.split(" + ")))[0];this.colorPickerButton=new o.Toolbar.ToolbarToggle(T(L.toggleColorPicker,{PH1:h||""}),"color-picker","color-picker-filled","color-eye-dropper"),this.colorPickerButton.setToggled(!0),this.colorPickerButton.addEventListener("Click",this.toggleColorPicker.bind(this,void 0)),n.appendToolbarItem(this.colorPickerButton),this.colorPickerButton.element.setAttribute("jslog",`${c.colorEyeDropper().track({click:!0})}`),this.swatch=new Y(r),this.hueElement=r.createChild("div","spectrum-hue"),this.hueElement.setAttribute("jslog",`${c.slider("hue").track({click:!0,drag:!0,keydown:"ArrowLeft|ArrowRight|ArrowDown|ArrowUp"})}`),this.hueElement.tabIndex=0,this.hueElement.addEventListener("keydown",this.onSliderKeydown.bind(this,C.bind(this))),o.ARIAUtils.setLabel(this.hueElement,T(L.changeHue)),o.ARIAUtils.markAsSlider(this.hueElement,0,360),this.hueSlider=this.hueElement.createChild("div","spectrum-slider"),this.alphaElement=r.createChild("div","spectrum-alpha"),this.alphaElement.setAttribute("jslog",`${c.slider("alpha").track({click:!0,drag:!0,keydown:"ArrowLeft|ArrowRight|ArrowDown|ArrowUp"})}`),this.alphaElement.tabIndex=0,this.alphaElement.addEventListener("keydown",this.onSliderKeydown.bind(this,v.bind(this))),o.ARIAUtils.setLabel(this.alphaElement,T(L.changeAlpha)),o.ARIAUtils.markAsSlider(this.alphaElement,0,1),this.alphaElementBackground=this.alphaElement.createChild("div","spectrum-alpha-background"),this.alphaSlider=this.alphaElement.createChild("div","spectrum-slider"),this.displayContainer=r.createChild("div","spectrum-text source-code"),o.ARIAUtils.markAsPoliteLiveRegion(this.displayContainer,!0),this.textValues=[];for(let t=0;t<4;++t){const e=o.UIUtils.createInput("spectrum-text-value");e.setAttribute("jslog",`${c.value().track({change:!0,keydown:"ArrowUp|ArrowDown"}).context(t)}`),this.displayContainer.appendChild(e),e.maxLength=4,this.textValues.push(e),e.addEventListener("keydown",this.inputChanged.bind(this),!1),e.addEventListener("input",this.inputChanged.bind(this),!1),e.addEventListener("wheel",this.inputChanged.bind(this),!1),e.addEventListener("paste",this.pasted.bind(this),!1)}this.textLabels=this.displayContainer.createChild("div","spectrum-text-label"),this.hexContainer=r.createChild("div","spectrum-text spectrum-text-hex source-code"),o.ARIAUtils.markAsPoliteLiveRegion(this.hexContainer,!0),this.hexValue=o.UIUtils.createInput("spectrum-text-value"),this.hexValue.setAttribute("jslog",`${c.value("hex").track({keydown:"ArrowUp|ArrowDown",change:!0})}`),this.hexContainer.appendChild(this.hexValue),this.hexValue.maxLength=9,this.hexValue.addEventListener("keydown",this.inputChanged.bind(this),!1),this.hexValue.addEventListener("input",this.inputChanged.bind(this),!1),this.hexValue.addEventListener("wheel",this.inputChanged.bind(this),!1),this.hexValue.addEventListener("paste",this.pasted.bind(this),!1);const d=this.hexContainer.createChild("div","spectrum-text-label");d.textContent=T(L.hex),o.ARIAUtils.setLabel(this.hexValue,d.textContent);const p=r.createChild("button","spectrum-display-switcher spectrum-switcher");p.setAttribute("jslog",`${c.dropDown("color-format").track({click:!0})}`),x(p),o.UIUtils.setTitle(p,T(L.changeColorFormat)),p.tabIndex=0,p.addEventListener("click",(t=>{this.showFormatPicker(t)})),o.UIUtils.installDragHandle(this.hueElement,this.dragStart.bind(this,C.bind(this)),C.bind(this),null,"ew-resize","crosshair"),o.UIUtils.installDragHandle(this.alphaElement,this.dragStart.bind(this,v.bind(this)),v.bind(this),null,"ew-resize","crosshair"),o.UIUtils.installDragHandle(this.colorElement,this.dragStart.bind(this,f.bind(this)),f.bind(this),null,"move","crosshair"),t&&(this.contrastInfo=t,this.contrastOverlay=new A(this.contrastInfo,this.colorElement),this.contrastDetails=new b(this.contrastInfo,this.contentElement,this.toggleColorPicker.bind(this),this.contrastPanelExpandedChanged.bind(this),this.colorSelected.bind(this)),this.contrastDetailsBackgroundColorPickedToggledBound=this.contrastDetailsBackgroundColorPickedToggled.bind(this)),this.element.classList.add("flex-none"),this.palettes=new Map,this.palettePanel=this.contentElement.createChild("div","palette-panel"),this.palettePanel.setAttribute("jslog",`${c.section("palette-panel")}`),this.palettePanelShowing=!1,this.paletteSectionContainer=this.contentElement.createChild("div","spectrum-palette-container"),this.paletteContainer=this.paletteSectionContainer.createChild("div","spectrum-palette"),this.paletteContainer.addEventListener("contextmenu",this.showPaletteColorContextMenu.bind(this,-1)),this.shadesContainer=this.contentElement.createChild("div","palette-color-shades hidden"),this.shadesContainer.setAttribute("jslog",`${c.paletteColorShades()}`),o.UIUtils.installDragHandle(this.paletteContainer,this.paletteDragStart.bind(this),this.paletteDrag.bind(this),this.paletteDragEnd.bind(this),"default");const u=this.paletteSectionContainer.createChild("div","spectrum-palette-switcher spectrum-switcher");u.setAttribute("jslog",`${c.dropDown("palette-switcher").track({click:!0})}`),x(u),o.UIUtils.setTitle(u,T(L.previewPalettes)),o.ARIAUtils.markAsButton(u),u.tabIndex=0,self.onInvokeElement(u,(t=>{this.togglePalettePanel(!0),t.consume(!0)})),this.deleteIconToolbar=document.createElement("devtools-toolbar"),this.deleteIconToolbar.classList.add("delete-color-toolbar"),this.deleteButton=new o.Toolbar.ToolbarButton("","bin"),this.deleteIconToolbar.appendToolbarItem(this.deleteButton);this.contentElement.createChild("div","spectrum-overlay fill").addEventListener("click",this.togglePalettePanel.bind(this,!1)),this.addColorToolbar=document.createElement("devtools-toolbar"),this.addColorToolbar.classList.add("add-color-toolbar");const g=new o.Toolbar.ToolbarButton(T(L.addToPalette),"plus",void 0,"add-color");function m(t,e){const o=e,s=t.getBoundingClientRect();switch(o.key){case"ArrowLeft":case"ArrowDown":return s.left-1;case"ArrowRight":case"ArrowUp":return s.right+1;default:return e.x}}function C(t){const s=this.hsv.slice(),r=1-(m(this.hueSlider,t)-this.hueElement.getBoundingClientRect().left)/this.hueAlphaWidth;s[0]=e.NumberUtilities.clamp(r,0,1),this.innerSetColor(s,"",void 0,void 0,N.Other);const n=O(this.gamut,s).as("hsl").canonicalHSLA();o.ARIAUtils.setValueNow(this.hueElement,n[0])}function v(t){const s=this.hsv.slice(),r=(m(this.alphaSlider,t)-this.hueElement.getBoundingClientRect().left)/this.hueAlphaWidth,n=Math.round(100*r)/100;s[3]=e.NumberUtilities.clamp(n,0,1),this.innerSetColor(s,"",void 0,void 0,N.Other);const a=O(this.gamut,s).as("hsl").canonicalHSLA();o.ARIAUtils.setValueText(this.alphaElement,a[3])}function f(t){const o=this.hsv.slice(),s=function(t,e){const o=t.getBoundingClientRect(),s=o.x+o.width/2,r=o.y+o.width/2,n=function(t,e){const o=e;o.altKey?t=1:o.ctrlKey?t=10:o.shiftKey&&(t=20);return t}(o.width/4,e);switch(e.key){case"ArrowLeft":return{x:o.left-n,y:r};case"ArrowRight":return{x:o.right+n,y:r};case"ArrowDown":return{x:s,y:o.bottom+n};case"ArrowUp":return{x:s,y:o.top-n};default:return{x:e.x,y:e.y}}}(this.colorDragElement,t);this.colorOffset=this.colorElement.getBoundingClientRect(),o[1]=e.NumberUtilities.clamp((s.x-this.colorOffset.left)/this.dragWidth,0,1),o[2]=e.NumberUtilities.clamp(1-(s.y-this.colorOffset.top)/this.dragHeight,0,1),this.innerSetColor(o,"",void 0,void 0,N.Other)}function x(t){const e=new a.Icon.Icon;e.data={iconName:"fold-more",color:"var(--icon-default)",width:"16px",height:"16px"},t.appendChild(e)}g.addEventListener("Click",this.onAddColorMousedown.bind(this)),g.element.addEventListener("keydown",this.onAddColorKeydown.bind(this)),this.addColorToolbar.appendToolbarItem(g),this.colorPickedBound=this.colorPicked.bind(this),this.numPaletteRowsShown=-1,this.contentElement.addEventListener("focusout",(t=>{this.isFormatPickerShown&&t.stopImmediatePropagation()})),this.srgbOverlay=new l.SrgbOverlay.SrgbOverlay,this.loadPalettes(),new _((t=>{t.colors.length?this.addPalette(t):this.selectedColorPalette.get()===t.title&&this.paletteSelected(K)}))}dragStart(t,e){return this.colorOffset=this.colorElement.getBoundingClientRect(),t(e),!0}contrastDetailsBackgroundColorPickedToggled(t){t.data&&this.toggleColorPicker(!1)}contrastPanelExpandedChanged(){this.contrastOverlay&&this.contrastDetails&&(this.contrastOverlay.setVisible(this.contrastDetails.expanded()),this.resizeForSelectedPalette(!0),this.contrastDetails.expanded()?this.hideSrgbOverlay():this.showSrgbOverlay())}updatePalettePanel(){this.palettePanel.removeChildren();this.palettePanel.createChild("div","palette-title").textContent=T(L.colorPalettes);const t=this.palettePanel.createChild("devtools-toolbar");this.closeButton=new o.Toolbar.ToolbarButton(T(L.returnToColorPicker),"cross"),this.closeButton.addEventListener("Click",this.togglePalettePanel.bind(this,!1)),this.closeButton.element.addEventListener("keydown",this.onCloseBtnKeydown.bind(this)),this.closeButton.element.setAttribute("jslog",`${c.close().track({click:!0})}`),t.appendToolbarItem(this.closeButton);for(const t of this.palettes.values())this.palettePanel.appendChild(this.createPreviewPaletteElement(t));this.contentElement.scrollIntoView({block:"end"})}togglePalettePanel(t){this.palettePanelShowing!==t&&(t&&this.updatePalettePanel(),this.palettePanelShowing=t,this.contentElement.classList.toggle("palette-panel-showing",t),this.focusInternal())}onCloseBtnKeydown(t){(e.KeyboardUtilities.isEscKey(t)||e.KeyboardUtilities.isEnterOrSpaceKey(t))&&(this.togglePalettePanel(!1),t.consume(!0))}onSliderKeydown(t,e){switch(e.key){case"ArrowLeft":case"ArrowRight":case"ArrowDown":case"ArrowUp":t(e),e.consume(!0)}}focusInternal(){this.isShowing()&&(this.palettePanelShowing&&this.closeButton?this.closeButton.element.focus({preventScroll:!0}):this.contentElement.focus())}createPaletteColor(t,s,r){const n=document.createElement("div");return n.classList.add("spectrum-palette-color"),n.setAttribute("jslog",`${c.item().track({click:!0,drag:!0,keydown:"ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Escape|Tab"})}`),n.style.background=e.StringUtilities.sprintf("linear-gradient(%s, %s), var(--image-file-checker)",t,t),r&&n.animate([{opacity:0},{opacity:1}],{duration:100,delay:r,fill:"backwards"}),o.Tooltip.Tooltip.install(n,s||t),n}showPalette(t,e,s){this.resizeForSelectedPalette(),this.paletteContainer.removeChildren();for(let s=0;s<t.colors.length;s++){const r=e?100*s/t.colors.length:0,n=this.createPaletteColor(t.colors[s],t.colorNames[s],r);if(o.ARIAUtils.markAsButton(n),o.ARIAUtils.setLabel(n,T(L.colorS,{PH1:t.colors[s]})),n.tabIndex=-1,n.addEventListener("mousedown",this.paletteColorSelected.bind(this,t.colors[s],t.colorNames[s],Boolean(t.matchUserFormat))),n.addEventListener("focus",this.paletteColorSelected.bind(this,t.colors[s],t.colorNames[s],Boolean(t.matchUserFormat))),n.addEventListener("keydown",this.onPaletteColorKeydown.bind(this,s)),t.mutable)R.set(n,!0),U.set(n,t.colors[s]),n.addEventListener("contextmenu",this.showPaletteColorContextMenu.bind(this,s));else if(t===K){n.classList.add("has-material-shades");let e=n.createChild("div","spectrum-palette-color spectrum-palette-color-shadow");e.style.background=t.colors[s],e=n.createChild("div","spectrum-palette-color spectrum-palette-color-shadow"),e.style.background=t.colors[s];const r=T(L.longclickOrLongpressSpaceToShow,{PH1:t.colors[s]});o.Tooltip.Tooltip.install(n,r),o.ARIAUtils.setLabel(n,r),new o.UIUtils.LongClickController(n,this.showLightnessShades.bind(this,n,t.colors[s]))}this.paletteContainer.appendChild(n)}this.paletteContainer.childNodes.length>0&&(this.paletteContainer.childNodes[0].tabIndex=0),this.paletteContainerMutable=t.mutable,t.mutable?(this.paletteContainer.appendChild(this.addColorToolbar),this.paletteContainer.appendChild(this.deleteIconToolbar)):(this.addColorToolbar.remove(),this.deleteIconToolbar.remove()),this.togglePalettePanel(!1),this.focusInternal()}showLightnessShades(t,e,s){this.shadesCloseHandler&&this.shadesCloseHandler(),this.shadesContainer.classList.remove("hidden"),this.shadesContainer.removeChildren(),this.shadesContainer.animate([{transform:"scaleY(0)",opacity:"0"},{transform:"scaleY(1)",opacity:"1"}],{duration:200,easing:"cubic-bezier(0.4, 0, 0.2, 1)"});let r=this.paletteContainer.offsetTop+t.offsetTop+(t.parentElement?t.parentElement.offsetTop:0);this.contrastDetails&&(r+=this.contrastDetails.element().offsetHeight),this.shadesContainer.style.top=r+"px",this.shadesContainer.style.left=t.offsetLeft+"px",t.classList.add("spectrum-shades-shown");const n=G.get(e);if(void 0!==n)for(let e=n.length-1;e>=0;e--){const s=this.createPaletteColor(n[e],void 0,200*e/n.length+100);o.ARIAUtils.markAsButton(s),o.ARIAUtils.setLabel(s,T(L.colorS,{PH1:n[e]})),s.tabIndex=-1,s.addEventListener("mousedown",this.paletteColorSelected.bind(this,n[e],n[e],!1)),s.addEventListener("focus",this.paletteColorSelected.bind(this,n[e],n[e],!1)),s.addEventListener("keydown",this.onShadeColorKeydown.bind(this,t)),this.shadesContainer.appendChild(s)}this.shadesContainer.childNodes.length>0&&this.shadesContainer.childNodes[this.shadesContainer.childNodes.length-1].focus(),this.shadesCloseHandler=function(t){this.shadesContainer.classList.add("hidden"),t.classList.remove("spectrum-shades-shown"),this.shadesCloseHandler&&this.shadesContainer.ownerDocument.removeEventListener("mousedown",this.shadesCloseHandler,!0),delete this.shadesCloseHandler}.bind(this,t),this.shadesContainer.ownerDocument.addEventListener("mousedown",this.shadesCloseHandler,!0)}slotIndexForEvent(t){const e=t,o=e.pageX-this.paletteContainer.getBoundingClientRect().left,s=e.pageY-this.paletteContainer.getBoundingClientRect().top,r=Math.min(o/j|0,W-1),n=s/j|0;return Math.min(n*W+r,this.customPaletteSetting.get().colors.length-1)}isDraggingToBin(t){return t.pageX>this.deleteIconToolbar.getBoundingClientRect().left}paletteDragStart(t){const e=o.UIUtils.deepElementFromEvent(t);if(!e||!R.get(e))return!1;const s=this.slotIndexForEvent(t);this.dragElement=e;const r=t;return this.dragHotSpotX=r.pageX-s%W*j,this.dragHotSpotY=r.pageY-(s/W|0)*j,!0}paletteDrag(t){const e=t;if(e.pageX<this.paletteContainer.getBoundingClientRect().left||e.pageY<this.paletteContainer.getBoundingClientRect().top)return;if(!this.dragElement||void 0===this.dragHotSpotX||void 0===this.dragHotSpotY)return;const o=this.slotIndexForEvent(t),s=e.pageX-o%W*j,r=e.pageY-(o/W|0)*j,n=this.isDraggingToBin(t);this.deleteIconToolbar.classList.add("dragging"),this.deleteIconToolbar.classList.toggle("delete-color-toolbar-active",n);const a="translateX("+(s-this.dragHotSpotX)+"px) translateY("+(r-this.dragHotSpotY)+"px)";this.dragElement.style.transform=n?a+" scale(0.8)":a;const i=[...this.paletteContainer.children],l=i.indexOf(this.dragElement),c=new Map;for(const t of i)c.set(t,t.getBoundingClientRect());l!==o&&this.paletteContainer.insertBefore(this.dragElement,i[o>l?o+1:o]);for(const t of i){if(t===this.dragElement)continue;const e=c.get(t),o=t.getBoundingClientRect();!e||e.left===o.left&&e.top===o.top||t.animate([{transform:"translateX("+(e.left-o.left)+"px) translateY("+(e.top-o.top)+"px)"},{transform:"none"}],{duration:100,easing:"cubic-bezier(0, 0, 0.2, 1)"})}}paletteDragEnd(t){if(!this.dragElement)return;this.isDraggingToBin(t)&&this.dragElement.remove(),this.dragElement.style.removeProperty("transform");const e=this.paletteContainer.children,o=[];for(let t=0;t<e.length;++t){const s=U.get(e[t]);s&&o.push(s)}const s=this.customPaletteSetting.get();s.colors=o,this.customPaletteSetting.set(s),this.showPalette(s,!1),this.deleteIconToolbar.classList.remove("dragging"),this.deleteIconToolbar.classList.remove("delete-color-toolbar-active")}loadPalettes(){this.palettes.set(K.title,K);const e={title:"Custom",colors:[],colorNames:[],mutable:!0,matchUserFormat:void 0};this.customPaletteSetting=t.Settings.Settings.instance().createSetting("custom-color-palette",e);const o=this.customPaletteSetting.get();o.colorNames=o.colorNames||[],this.palettes.set(o.title,o),this.selectedColorPalette=t.Settings.Settings.instance().createSetting("selected-color-palette",$);const s=this.palettes.get(this.selectedColorPalette.get());s&&this.showPalette(s,!0)}addPalette(t){this.palettes.set(t.title,t),this.selectedColorPalette.get()===t.title&&this.showPalette(t,!0)}createPreviewPaletteElement(t){const e=document.createElement("div");e.classList.add("palette-preview"),o.ARIAUtils.markAsButton(e),e.tabIndex=0;let s;for(e.createChild("div","palette-preview-title").textContent=t.title,s=0;s<5&&s<t.colors.length;s++)e.appendChild(this.createPaletteColor(t.colors[s],t.colorNames[s]));for(;s<5;s++)e.createChild("div","spectrum-palette-color empty-color");return self.onInvokeElement(e,(e=>{this.paletteSelected(t),e.consume(!0)})),e}paletteSelected(t){this.selectedColorPalette.set(t.title),this.showPalette(t,!0)}resizeForSelectedPalette(t){const e=this.palettes.get(this.selectedColorPalette.get());if(!e)return;let o=e.colors.length;e===this.customPaletteSetting.get()&&o++;const s=Math.max(1,Math.ceil(o/W));if(this.numPaletteRowsShown===s&&!t)return;this.numPaletteRowsShown=s;let r=236;this.contrastDetails&&(this.contrastDetails.expanded()?r+=78:r+=36),this.element.style.height=r+12+24*s+"px",this.dispatchEventToListeners("SizeChanged")}paletteColorSelected(e,o,s){const r=t.Color.parse(e);r&&this.innerSetColor(r,e,o,s?this.colorFormat:r.format(),N.Other)}onPaletteColorKeydown(t,e){let o;switch(e.key){case"ArrowLeft":o=t-1;break;case"ArrowRight":o=t+1;break;case"ArrowUp":o=t-W;break;case"ArrowDown":o=t+W}void 0!==o&&o>-1&&o<this.paletteContainer.childNodes.length&&this.paletteContainer.childNodes[o].focus()}onShadeColorKeydown(t,o){const s=o.target;e.KeyboardUtilities.isEscKey(o)||"Tab"===o.key?(t.focus(),this.shadesCloseHandler&&this.shadesCloseHandler(),o.consume(!0)):"ArrowUp"===o.key&&s.previousElementSibling?(s.previousElementSibling.focus(),o.consume(!0)):"ArrowDown"===o.key&&s.nextElementSibling&&(s.nextElementSibling.focus(),o.consume(!0))}onAddColorMousedown(){this.addColorToCustomPalette()}onAddColorKeydown(t){e.KeyboardUtilities.isEnterOrSpaceKey(t)&&(this.addColorToCustomPalette(),t.consume(!0))}addColorToCustomPalette(){const t=this.customPaletteSetting.get();t.colors.push(this.colorString()),this.customPaletteSetting.set(t),this.showPalette(t,!1);const e=this.paletteContainer.querySelectorAll(".spectrum-palette-color");e[e.length-1].focus()}showPaletteColorContextMenu(t,e){if(!this.paletteContainerMutable)return;const s=new o.ContextMenu.ContextMenu(e);-1!==t&&(s.defaultSection().appendItem(T(L.removeColor),this.deletePaletteColors.bind(this,t,!1),{jslogContext:"remove-color"}),s.defaultSection().appendItem(T(L.removeAllToTheRight),this.deletePaletteColors.bind(this,t,!0),{jslogContext:"remove-all-to-the-right"})),s.defaultSection().appendItem(T(L.clearPalette),this.deletePaletteColors.bind(this,-1,!0),{jslogContext:"clear-palette"}),s.show()}deletePaletteColors(t,e){const o=this.customPaletteSetting.get();e?o.colors.splice(t+1,o.colors.length-t-1):o.colors.splice(t,1),this.customPaletteSetting.set(o),this.showPalette(o,!1)}setColor(t){this.innerSetColor(t,"",void 0,t.format(),N.Model);const e=t.as("hsl").canonicalHSLA();o.ARIAUtils.setValueNow(this.hueElement,e[0]),o.ARIAUtils.setValueText(this.alphaElement,e[3])}colorSelected(t){this.innerSetColor(t,"",void 0,void 0,N.Other)}get color(){return this.colorInternal?this.colorInternal:O(this.gamut,this.hsv)}innerSetColor(e,o,s,r,n){if(void 0!==o&&(this.colorStringInternal=o),void 0!==r&&(this.colorFormat=function(t){return"rgba"===t?"rgb":"hsla"===t?"hsl":"hwba"===t?"hwb":"hexa"===t?"hex":t}(r),this.gamut=M(this.colorFormat)?"display-p3":"srgb"),Array.isArray(e))this.colorInternal=void 0,this.hsv=e;else if(void 0!==e){this.colorInternal=e;const o=this.hsv?this.hsv[0]:null;this.hsv=function(e,o){switch(e){case"display-p3":{const e=o.as("display-p3");return[...t.Color.rgb2hsv([e.p0,e.p1,e.p2]),e.alpha||1]}case"srgb":return o.as("hsl").hsva()}}(this.gamut,e),null!==o&&e.as("lch").isHuePowerless()&&(this.hsv[0]=o)}this.colorNameInternal=s,this.contrastInfo&&this.contrastInfo.setColor(t.Color.Legacy.fromHSVA(this.hsv),this.colorFormat),this.updateHelperLocations(),this.updateUI(),n!==N.Input&&this.updateInput(),n!==N.Model&&this.dispatchEventToListeners("ColorChanged",this.colorString())}colorName(){return this.colorNameInternal}colorString(){if(this.colorStringInternal)return this.colorStringInternal;const t=this.color;let e=this.colorFormat&&this.colorFormat!==t.format()?t.asString(this.colorFormat):t.getAuthoredText()??t.asString();return e||(e="hex"===this.colorFormat?t.asString("hexa"):"hsl"===this.colorFormat?t.asString("hsla"):"hwb"===this.colorFormat?t.asString("hwba"):t.asString("rgba"),console.assert(Boolean(e)),e||"")}updateHelperLocations(){const t=this.hsv[0],e=this.hsv[1],o=this.hsv[2],s=this.hsv[3];this.dragX=e*this.dragWidth,this.dragY=this.dragHeight-o*this.dragHeight;const r=Math.max(-this.colorDragElementHeight,Math.min(this.dragWidth-this.colorDragElementHeight,this.dragX-this.colorDragElementHeight)),n=Math.max(-this.colorDragElementHeight,Math.min(this.dragHeight-this.colorDragElementHeight,this.dragY-this.colorDragElementHeight));this.colorDragElement.positionAt(r,n);const a=(1-t)*this.hueAlphaWidth-this.slideHelperWidth;this.hueSlider.style.left=a+"px";const i=s*this.hueAlphaWidth-this.slideHelperWidth;this.alphaSlider.style.left=i+"px"}updateInput(){if("hex"===this.colorFormat)this.hexContainer.hidden=!1,this.displayContainer.hidden=!0,this.hexValue.value=this.color.asString(1!==(this.color.alpha??1)?"hexa":"hex");else{this.hexContainer.hidden=!0,this.displayContainer.hidden=!1;const t=p[this.colorFormat],e=t.toValues(this.color);this.textLabels.textContent=t.label;for(let t=0;t<this.textValues.length;++t)o.ARIAUtils.setLabel(this.textValues[t],T(L.sInS,{PH1:this.textLabels.textContent.charAt(t),PH2:this.textLabels.textContent})),this.textValues[t].value=String(e[t])}}hideSrgbOverlay(){this.colorElement.contains(this.srgbOverlay)&&this.colorElement.removeChild(this.srgbOverlay)}showSrgbOverlay(){this.contrastDetails?.expanded()||"display-p3"!==this.gamut||(this.srgbOverlay.render({hue:this.hsv[0],width:this.dragWidth,height:this.dragHeight}),this.colorElement.contains(this.srgbOverlay)||this.colorElement.appendChild(this.srgbOverlay))}updateSrgbOverlay(){"display-p3"===this.gamut?this.showSrgbOverlay():this.hideSrgbOverlay()}updateUI(){this.colorElement.style.backgroundColor=O(this.gamut,[this.hsv[0],1,1,1]).asString(),this.contrastOverlay&&this.contrastOverlay.setDimensions(this.dragWidth,this.dragHeight),this.updateSrgbOverlay(),this.swatch.setColor(this.color,this.colorString()),this.colorDragElement.style.backgroundColor=this.color.asString("lch");const o=t.Color.Legacy.fromHSVA(this.hsv.slice(0,3).concat(1));this.alphaElementBackground.style.backgroundImage=e.StringUtilities.sprintf("linear-gradient(to right, rgba(0,0,0,0), %s)",o.asString("lch")),this.hueElement.classList.toggle("display-p3",M(this.colorFormat))}async showFormatPicker(t){const e=new F(this.color);this.isFormatPickerShown=!0,await e.show(t,(t=>{this.innerSetColor(t,void 0,void 0,t.format(),N.Other)})),this.isFormatPickerShown=!1}pasted(e){if(!e.clipboardData)return;const o=e.clipboardData.getData("text"),s=t.Color.parse(o);s&&(this.innerSetColor(s,o,void 0,void 0,N.Other),e.preventDefault())}inputChanged(e){const s=e.currentTarget,r=o.UIUtils.createReplacementString(s.value,e);r&&(s.value=r,s.selectionStart=0,s.selectionEnd=r.length,e.consume(!0));let n=null;if("hex"===this.colorFormat)n=t.Color.parse(this.hexValue.value);else{const t=p[this.colorFormat],e=this.textValues.map((t=>t.value));if(4!==e.length)return;n=t.fromValues(e)}n&&this.innerSetColor(n,void 0,void 0,undefined,N.Input)}wasShown(){this.hueAlphaWidth=this.hueElement.offsetWidth,this.slideHelperWidth=this.hueSlider.offsetWidth/2,this.dragWidth=this.colorElement.offsetWidth,this.dragHeight=this.colorElement.offsetHeight,this.colorDragElementHeight=this.colorDragElement.offsetHeight/2,this.innerSetColor(void 0,void 0,void 0,void 0,N.Model),V?this.colorPickerButton.setToggled(!1):this.toggleColorPicker(!0),this.contrastDetails&&this.contrastDetailsBackgroundColorPickedToggledBound&&this.contrastDetails.addEventListener("BackgroundColorPickerWillBeToggled",this.contrastDetailsBackgroundColorPickedToggledBound)}willHide(){this.toggleColorPicker(!1),this.contrastDetails&&this.contrastDetailsBackgroundColorPickedToggledBound&&this.contrastDetails.removeEventListener("BackgroundColorPickerWillBeToggled",this.contrastDetailsBackgroundColorPickedToggledBound)}async toggleColorPicker(e){if(void 0===e&&(e=this.colorPickerButton.isToggled()),this.contrastDetails&&e&&this.contrastDetails.backgroundColorPickerEnabled()&&this.contrastDetails.toggleBackgroundColorPicker(!1),V)if(V&&e){const e=new window.EyeDropper;this.eyeDropperAbortController=new AbortController;try{const o=await e.open({signal:this.eyeDropperAbortController.signal}),s=t.Color.parse(o.sRGBHex);this.innerSetColor(s??void 0,"",void 0,void 0,N.Other)}catch(t){"AbortError"!==t.name&&console.error(t)}this.colorPickerButton.setToggled(!1)}else V&&!e&&(this.eyeDropperAbortController?.abort(),this.eyeDropperAbortController=null);else s.InspectorFrontendHost.InspectorFrontendHostInstance.setEyeDropperActive(e),e?s.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(s.InspectorFrontendHostAPI.Events.EyeDropperPickedColor,this.colorPickedBound):s.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(s.InspectorFrontendHostAPI.Events.EyeDropperPickedColor,this.colorPickedBound)}colorPicked({data:e}){const o=[e.r,e.g,e.b,(e.a/2.55|0)/100],r=t.Color.Legacy.fromRGBA(o);this.innerSetColor(r,"",void 0,void 0,N.Other),s.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront()}}const N={Input:"Input",Model:"Model",Other:"Other"},j=24,W=8,$="Page colors";class _{callback;frequencyMap=new Map;constructor(t){this.callback=t;const e=[];for(const t of i.TargetManager.TargetManager.instance().models(i.CSSModel.CSSModel))for(const o of t.allStyleSheets())e.push(this.processStylesheet(o));Promise.all(e).catch((t=>{console.error(t)})).then(this.finish.bind(this))}frequencyComparator(t,e){return this.frequencyMap.get(e)-this.frequencyMap.get(t)}finish(){let e=[...this.frequencyMap.keys()];e=e.sort(this.frequencyComparator.bind(this));const o=new Map;for(;o.size<24&&e.length;){const s=e.shift(),r=t.Color.parse(s);r&&o.set(s,r)}this.callback({title:$,colors:[...o.keys()].sort((function(t,e){const s=o.get(t).as("hsl").hsva(),r=o.get(e).as("hsl").hsva();return r[1]<.12&&s[1]<.12?r[2]*r[3]-s[2]*s[3]:r[1]<.12?-1:s[1]<.12?1:r[0]===s[0]?r[1]*r[3]-s[1]*s[3]:(r[0]+.94)%1-(s[0]+.94)%1})),colorNames:[],mutable:!1,matchUserFormat:void 0})}async processStylesheet(t){let e=(await t.requestContent()).content||"";e=e.toLowerCase();const o=e.matchAll(/((?:rgb|hsl|hwb)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g);for(const{0:t,index:s}of o){if(e.indexOf(";",s)<0||e.indexOf(":",s)>-1&&e.indexOf(":",s)<e.indexOf(";",s))continue;const o=1+(this.frequencyMap.get(t)??0);this.frequencyMap.set(t,o)}}}const G=new Map([["#F44336",["#FFEBEE","#FFCDD2","#EF9A9A","#E57373","#EF5350","#F44336","#E53935","#D32F2F","#C62828","#B71C1C"]],["#E91E63",["#FCE4EC","#F8BBD0","#F48FB1","#F06292","#EC407A","#E91E63","#D81B60","#C2185B","#AD1457","#880E4F"]],["#9C27B0",["#F3E5F5","#E1BEE7","#CE93D8","#BA68C8","#AB47BC","#9C27B0","#8E24AA","#7B1FA2","#6A1B9A","#4A148C"]],["#673AB7",["#EDE7F6","#D1C4E9","#B39DDB","#9575CD","#7E57C2","#673AB7","#5E35B1","#512DA8","#4527A0","#311B92"]],["#3F51B5",["#E8EAF6","#C5CAE9","#9FA8DA","#7986CB","#5C6BC0","#3F51B5","#3949AB","#303F9F","#283593","#1A237E"]],["#2196F3",["#E3F2FD","#BBDEFB","#90CAF9","#64B5F6","#42A5F5","#2196F3","#1E88E5","#1976D2","#1565C0","#0D47A1"]],["#03A9F4",["#E1F5FE","#B3E5FC","#81D4FA","#4FC3F7","#29B6F6","#03A9F4","#039BE5","#0288D1","#0277BD","#01579B"]],["#00BCD4",["#E0F7FA","#B2EBF2","#80DEEA","#4DD0E1","#26C6DA","#00BCD4","#00ACC1","#0097A7","#00838F","#006064"]],["#009688",["#E0F2F1","#B2DFDB","#80CBC4","#4DB6AC","#26A69A","#009688","#00897B","#00796B","#00695C","#004D40"]],["#4CAF50",["#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20"]],["#8BC34A",["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E"]],["#CDDC39",["#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717"]],["#FFEB3B",["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17"]],["#FFC107",["#FFF8E1","#FFECB3","#FFE082","#FFD54F","#FFCA28","#FFC107","#FFB300","#FFA000","#FF8F00","#FF6F00"]],["#FF9800",["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100"]],["#FF5722",["#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C"]],["#795548",["#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"]],["#9E9E9E",["#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"]],["#607D8B",["#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"]]]),K={title:"Material",mutable:!1,matchUserFormat:!0,colors:[...G.keys()],colorNames:[]};class Y{colorString;swatchInnerElement;swatchOverlayElement;swatchCopyIcon;constructor(t){const e=t.createChild("span","swatch");e.setAttribute("jslog",`${c.action("copy-color").track({click:!0})}`),this.swatchInnerElement=e.createChild("span","swatch-inner"),this.swatchOverlayElement=e.createChild("span","swatch-overlay"),o.ARIAUtils.markAsButton(this.swatchOverlayElement),o.ARIAUtils.setPressed(this.swatchOverlayElement,!1),this.swatchOverlayElement.tabIndex=0,self.onInvokeElement(this.swatchOverlayElement,this.onCopyText.bind(this)),this.swatchOverlayElement.addEventListener("mouseout",this.onCopyIconMouseout.bind(this)),this.swatchOverlayElement.addEventListener("blur",this.onCopyIconMouseout.bind(this)),this.swatchCopyIcon=a.Icon.create("copy","copy-color-icon"),o.Tooltip.Tooltip.install(this.swatchCopyIcon,T(L.copyColorToClipboard)),this.swatchOverlayElement.appendChild(this.swatchCopyIcon),o.ARIAUtils.setLabel(this.swatchOverlayElement,this.swatchCopyIcon.title)}setColor(t,e){const o=t.as("lch");this.swatchInnerElement.style.backgroundColor=o.asString(),this.swatchInnerElement.classList.toggle("swatch-inner-white",o.l>90),this.colorString=e||null,this.swatchOverlayElement.hidden=!e}onCopyText(t){this.swatchCopyIcon.name="checkmark",s.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.colorString),o.ARIAUtils.setPressed(this.swatchOverlayElement,!0),t.consume()}onCopyIconMouseout(){this.swatchCopyIcon.name="copy",o.ARIAUtils.setPressed(this.swatchOverlayElement,!1)}}var X=Object.freeze({__proto__:null,ChangeSource:N,MaterialPalette:K,PaletteGenerator:_,Spectrum:z,Swatch:Y});export{u as ColorFormatSpec,f as ContrastDetails,w as ContrastInfo,k as ContrastOverlay,B as FormatPickerContextMenu,X as Spectrum};

package/client/dist/chrome-devtools-ui/ui/legacy/components/cookie_table/cookie_table.js

@@ -0,0 +1,85 @@
+import"../data_grid/data_grid.js";import*as e from"../../../../core/common/common.js";import*as t from"../../../../core/i18n/i18n.js";import*as i from"../../../../core/root/root.js";import*as o from"../../../../core/sdk/sdk.js";import*as s from"../../../../models/issues_manager/issues_manager.js";import*as a from"../../../../panels/network/forward/forward.js";import*as n from"../../../components/icon_button/icon_button.js";import{Directives as r,render as l,html as d}from"../../../lit/lit.js";import*as h from"../../legacy.js";var c={cssText:`devtools-data-grid{flex:auto}.cookies-table devtools-icon{margin-right:4px}\n/*# sourceURL=${import.meta.resolve("./cookiesTable.css")} */\n`};const{repeat:p,ifDefined:u}=r,m={session:"Session",name:"Name",value:"Value",size:"Size",editableCookies:"Editable Cookies",cookies:"Cookies",na:"N/A",showRequestsWithThisCookie:"Show requests with this cookie",showIssueAssociatedWithThis:"Show issue associated with this cookie",sourcePortTooltip:"Shows the source port (range 1-65535) the cookie was set on. If the port is unknown, this shows -1.",sourceSchemeTooltip:"Shows the source scheme (`Secure`, `NonSecure`) the cookie was set on. If the scheme is unknown, this shows `Unset`.",timeAfter:"after {date}",timeAfterTooltip:"The expiration timestamp is {seconds}, which corresponds to a date after {date}",opaquePartitionKey:"(opaque)"},k=t.i18n.registerUIStrings("ui/legacy/components/cookie_table/CookiesTable.ts",m),b=t.i18n.getLocalizedString.bind(void 0,k),g=t.i18n.getLazilyComputedLocalizedString.bind(void 0,k)(m.session);class y extends h.Widget.VBox{saveCallback;refreshCallback;selectedCallback;deleteCallback;lastEditedColumnId;data=[];cookies=[];cookieDomain;cookieToBlockedReasons;cookieToExemptionReason;view;selectedKey;editable;renderInline;schemeBindingEnabled;portBindingEnabled;constructor(e,t,o,s,a,n){super(),n||(n=(e,t,i)=>{l(d`
+          <devtools-data-grid
+               name=${e.editable?b(m.editableCookies):b(m.cookies)}
+               id="cookies-table"
+               striped
+               ?inline=${e.renderInline}
+               @edit=${e.onEdit}
+               @create=${e.onCreate}
+               @refresh=${e.onRefresh}
+               @delete=${e.onDelete}
+               @contextmenu=${e.onContextMenu}
+               @select=${e.onSelect}
+          >
+            <table>
+               <tr>
+                 <th id=${"name"} sortable ?disclosure=${e.editable} ?editable=${e.editable} long weight="24">
+                   ${b(m.name)}
+                 </th>
+                 <th id=${"value"} sortable ?editable=${e.editable} long weight="34">
+                   ${b(m.value)}
+                 </th>
+                 <th id=${"domain"} sortable weight="7" ?editable=${e.editable}>
+                   Domain
+                 </th>
+                 <th id=${"path"} sortable weight="7" ?editable=${e.editable}>
+                   Path
+                 </th>
+                 <th id=${"expires"} sortable weight="7" ?editable=${e.editable}>
+                   Expires / Max-Age
+                 </th>
+                 <th id=${"size"} sortable align="right" weight="7">
+                   ${b(m.size)}
+                 </th>
+                 <th id=${"http-only"} sortable align="center" weight="7" ?editable=${e.editable} type="boolean">
+                   HttpOnly
+                 </th>
+                 <th id=${"secure"} sortable align="center" weight="7" ?editable=${e.editable} type="boolean">
+                   Secure
+                 </th>
+                 <th id=${"same-site"} sortable weight="7" ?editable=${e.editable}>
+                   SameSite
+                 </th>
+                 <th id=${"partition-key-site"} sortable weight="7" ?editable=${e.editable}>
+                   Partition Key Site
+                 </th>
+                 <th id=${"has-cross-site-ancestor"} sortable align="center" weight="7" ?editable=${e.editable} type="boolean">
+                   Cross Site
+                 </th>
+                 <th id=${"priority"} sortable weight="7" ?editable=${e.editable}>
+                   Priority
+                 </th>
+                 ${e.schemeBindingEnabled?d`
+                 <th id=${"source-scheme"} sortable align="center" weight="7" ?editable=${e.editable} type="string">
+                   SourceScheme
+                 </th>`:""}
+                 ${e.portBindingEnabled?d`
+                <th id=${"source-port"} sortable align="center" weight="7" ?editable=${e.editable} type="number">
+                   SourcePort
+                </th>`:""}
+              </tr>
+              ${p(this.data,(e=>e.key),(t=>d`<tr data-key=${u(t.key)}
+                    ?selected=${t.key===e.selectedKey}
+                    ?inactive=${t.inactive}
+                    ?dirty=${t.dirty}
+                    ?highlighted=${t.flagged}>
+                  <td>${t.icons?.name}${t.name}</td>
+                  <td>${t.value}</td>
+                  <td>${t.icons?.domain}${t.domain}</td>
+                  <td>${t.icons?.path}${t.path}</td>
+                  <td title=${u(t.expiresTooltip)}>${t.expires}</td>
+                  <td>${t.size}</td>
+                  <td data-value=${Boolean(t["http-only"])}></td>
+                  <td data-value=${Boolean(t.secure)}>${t.icons?.secure}</td>
+                  <td>${t.icons?.["same-site"]}${t["same-site"]}</td>
+                  <td>${t["partition-key-site"]}</td>
+                  <td data-value=${Boolean(t["has-cross-site-ancestor"])}></td>
+                  <td data-value=${u(t.priorityValue)}>${t.priority}</td>
+                  ${e.schemeBindingEnabled?d`
+                    <td title=${b(m.sourceSchemeTooltip)}>${t["source-scheme"]}</td>`:""}
+                  ${e.portBindingEnabled?d`
+                    <td title=${b(m.sourcePortTooltip)}>${t["source-port"]}</td>`:""}
+                </tr>`))}
+                ${e.editable?d`<tr placeholder><tr>`:""}
+              </table>
+            </devtools-data-grid>`,i,{host:i})}),this.registerRequiredCSS(c),this.element.classList.add("cookies-table"),this.saveCallback=t,this.refreshCallback=o,this.deleteCallback=a,this.editable=Boolean(t);const{devToolsEnableOriginBoundCookies:r}=i.Runtime.hostConfig;this.schemeBindingEnabled=Boolean(r?.schemeBindingEnabled),this.portBindingEnabled=Boolean(r?.portBindingEnabled),this.view=n,this.renderInline=Boolean(e),this.selectedCallback=s,this.lastEditedColumnId=null,this.data=[],this.cookieDomain="",this.cookieToBlockedReasons=null,this.cookieToExemptionReason=null,this.requestUpdate()}setCookies(e,t,i){this.cookieToBlockedReasons=t||null,this.cookieToExemptionReason=i||null,this.cookies=e;const o=this.data.find((e=>e.key===this.selectedKey)),s=this.cookies.find((e=>e.key()===this.selectedKey));this.data=e.sort(((e,t)=>e.name().localeCompare(t.name()))).map(this.createCookieData.bind(this)),o&&this.lastEditedColumnId&&!s&&(o.inactive=!0,this.data.push(o)),this.requestUpdate()}setCookieDomain(e){this.cookieDomain=e}selectedCookie(){return this.cookies.find((e=>e.key()===this.selectedKey))||null}willHide(){this.lastEditedColumnId=null}performUpdate(){const e={data:this.data,selectedKey:this.selectedKey,editable:this.editable,renderInline:this.renderInline,schemeBindingEnabled:this.schemeBindingEnabled,portBindingEnabled:this.portBindingEnabled,onEdit:e=>this.onUpdateCookie(e.detail.node,e.detail.columnId,e.detail.valueBeforeEditing,e.detail.newText),onCreate:e=>this.onCreateCookie(e.detail),onRefresh:()=>this.refresh(),onDelete:e=>this.onDeleteCookie(e.detail),onSelect:e=>this.onSelect(e.detail),onContextMenu:e=>this.populateContextMenu(e.detail.menu,e.detail.element)};this.view(e,{},this.element)}onSelect(e){this.selectedKey=e?.dataset?.key,this.selectedCallback?.()}onDeleteCookie(e){const t=this.cookies.find((t=>t.key()===e.dataset.key));t&&this.deleteCallback&&this.deleteCallback(t,(()=>this.refresh()))}onUpdateCookie(e,t,i,o){const s=this.cookies.find((t=>t.key()===e.dataset.key)),a=this.data.find((t=>t.key===e.dataset.key));if(!a||!s)return;const n={...a,[t]:o};if(!this.isValidCookieData(n))return n.dirty=!0,void this.requestUpdate();this.lastEditedColumnId=t,this.saveCookie(n,s)}onCreateCookie(e){this.setDefaults(e),this.isValidCookieData(e)?this.saveCookie(e):(e.dirty=!0,this.requestUpdate())}setDefaults(e){void 0===e.name&&(e.name=""),void 0===e.value&&(e.value=""),void 0===e.domain&&(e.domain=this.cookieDomain),void 0===e.path&&(e.path="/"),void 0===e.expires&&(e.expires=g()),void 0===e["partition-key"]&&(e["partition-key"]="")}saveCookie(e,t){if(!this.saveCallback)return;const i=this.createCookieFromData(e);this.saveCallback(i,t??null).then((t=>{t||(e.dirty=!0),this.refresh()}))}createCookieFromData(e){const t=new o.Cookie.Cookie(e.name||"",e.value||"",null,e.priority);for(const i of["domain","path","http-only","secure","same-site","source-scheme"])i in e&&t.addAttribute(i,e[i]);return e.expires&&e.expires!==g()&&t.addAttribute("expires",new Date(e.expires).toUTCString()),"source-port"in e&&t.addAttribute("source-port",Number.parseInt(e["source-port"]||"",10)||void 0),e["partition-key-site"]&&t.setPartitionKey(e["partition-key-site"],Boolean(!!e["has-cross-site-ancestor"]&&e["has-cross-site-ancestor"])),t.setSize(e.name.length+e.value.length),t}createCookieData(e){const i=864e13,o=0===e.type(),a={name:e.name(),value:e.value()};for(const t of["http-only","secure","same-site","source-scheme","source-port"])e.hasAttribute(t)&&(a[t]=String(e.getAttribute(t)??!0));a.domain=e.domain()||(o?b(m.na):""),a.path=e.path()||(o?b(m.na):""),a.expires=e.maxAge()?t.TimeUtilities.secondsToString(Math.floor(e.maxAge())):e.expires()<0?g():e.expires()>i?b(m.timeAfter,{date:new Date(i).toISOString()}):e.expires()>0?new Date(e.expires()).toISOString():o?b(m.na):g(),e.expires()>i&&(a.expiresTooltip=b(m.timeAfterTooltip,{seconds:e.expires(),date:new Date(i).toISOString()})),a["partition-key-site"]=e.partitionKeyOpaque()?b(m.opaquePartitionKey):e.topLevelSite(),a["has-cross-site-ancestor"]=e.hasCrossSiteAncestor()?"true":"",a.size=String(e.size()),a.priority=e.priority(),a.priorityValue=["Low","Medium","High"].indexOf(e.priority());const r=this.cookieToBlockedReasons?.get(e)||[];for(const t of r){a.flagged=!0;const i=t.attribute||"name";a.icons=a.icons||{},i in a.icons?a.icons[i]&&(a.icons[i].title+="\n"+t.uiString):(a.icons[i]=new n.Icon.Icon,"name"===i&&s.RelatedIssue.hasThirdPartyPhaseoutCookieIssue(e)?(a.icons[i].name="warning-filled",a.icons[i].style.color="var(--icon-warning)",a.icons[i].style.width="14px",a.icons[i].style.height="14px",a.icons[i].onclick=()=>s.RelatedIssue.reveal(e),a.icons[i].style.cursor="pointer"):(a.icons[i].name="info",a.icons[i].style.width="14px",a.icons[i].style.height="14px"),a.icons[i].title=t.uiString)}const l=this.cookieToExemptionReason?.get(e)?.uiString;return l&&(a.icons=a.icons||{},a.flagged=!0,a.icons.name=new n.Icon.Icon,a.icons.name.name="info",a.icons.name.style.width="14px",a.icons.name.style.height="14px",a.icons.name.title=l),a.key=e.key(),a}isValidCookieData(e){return(Boolean(e.name)||Boolean(e.value))&&this.isValidDomain(e.domain)&&this.isValidPath(e.path)&&this.isValidDate(e.expires)&&this.isValidPartitionKey(e["partition-key-site"])}isValidDomain(t){if(!t)return!0;const i=e.ParsedURL.ParsedURL.fromString("http://"+t);return null!==i&&i.domain()===t}isValidPath(t){if(!t)return!0;const i=e.ParsedURL.ParsedURL.fromString("http://example.com"+t);return null!==i&&i.path===t}isValidDate(e){return!e||e===g()||!isNaN(Date.parse(e))}isValidPartitionKey(t){if(!t)return!0;return null!==e.ParsedURL.ParsedURL.fromString(t)}refresh(){this.refreshCallback&&this.refreshCallback()}populateContextMenu(t,i){const o=this.cookies.find((e=>e.key()===i.dataset.key));if(!o)return;const n=o;t.revealSection().appendItem(b(m.showRequestsWithThisCookie),(()=>{const t=a.UIFilter.UIRequestFilter.filters([{filterType:a.UIFilter.FilterType.CookieDomain,filterValue:n.domain()},{filterType:a.UIFilter.FilterType.CookieName,filterValue:n.name()}]);e.Revealer.reveal(t)}),{jslogContext:"show-requests-with-this-cookie"}),s.RelatedIssue.hasIssues(n)&&t.revealSection().appendItem(b(m.showIssueAssociatedWithThis),(()=>{s.RelatedIssue.reveal(n)}),{jslogContext:"show-issue-associated-with-this"})}}var f=Object.freeze({__proto__:null,CookiesTable:y});export{f as CookiesTable};