import"./NodeText.js";import*as Common from"../common/common.js";import*as ComponentHelpers from"../component_helpers/component_helpers.js";import*as Host from"../host/host.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import*as i18n from"../i18n/i18n.js";const UIStrings={showElementInTheElementsPanel:"Show element in the Elements panel",grid:"Grid",overlayDisplaySettings:"Overlay display settings",feedback:"Feedback",gridOverlays:"Grid overlays",noGridLayoutsFoundOnThisPage:"No grid layouts found on this page",flexbox:"Flexbox",flexboxOverlays:"Flexbox overlays",noFlexboxLayoutsFoundOnThisPage:"No flexbox layouts found on this page"},str_=i18n.i18n.registerUIStrings("elements/LayoutPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nLazyString=i18n.i18n.getLazilyComputedLocalizedString.bind(void 0,str_),{render:render,html:html}=LitHtml,getStyleSheets=ComponentHelpers.GetStylesheet.getStyleSheets,showElementButtonTitle=i18nLazyString(UIStrings.showElementInTheElementsPanel);export class SettingChangedEvent extends Event{constructor(e,t){super("setting-changed",{}),this.data={setting:e,value:t}}}function isEnumSetting(e){return"enum"===e.type}function isBooleanSetting(e){return"boolean"===e.type}export class LayoutPane extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.settings=[],this.gridElements=[],this.flexContainerElements=[],this.shadow.adoptedStyleSheets=[...getStyleSheets("ui/inspectorCommon.css",{enableLegacyPatching:!0}),...getStyleSheets("ui/inspectorSyntaxHighlight.css",{enableLegacyPatching:!0}),...getStyleSheets("elements/layoutPane.css",{enableLegacyPatching:!1})],this.onSummaryKeyDown=this.onSummaryKeyDown.bind(this)}set data(e){this.settings=e.settings,this.gridElements=e.gridElements,this.flexContainerElements=e.flexContainerElements,this.render()}onSummaryKeyDown(e){if(!e.target)return;const t=e.target.parentElement;if(!t)throw new Error("<details> element is not found for a <summary> element");switch(e.key){case"ArrowLeft":t.open=!1;break;case"ArrowRight":t.open=!0}}render(){render(html`
      <details open>
        <summary class="header" @keydown=${this.onSummaryKeyDown}>
          ${i18nString(UIStrings.grid)}
        </summary>
        <div class="content-section">
          <div class="feedback-container">
            <div>
              <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
            </div>
            <div class="feedback">
              <devtools-survey-link .data=${{trigger:"devtools-layout-panel",promptText:i18nString(UIStrings.feedback),canShowSurvey:Host.InspectorFrontendHost.InspectorFrontendHostInstance.canShowSurvey,showSurvey:Host.InspectorFrontendHost.InspectorFrontendHostInstance.showSurvey}}></devtools-survey-link>
            </div>
          </div>
          <div class="select-settings">
            ${this.getEnumSettings().map((e=>this.renderEnumSetting(e)))}
          </div>
          <div class="checkbox-settings">
            ${this.getBooleanSettings().map((e=>this.renderBooleanSetting(e)))}
          </div>
        </div>
        ${this.gridElements?html`<div class="content-section">
            <h3 class="content-section-title">
              ${this.gridElements.length?i18nString(UIStrings.gridOverlays):i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
            </h3>
            ${this.gridElements.length?html`<div class="elements">
                ${this.gridElements.map((e=>this.renderElement(e)))}
              </div>`:""}
          </div>`:""}
      </details>
      ${void 0!==this.flexContainerElements?html`
        <details open>
          <summary class="header" @keydown=${this.onSummaryKeyDown}>
            ${i18nString(UIStrings.flexbox)}
          </summary>
          ${this.flexContainerElements?html`<div class="content-section">
              <h3 class="content-section-title">
                ${this.flexContainerElements.length?i18nString(UIStrings.flexboxOverlays):i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
              </h3>
              ${this.flexContainerElements.length?html`<div class="elements">
                  ${this.flexContainerElements.map((e=>this.renderElement(e)))}
                </div>`:""}
            </div>`:""}
        </details>
        `:""}
    `,this.shadow,{eventContext:this})}getEnumSettings(){return this.settings.filter(isEnumSetting)}getBooleanSettings(){return this.settings.filter(isBooleanSetting)}onBooleanSettingChange(e,t){t.preventDefault(),this.dispatchEvent(new SettingChangedEvent(e.name,t.target.checked))}onEnumSettingChange(e,t){t.preventDefault(),this.dispatchEvent(new SettingChangedEvent(e.name,t.target.value))}onElementToggle(e,t){t.preventDefault(),e.toggle(t.target.checked)}onElementClick(e,t){t.preventDefault(),e.reveal()}onColorChange(e,t){t.preventDefault(),e.setColor(t.target.value),this.render()}onElementMouseEnter(e,t){t.preventDefault(),e.highlight()}onElementMouseLeave(e,t){t.preventDefault(),e.hideHighlight()}renderElement(e){const t=this.onElementToggle.bind(this,e),n=this.onElementClick.bind(this,e),s=this.onColorChange.bind(this,e),i=this.onElementMouseEnter.bind(this,e),o=this.onElementMouseLeave.bind(this,e);return html`<div class="element">
      <label data-element="true" class="checkbox-label" title=${e.name}>
        <input data-input="true" type="checkbox" .checked=${e.enabled} @change=${t} />
        <span class="node-text-container" data-label="true" @mouseenter=${i} @mouseleave=${o}>
          <devtools-node-text .data=${{nodeId:e.domId,nodeTitle:e.name,nodeClasses:e.domClasses}}></devtools-node-text>
        </span>
      </label>
      <label @keyup=${e=>{if("Enter"!==e.key&&" "!==e.key)return;e.target.querySelector("input").click(),e.preventDefault()}} @keydown=${e=>{" "===e.key&&e.preventDefault()}} tabindex="0" class="color-picker-label" style="background: ${e.color};">
        <input @change=${s} @input=${s} class="color-picker" type="color" value=${e.color} />
      </label>
      <button tabindex="0" @click=${n} title=${showElementButtonTitle} class="show-element"></button>
    </div>`}renderBooleanSetting(e){const t=this.onBooleanSettingChange.bind(this,e);return html`<label data-boolean-setting="true" class="checkbox-label" title=${e.title}>
      <input data-input="true" type="checkbox" .checked=${e.value} @change=${t} />
      <span data-label="true">${e.title}</span>
    </label>`}renderEnumSetting(e){const t=this.onEnumSettingChange.bind(this,e);return html`<label data-enum-setting="true" class="select-label" title=${e.title}>
      <select class="chrome-select" data-input="true" @change=${t}>
        ${e.options.map((t=>html`<option value=${t.value} .selected=${e.value===t.value}>${t.title}</option>`))}
      </select>
    </label>`}}customElements.define("devtools-layout-pane",LayoutPane);