InlineEditor.BezierEditor=class extends UI.VBox{constructor(){super(true);this.registerRequiredCSS('inline_editor/bezierEditor.css');this.contentElement.tabIndex=0;this.setDefaultFocusedElement(this.contentElement);this._previewElement=this.contentElement.createChild('div','bezier-preview-container');this._previewElement.createChild('div','bezier-preview-animation');this._previewElement.addEventListener('click',this._startPreviewAnimation.bind(this));this._previewOnion=this.contentElement.createChild('div','bezier-preview-onion');this._previewOnion.addEventListener('click',this._startPreviewAnimation.bind(this));this._outerContainer=this.contentElement.createChild('div','bezier-container');this._presetsContainer=this._outerContainer.createChild('div','bezier-presets');this._presetUI=new InlineEditor.BezierUI(40,40,0,2,false);this._presetCategories=[];for(var i=0;i<InlineEditor.BezierEditor.Presets.length;i++){this._presetCategories[i]=this._createCategory(InlineEditor.BezierEditor.Presets[i]);this._presetsContainer.appendChild(this._presetCategories[i].icon);}
this._curveUI=new InlineEditor.BezierUI(150,250,50,7,true);this._curve=this._outerContainer.createSVGChild('svg','bezier-curve');UI.installDragHandle(this._curve,this._dragStart.bind(this),this._dragMove.bind(this),this._dragEnd.bind(this),'default');this._header=this.contentElement.createChild('div','bezier-header');var minus=this._createPresetModifyIcon(this._header,'bezier-preset-minus','M 12 6 L 8 10 L 12 14');var plus=this._createPresetModifyIcon(this._header,'bezier-preset-plus','M 8 6 L 12 10 L 8 14');minus.addEventListener('click',this._presetModifyClicked.bind(this,false));plus.addEventListener('click',this._presetModifyClicked.bind(this,true));this._label=this._header.createChild('span','source-code bezier-display-value');}
setBezier(bezier){if(!bezier)
return;this._bezier=bezier;this._updateUI();}
bezier(){return this._bezier;}
wasShown(){this._unselectPresets();for(var category of this._presetCategories){for(var i=0;i<category.presets.length;i++){if(this._bezier.asCSSText()===category.presets[i].value){category.presetIndex=i;this._presetCategorySelected(category);}}}
this._updateUI();this._startPreviewAnimation();}
_onchange(){this._updateUI();this.dispatchEventToListeners(InlineEditor.BezierEditor.Events.BezierChanged,this._bezier.asCSSText());}
_updateUI(){var labelText=this._selectedCategory?this._selectedCategory.presets[this._selectedCategory.presetIndex].name:this._bezier.asCSSText().replace(/\s(-\d\.\d)/g,'$1');this._label.textContent=Common.UIString(labelText);this._curveUI.drawCurve(this._bezier,this._curve);this._previewOnion.removeChildren();}
_dragStart(event){this._mouseDownPosition=new Common.Geometry.Point(event.x,event.y);var ui=this._curveUI;this._controlPosition=new Common.Geometry.Point(Number.constrain((event.offsetX-ui.radius)/ui.curveWidth(),0,1),(ui.curveHeight()+ui.marginTop+ui.radius-event.offsetY)/ui.curveHeight());var firstControlPointIsCloser=this._controlPosition.distanceTo(this._bezier.controlPoints[0])<this._controlPosition.distanceTo(this._bezier.controlPoints[1]);this._selectedPoint=firstControlPointIsCloser?0:1;this._bezier.controlPoints[this._selectedPoint]=this._controlPosition;this._unselectPresets();this._onchange();event.consume(true);return true;}
_updateControlPosition(mouseX,mouseY){var deltaX=(mouseX-this._mouseDownPosition.x)/this._curveUI.curveWidth();var deltaY=(mouseY-this._mouseDownPosition.y)/this._curveUI.curveHeight();var newPosition=new Common.Geometry.Point(Number.constrain(this._controlPosition.x+deltaX,0,1),this._controlPosition.y-deltaY);this._bezier.controlPoints[this._selectedPoint]=newPosition;}
_dragMove(event){this._updateControlPosition(event.x,event.y);this._onchange();}
_dragEnd(event){this._updateControlPosition(event.x,event.y);this._onchange();this._startPreviewAnimation();}
_createCategory(presetGroup){var presetElement=createElementWithClass('div','bezier-preset-category');var iconElement=presetElement.createSVGChild('svg','bezier-preset monospace');var category={presets:presetGroup,presetIndex:0,icon:presetElement};this._presetUI.drawCurve(Common.Geometry.CubicBezier.parse(category.presets[0].value),iconElement);iconElement.addEventListener('click',this._presetCategorySelected.bind(this,category));return category;}
_createPresetModifyIcon(parentElement,className,drawPath){var icon=parentElement.createSVGChild('svg','bezier-preset-modify '+className);icon.setAttribute('width',20);icon.setAttribute('height',20);var path=icon.createSVGChild('path');path.setAttribute('d',drawPath);return icon;}
_unselectPresets(){for(var category of this._presetCategories)
category.icon.classList.remove('bezier-preset-selected');delete this._selectedCategory;this._header.classList.remove('bezier-header-active');}
_presetCategorySelected(category,event){if(this._selectedCategory===category)
return;this._unselectPresets();this._header.classList.add('bezier-header-active');this._selectedCategory=category;this._selectedCategory.icon.classList.add('bezier-preset-selected');this.setBezier(Common.Geometry.CubicBezier.parse(category.presets[category.presetIndex].value));this._onchange();this._startPreviewAnimation();if(event)
event.consume(true);}
_presetModifyClicked(intensify,event){if(!this._selectedCategory)
return;var length=this._selectedCategory.presets.length;this._selectedCategory.presetIndex=(this._selectedCategory.presetIndex+(intensify?1:-1)+length)%length;this.setBezier(Common.Geometry.CubicBezier.parse(this._selectedCategory.presets[this._selectedCategory.presetIndex].value));this._onchange();this._startPreviewAnimation();}
_startPreviewAnimation(){if(this._previewAnimation)
this._previewAnimation.cancel();const animationDuration=1600;const numberOnionSlices=20;var keyframes=[{offset:0,transform:'translateX(0px)',easing:this._bezier.asCSSText(),opacity:1},{offset:0.9,transform:'translateX(218px)',opacity:1},{offset:1,transform:'translateX(218px)',opacity:0}];this._previewAnimation=this._previewElement.animate(keyframes,animationDuration);this._previewOnion.removeChildren();for(var i=0;i<=numberOnionSlices;i++){var slice=this._previewOnion.createChild('div','bezier-preview-animation');var player=slice.animate([{transform:'translateX(0px)',easing:this._bezier.asCSSText()},{transform:'translateX(218px)'}],{duration:animationDuration,fill:'forwards'});player.pause();player.currentTime=animationDuration*i/numberOnionSlices;}}};InlineEditor.BezierEditor.Events={BezierChanged:Symbol('BezierChanged')};InlineEditor.BezierEditor.Presets=[[{name:'ease-in-out',value:'ease-in-out'},{name:'In Out · Sine',value:'cubic-bezier(0.45, 0.05, 0.55, 0.95)'},{name:'In Out · Quadratic',value:'cubic-bezier(0.46, 0.03, 0.52, 0.96)'},{name:'In Out · Cubic',value:'cubic-bezier(0.65, 0.05, 0.36, 1)'},{name:'Fast Out, Slow In',value:'cubic-bezier(0.4, 0, 0.2, 1)'},{name:'In Out · Back',value:'cubic-bezier(0.68, -0.55, 0.27, 1.55)'}],[{name:'Fast Out, Linear In',value:'cubic-bezier(0.4, 0, 1, 1)'},{name:'ease-in',value:'ease-in'},{name:'In · Sine',value:'cubic-bezier(0.47, 0, 0.75, 0.72)'},{name:'In · Quadratic',value:'cubic-bezier(0.55, 0.09, 0.68, 0.53)'},{name:'In · Cubic',value:'cubic-bezier(0.55, 0.06, 0.68, 0.19)'},{name:'In · Back',value:'cubic-bezier(0.6, -0.28, 0.74, 0.05)'}],[{name:'ease-out',value:'ease-out'},{name:'Out · Sine',value:'cubic-bezier(0.39, 0.58, 0.57, 1)'},{name:'Out · Quadratic',value:'cubic-bezier(0.25, 0.46, 0.45, 0.94)'},{name:'Out · Cubic',value:'cubic-bezier(0.22, 0.61, 0.36, 1)'},{name:'Linear Out, Slow In',value:'cubic-bezier(0, 0, 0.2, 1)'},{name:'Out · Back',value:'cubic-bezier(0.18, 0.89, 0.32, 1.28)'}]];InlineEditor.BezierEditor.PresetCategory;;InlineEditor.BezierUI=class{constructor(width,height,marginTop,controlPointRadius,linearLine){this.width=width;this.height=height;this.marginTop=marginTop;this.radius=controlPointRadius;this.linearLine=linearLine;}
static drawVelocityChart(bezier,path,width){var height=InlineEditor.BezierUI.Height;var pathBuilder=['M',0,height];var sampleSize=1/40;var prev=bezier.evaluateAt(0);for(var t=sampleSize;t<1+sampleSize;t+=sampleSize){var current=bezier.evaluateAt(t);var slope=(current.y-prev.y)/(current.x-prev.x);var weightedX=prev.x*(1-t)+current.x*t;slope=Math.tanh(slope/1.5);pathBuilder=pathBuilder.concat(['L',(weightedX*width).toFixed(2),(height-slope*height).toFixed(2)]);prev=current;}
pathBuilder=pathBuilder.concat(['L',width.toFixed(2),height,'Z']);path.setAttribute('d',pathBuilder.join(' '));}
curveWidth(){return this.width-this.radius*2;}
curveHeight(){return this.height-this.radius*2-this.marginTop*2;}
_drawLine(parentElement,className,x1,y1,x2,y2){var line=parentElement.createSVGChild('line',className);line.setAttribute('x1',x1+this.radius);line.setAttribute('y1',y1+this.radius+this.marginTop);line.setAttribute('x2',x2+this.radius);line.setAttribute('y2',y2+this.radius+this.marginTop);}
_drawControlPoints(parentElement,startX,startY,controlX,controlY){this._drawLine(parentElement,'bezier-control-line',startX,startY,controlX,controlY);var circle=parentElement.createSVGChild('circle','bezier-control-circle');circle.setAttribute('cx',controlX+this.radius);circle.setAttribute('cy',controlY+this.radius+this.marginTop);circle.setAttribute('r',this.radius);}
drawCurve(bezier,svg){if(!bezier)
return;var width=this.curveWidth();var height=this.curveHeight();svg.setAttribute('width',this.width);svg.setAttribute('height',this.height);svg.removeChildren();var group=svg.createSVGChild('g');if(this.linearLine)
this._drawLine(group,'linear-line',0,height,width,0);var curve=group.createSVGChild('path','bezier-path');var curvePoints=[new Common.Geometry.Point(bezier.controlPoints[0].x*width+this.radius,(1-bezier.controlPoints[0].y)*height+this.radius+this.marginTop),new Common.Geometry.Point(bezier.controlPoints[1].x*width+this.radius,(1-bezier.controlPoints[1].y)*height+this.radius+this.marginTop),new Common.Geometry.Point(width+this.radius,this.marginTop+this.radius)];curve.setAttribute('d','M'+this.radius+','+(height+this.radius+this.marginTop)+' C'+curvePoints.join(' '));this._drawControlPoints(group,0,height,bezier.controlPoints[0].x*width,(1-bezier.controlPoints[0].y)*height);this._drawControlPoints(group,width,0,bezier.controlPoints[1].x*width,(1-bezier.controlPoints[1].y)*height);}};InlineEditor.BezierUI.Height=26;;InlineEditor.ColorSwatch=class extends HTMLSpanElement{constructor(){super();}
static create(){if(!InlineEditor.ColorSwatch._constructor){InlineEditor.ColorSwatch._constructor=UI.registerCustomElement('span','color-swatch',InlineEditor.ColorSwatch.prototype);}
return(new InlineEditor.ColorSwatch._constructor());}
static _nextColorFormat(color,curFormat){var cf=Common.Color.Format;switch(curFormat){case cf.Original:return!color.hasAlpha()?cf.RGB:cf.RGBA;case cf.RGB:case cf.RGBA:return!color.hasAlpha()?cf.HSL:cf.HSLA;case cf.HSL:case cf.HSLA:if(color.nickname())
return cf.Nickname;if(!color.hasAlpha())
return color.canBeShortHex()?cf.ShortHEX:cf.HEX;else
return cf.Original;case cf.ShortHEX:return cf.HEX;case cf.HEX:return cf.Original;case cf.Nickname:if(!color.hasAlpha())
return color.canBeShortHex()?cf.ShortHEX:cf.HEX;else
return cf.Original;default:return cf.RGBA;}}
color(){return this._color;}
setColor(color){this._color=color;this._format=this._color.format();var colorString=this._color.asString(this._format);this._colorValueElement.textContent=colorString;this._swatchInner.style.backgroundColor=colorString;}
hideText(hide){this._colorValueElement.hidden=hide;}
format(){return this._format;}
setFormat(format){this._format=format;this._colorValueElement.textContent=this._color.asString(this._format);}
toggleNextFormat(){do{this._format=InlineEditor.ColorSwatch._nextColorFormat(this._color,this._format);var currentValue=this._color.asString(this._format);}while(currentValue===this._colorValueElement.textContent);this._colorValueElement.textContent=currentValue;}
iconElement(){return this._iconElement;}
createdCallback(){var root=UI.createShadowRootWithCoreStyles(this,'inline_editor/colorSwatch.css');this._iconElement=root.createChild('span','color-swatch');this._iconElement.title=Common.UIString('Shift-click to change color format');this._swatchInner=this._iconElement.createChild('span','color-swatch-inner');this._swatchInner.addEventListener('dblclick',(e)=>e.consume(),false);this._swatchInner.addEventListener('mousedown',(e)=>e.consume(),false);this._swatchInner.addEventListener('click',this._handleClick.bind(this),true);root.createChild('content');this._colorValueElement=this.createChild('span');}
_handleClick(event){if(!event.shiftKey)
return;event.target.parentNode.parentNode.host.toggleNextFormat();event.consume(true);}};InlineEditor.BezierSwatch=class extends HTMLSpanElement{constructor(){super();}
static create(){if(!InlineEditor.BezierSwatch._constructor){InlineEditor.BezierSwatch._constructor=UI.registerCustomElement('span','bezier-swatch',InlineEditor.BezierSwatch.prototype);}
return(new InlineEditor.BezierSwatch._constructor());}
bezierText(){return this._textElement.textContent;}
setBezierText(text){this._textElement.textContent=text;}
hideText(hide){this._textElement.hidden=hide;}
iconElement(){return this._iconElement;}
createdCallback(){var root=UI.createShadowRootWithCoreStyles(this,'inline_editor/bezierSwatch.css');this._iconElement=UI.Icon.create('smallicon-bezier','bezier-swatch-icon');root.appendChild(this._iconElement);this._textElement=this.createChild('span');root.createChild('content');}};InlineEditor.CSSShadowSwatch=class extends HTMLSpanElement{constructor(){super();}
static create(){if(!InlineEditor.CSSShadowSwatch._constructor){InlineEditor.CSSShadowSwatch._constructor=UI.registerCustomElement('span','css-shadow-swatch',InlineEditor.CSSShadowSwatch.prototype);}
return(new InlineEditor.CSSShadowSwatch._constructor());}
model(){return this._model;}
setCSSShadow(model){this._model=model;this._contentElement.removeChildren();var results=Common.TextUtils.splitStringByRegexes(model.asCSSText(),[/inset/g,Common.Color.Regex]);for(var i=0;i<results.length;i++){var result=results[i];if(result.regexIndex===1){if(!this._colorSwatch)
this._colorSwatch=InlineEditor.ColorSwatch.create();this._colorSwatch.setColor(model.color());this._contentElement.appendChild(this._colorSwatch);}else{this._contentElement.appendChild(createTextNode(result.value));}}}
hideText(hide){this._contentElement.hidden=hide;}
iconElement(){return this._iconElement;}
colorSwatch(){return this._colorSwatch;}
createdCallback(){var root=UI.createShadowRootWithCoreStyles(this,'inline_editor/cssShadowSwatch.css');this._iconElement=UI.Icon.create('smallicon-shadow','shadow-swatch-icon');root.appendChild(this._iconElement);root.createChild('content');this._contentElement=this.createChild('span');}};;InlineEditor.CSSShadowEditor=class extends UI.VBox{constructor(){super(true);this.registerRequiredCSS('inline_editor/cssShadowEditor.css');this.contentElement.tabIndex=0;this.setDefaultFocusedElement(this.contentElement);this._typeField=this.contentElement.createChild('div','shadow-editor-field');this._typeField.createChild('label','shadow-editor-label').textContent=Common.UIString('Type');this._outsetButton=this._typeField.createChild('button','shadow-editor-button-left');this._outsetButton.textContent=Common.UIString('Outset');this._outsetButton.addEventListener('click',this._onButtonClick.bind(this),false);this._insetButton=this._typeField.createChild('button','shadow-editor-button-right');this._insetButton.textContent=Common.UIString('Inset');this._insetButton.addEventListener('click',this._onButtonClick.bind(this),false);var xField=this.contentElement.createChild('div','shadow-editor-field');this._xInput=this._createTextInput(xField,Common.UIString('X offset'));var yField=this.contentElement.createChild('div','shadow-editor-field');this._yInput=this._createTextInput(yField,Common.UIString('Y offset'));this._xySlider=xField.createChild('canvas','shadow-editor-2D-slider');this._xySlider.width=InlineEditor.CSSShadowEditor.canvasSize;this._xySlider.height=InlineEditor.CSSShadowEditor.canvasSize;this._xySlider.tabIndex=-1;this._halfCanvasSize=InlineEditor.CSSShadowEditor.canvasSize/2;this._innerCanvasSize=this._halfCanvasSize-InlineEditor.CSSShadowEditor.sliderThumbRadius;UI.installDragHandle(this._xySlider,this._dragStart.bind(this),this._dragMove.bind(this),null,'default');this._xySlider.addEventListener('keydown',this._onCanvasArrowKey.bind(this),false);this._xySlider.addEventListener('blur',this._onCanvasBlur.bind(this),false);var blurField=this.contentElement.createChild('div','shadow-editor-blur-field');this._blurInput=this._createTextInput(blurField,Common.UIString('Blur'));this._blurSlider=this._createSlider(blurField);this._spreadField=this.contentElement.createChild('div','shadow-editor-field');this._spreadInput=this._createTextInput(this._spreadField,Common.UIString('Spread'));this._spreadSlider=this._createSlider(this._spreadField);}
_createTextInput(field,propertyName){var label=field.createChild('label','shadow-editor-label');label.textContent=propertyName;label.setAttribute('for',propertyName);var textInput=field.createChild('input','shadow-editor-text-input');textInput.type='text';textInput.id=propertyName;textInput.addEventListener('keydown',this._handleValueModification.bind(this),false);textInput.addEventListener('mousewheel',this._handleValueModification.bind(this),false);textInput.addEventListener('input',this._onTextInput.bind(this),false);textInput.addEventListener('blur',this._onTextBlur.bind(this),false);return textInput;}
_createSlider(field){var slider=UI.createSliderLabel(0,InlineEditor.CSSShadowEditor.maxRange,-1);slider.addEventListener('input',this._onSliderInput.bind(this),false);field.appendChild(slider);return slider;}
wasShown(){this._updateUI();}
setModel(model){this._model=model;this._typeField.hidden=!model.isBoxShadow();this._spreadField.hidden=!model.isBoxShadow();this._updateUI();}
_updateUI(){this._updateButtons();this._xInput.value=this._model.offsetX().asCSSText();this._yInput.value=this._model.offsetY().asCSSText();this._blurInput.value=this._model.blurRadius().asCSSText();this._spreadInput.value=this._model.spreadRadius().asCSSText();this._blurSlider.value=this._model.blurRadius().amount;this._spreadSlider.value=this._model.spreadRadius().amount;this._updateCanvas(false);}
_updateButtons(){this._insetButton.classList.toggle('enabled',this._model.inset());this._outsetButton.classList.toggle('enabled',!this._model.inset());}
_updateCanvas(drawFocus){var context=this._xySlider.getContext('2d');context.clearRect(0,0,this._xySlider.width,this._xySlider.height);context.save();context.setLineDash([1,1]);context.strokeStyle='rgba(210, 210, 210, 0.8)';context.beginPath();context.moveTo(this._halfCanvasSize,0);context.lineTo(this._halfCanvasSize,InlineEditor.CSSShadowEditor.canvasSize);context.moveTo(0,this._halfCanvasSize);context.lineTo(InlineEditor.CSSShadowEditor.canvasSize,this._halfCanvasSize);context.stroke();context.restore();var thumbPoint=this._sliderThumbPosition();context.save();context.translate(this._halfCanvasSize,this._halfCanvasSize);context.lineWidth=2;context.strokeStyle='rgba(130, 130, 130, 0.75)';context.beginPath();context.moveTo(0,0);context.lineTo(thumbPoint.x,thumbPoint.y);context.stroke();if(drawFocus){context.beginPath();context.fillStyle='rgba(66, 133, 244, 0.4)';context.arc(thumbPoint.x,thumbPoint.y,InlineEditor.CSSShadowEditor.sliderThumbRadius+2,0,2*Math.PI);context.fill();}
context.beginPath();context.fillStyle='#4285F4';context.arc(thumbPoint.x,thumbPoint.y,InlineEditor.CSSShadowEditor.sliderThumbRadius,0,2*Math.PI);context.fill();context.restore();}
_onButtonClick(event){var insetClicked=(event.currentTarget===this._insetButton);if(insetClicked&&this._model.inset()||!insetClicked&&!this._model.inset())
return;this._model.setInset(insetClicked);this._updateButtons();this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_handleValueModification(event){var modifiedValue=UI.createReplacementString(event.currentTarget.value,event,customNumberHandler);if(!modifiedValue)
return;var length=Common.CSSLength.parse(modifiedValue);if(!length)
return;if(event.currentTarget===this._blurInput&&length.amount<0)
length.amount=0;event.currentTarget.value=length.asCSSText();event.currentTarget.selectionStart=0;event.currentTarget.selectionEnd=event.currentTarget.value.length;this._onTextInput(event);event.consume(true);function customNumberHandler(prefix,number,suffix){if(!suffix.length)
suffix=InlineEditor.CSSShadowEditor.defaultUnit;return prefix+number+suffix;}}
_onTextInput(event){this._changedElement=event.currentTarget;this._changedElement.classList.remove('invalid');var length=Common.CSSLength.parse(event.currentTarget.value);if(!length||event.currentTarget===this._blurInput&&length.amount<0)
return;if(event.currentTarget===this._xInput){this._model.setOffsetX(length);this._updateCanvas(false);}else if(event.currentTarget===this._yInput){this._model.setOffsetY(length);this._updateCanvas(false);}else if(event.currentTarget===this._blurInput){this._model.setBlurRadius(length);this._blurSlider.value=length.amount;}else if(event.currentTarget===this._spreadInput){this._model.setSpreadRadius(length);this._spreadSlider.value=length.amount;}
this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_onTextBlur(){if(!this._changedElement)
return;var length=!this._changedElement.value.trim()?Common.CSSLength.zero():Common.CSSLength.parse(this._changedElement.value);if(!length)
length=Common.CSSLength.parse(this._changedElement.value+InlineEditor.CSSShadowEditor.defaultUnit);if(!length){this._changedElement.classList.add('invalid');this._changedElement=null;return;}
if(this._changedElement===this._xInput){this._model.setOffsetX(length);this._xInput.value=length.asCSSText();this._updateCanvas(false);}else if(this._changedElement===this._yInput){this._model.setOffsetY(length);this._yInput.value=length.asCSSText();this._updateCanvas(false);}else if(this._changedElement===this._blurInput){if(length.amount<0)
length=Common.CSSLength.zero();this._model.setBlurRadius(length);this._blurInput.value=length.asCSSText();this._blurSlider.value=length.amount;}else if(this._changedElement===this._spreadInput){this._model.setSpreadRadius(length);this._spreadInput.value=length.asCSSText();this._spreadSlider.value=length.amount;}
this._changedElement=null;this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_onSliderInput(event){if(event.currentTarget===this._blurSlider){this._model.setBlurRadius(new Common.CSSLength(this._blurSlider.value,this._model.blurRadius().unit||InlineEditor.CSSShadowEditor.defaultUnit));this._blurInput.value=this._model.blurRadius().asCSSText();this._blurInput.classList.remove('invalid');}else if(event.currentTarget===this._spreadSlider){this._model.setSpreadRadius(new Common.CSSLength(this._spreadSlider.value,this._model.spreadRadius().unit||InlineEditor.CSSShadowEditor.defaultUnit));this._spreadInput.value=this._model.spreadRadius().asCSSText();this._spreadInput.classList.remove('invalid');}
this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_dragStart(event){this._xySlider.focus();this._updateCanvas(true);this._canvasOrigin=new Common.Geometry.Point(this._xySlider.totalOffsetLeft()+this._halfCanvasSize,this._xySlider.totalOffsetTop()+this._halfCanvasSize);var clickedPoint=new Common.Geometry.Point(event.x-this._canvasOrigin.x,event.y-this._canvasOrigin.y);var thumbPoint=this._sliderThumbPosition();if(clickedPoint.distanceTo(thumbPoint)>=InlineEditor.CSSShadowEditor.sliderThumbRadius)
this._dragMove(event);return true;}
_dragMove(event){var point=new Common.Geometry.Point(event.x-this._canvasOrigin.x,event.y-this._canvasOrigin.y);if(event.shiftKey)
point=this._snapToClosestDirection(point);var constrainedPoint=this._constrainPoint(point,this._innerCanvasSize);var newX=Math.round((constrainedPoint.x/this._innerCanvasSize)*InlineEditor.CSSShadowEditor.maxRange);var newY=Math.round((constrainedPoint.y/this._innerCanvasSize)*InlineEditor.CSSShadowEditor.maxRange);if(event.shiftKey){this._model.setOffsetX(new Common.CSSLength(newX,this._model.offsetX().unit||InlineEditor.CSSShadowEditor.defaultUnit));this._model.setOffsetY(new Common.CSSLength(newY,this._model.offsetY().unit||InlineEditor.CSSShadowEditor.defaultUnit));}else{if(!event.altKey){this._model.setOffsetX(new Common.CSSLength(newX,this._model.offsetX().unit||InlineEditor.CSSShadowEditor.defaultUnit));}
if(!UI.KeyboardShortcut.eventHasCtrlOrMeta(event)){this._model.setOffsetY(new Common.CSSLength(newY,this._model.offsetY().unit||InlineEditor.CSSShadowEditor.defaultUnit));}}
this._xInput.value=this._model.offsetX().asCSSText();this._yInput.value=this._model.offsetY().asCSSText();this._xInput.classList.remove('invalid');this._yInput.classList.remove('invalid');this._updateCanvas(true);this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_onCanvasBlur(){this._updateCanvas(false);}
_onCanvasArrowKey(event){var shiftX=0;var shiftY=0;if(event.key==='ArrowRight')
shiftX=1;else if(event.key==='ArrowLeft')
shiftX=-1;else if(event.key==='ArrowUp')
shiftY=-1;else if(event.key==='ArrowDown')
shiftY=1;if(!shiftX&&!shiftY)
return;event.consume(true);if(shiftX){var offsetX=this._model.offsetX();var newAmount=Number.constrain(offsetX.amount+shiftX,-InlineEditor.CSSShadowEditor.maxRange,InlineEditor.CSSShadowEditor.maxRange);if(newAmount===offsetX.amount)
return;this._model.setOffsetX(new Common.CSSLength(newAmount,offsetX.unit||InlineEditor.CSSShadowEditor.defaultUnit));this._xInput.value=this._model.offsetX().asCSSText();this._xInput.classList.remove('invalid');}
if(shiftY){var offsetY=this._model.offsetY();var newAmount=Number.constrain(offsetY.amount+shiftY,-InlineEditor.CSSShadowEditor.maxRange,InlineEditor.CSSShadowEditor.maxRange);if(newAmount===offsetY.amount)
return;this._model.setOffsetY(new Common.CSSLength(newAmount,offsetY.unit||InlineEditor.CSSShadowEditor.defaultUnit));this._yInput.value=this._model.offsetY().asCSSText();this._yInput.classList.remove('invalid');}
this._updateCanvas(true);this.dispatchEventToListeners(InlineEditor.CSSShadowEditor.Events.ShadowChanged,this._model);}
_constrainPoint(point,max){if(Math.abs(point.x)<=max&&Math.abs(point.y)<=max)
return new Common.Geometry.Point(point.x,point.y);return point.scale(max/Math.max(Math.abs(point.x),Math.abs(point.y)));}
_snapToClosestDirection(point){var minDistance=Number.MAX_VALUE;var closestPoint=point;var directions=[new Common.Geometry.Point(0,-1),new Common.Geometry.Point(1,-1),new Common.Geometry.Point(1,0),new Common.Geometry.Point(1,1)];for(var direction of directions){var projection=point.projectOn(direction);var distance=point.distanceTo(projection);if(distance<minDistance){minDistance=distance;closestPoint=projection;}}
return closestPoint;}
_sliderThumbPosition(){var x=(this._model.offsetX().amount/InlineEditor.CSSShadowEditor.maxRange)*this._innerCanvasSize;var y=(this._model.offsetY().amount/InlineEditor.CSSShadowEditor.maxRange)*this._innerCanvasSize;return this._constrainPoint(new Common.Geometry.Point(x,y),this._innerCanvasSize);}};InlineEditor.CSSShadowEditor.Events={ShadowChanged:Symbol('ShadowChanged')};InlineEditor.CSSShadowEditor.maxRange=20;InlineEditor.CSSShadowEditor.defaultUnit='px';InlineEditor.CSSShadowEditor.sliderThumbRadius=6;InlineEditor.CSSShadowEditor.canvasSize=88;;InlineEditor.SwatchPopoverHelper=class extends Common.Object{constructor(){super();this._popover=new UI.Popover();this._popover.setCanShrink(false);this._popover.setNoPadding(true);this._popover.element.addEventListener('mousedown',(e)=>e.consume(),false);this._hideProxy=this.hide.bind(this,true);this._boundOnKeyDown=this._onKeyDown.bind(this);this._boundFocusOut=this._onFocusOut.bind(this);this._isHidden=true;}
_onFocusOut(event){if(!event.relatedTarget||event.relatedTarget.isSelfOrDescendant(this._view.contentElement))
return;this._hideProxy();}
isShowing(){return this._popover.isShowing();}
show(view,anchorElement,hiddenCallback){if(this._popover.isShowing()){if(this._anchorElement===anchorElement)
return;this.hide(true);}
delete this._isHidden;this._anchorElement=anchorElement;this._view=view;this._hiddenCallback=hiddenCallback;this.reposition();view.focus();var document=this._popover.element.ownerDocument;document.addEventListener('mousedown',this._hideProxy,false);document.defaultView.addEventListener('resize',this._hideProxy,false);this._view.contentElement.addEventListener('keydown',this._boundOnKeyDown,false);}
reposition(){this._view.contentElement.removeEventListener('focusout',this._boundFocusOut,false);this._popover.showView(this._view,this._anchorElement);this._view.contentElement.addEventListener('focusout',this._boundFocusOut,false);if(!this._focusRestorer)
this._focusRestorer=new UI.WidgetFocusRestorer(this._view);}
hide(commitEdit){if(this._isHidden)
return;var document=this._popover.element.ownerDocument;this._isHidden=true;this._popover.hide();document.removeEventListener('mousedown',this._hideProxy,false);document.defaultView.removeEventListener('resize',this._hideProxy,false);if(this._hiddenCallback)
this._hiddenCallback.call(null,!!commitEdit);this._focusRestorer.restore();delete this._anchorElement;if(this._view){this._view.detach();this._view.contentElement.removeEventListener('keydown',this._boundOnKeyDown,false);this._view.contentElement.removeEventListener('focusout',this._boundFocusOut,false);delete this._view;}}
_onKeyDown(event){if(event.key==='Enter'){this.hide(true);event.consume(true);return;}
if(event.key==='Escape'){this.hide(false);event.consume(true);}}};;Runtime.cachedResources["inline_editor/bezierEditor.css"]="/*\n * Copyright (c) 2015 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n    width: 270px;\n    height: 350px;\n    -webkit-user-select: none;\n    padding: 16px;\n    overflow: hidden;\n}\n\n.bezier-preset-selected > svg {\n    background-color: rgb(56, 121, 217);\n}\n\n.bezier-preset-label {\n    font-size: 10px;\n}\n\n.bezier-preset {\n    width: 50px;\n    height: 50px;\n    padding: 5px;\n    margin: auto;\n    background-color: #f5f5f5;\n    border-radius: 3px;\n}\n\n.bezier-preset line.bezier-control-line {\n    stroke: #666;\n    stroke-width: 1;\n    stroke-linecap: round;\n    fill: none;\n}\n\n.bezier-preset circle.bezier-control-circle {\n    fill: #666;\n}\n\n.bezier-preset path.bezier-path {\n    stroke: black;\n    stroke-width: 2;\n    stroke-linecap: round;\n    fill: none;\n}\n\n.bezier-preset-selected path.bezier-path, .bezier-preset-selected line.bezier-control-line {\n    stroke: white;\n}\n\n.bezier-preset-selected circle.bezier-control-circle {\n    fill: white;\n}\n\n.bezier-curve line.linear-line {\n    stroke: #eee;\n    stroke-width: 2;\n    stroke-linecap: round;\n    fill: none;\n}\n\n.bezier-curve line.bezier-control-line {\n    stroke: #9C27B0;\n    stroke-width: 2;\n    stroke-linecap: round;\n    fill: none;\n    opacity: 0.6;\n}\n\n.bezier-curve circle.bezier-control-circle {\n    fill: #9C27B0;\n    cursor: pointer;\n}\n\n.bezier-curve path.bezier-path {\n    stroke: black;\n    stroke-width: 3;\n    stroke-linecap: round;\n    fill: none;\n}\n\n.bezier-preview-container {\n    position: relative;\n    background-color: white;\n    overflow: hidden;\n    border-radius: 20px;\n    width: 200%;\n    height: 20px;\n    z-index: 2;\n    flex-shrink: 0;\n    opacity: 0;\n}\n\n.bezier-preview-animation {\n    background-color: #9C27B0;\n    width: 20px;\n    height: 20px;\n    border-radius: 20px;\n    position: absolute;\n}\n\n.bezier-preview-onion {\n    margin-top: -20px;\n    position: relative;\n    z-index: 1;\n}\n\n.bezier-preview-onion > .bezier-preview-animation {\n    opacity: 0.1;\n}\n\nsvg.bezier-preset-modify {\n    background-color: #f5f5f5;\n    border-radius: 35px;\n    display: inline-block;\n    visibility: hidden;\n    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n    position: absolute;\n}\n\nsvg.bezier-preset-modify:hover, .bezier-preset:hover {\n    background-color: #999;\n}\n\n.bezier-preset-selected .bezier-preset:hover {\n    background-color: rgb(56, 121, 217);\n}\n\n.bezier-preset-modify path {\n    stroke-width: 2;\n    stroke: black;\n    fill: none;\n}\n\n.bezier-preset-selected .bezier-preset-modify {\n    opacity: 1;\n}\n\n.bezier-preset-category {\n    width: 50px;\n    margin: 20px 0;\n    cursor: pointer;\n    transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nspan.bezier-display-value {\n    width: 100%;\n    -webkit-user-select: text;\n    display: block;\n    text-align: center;\n    line-height: 20px;\n    height: 20px;\n    cursor: text;\n    white-space: nowrap !important;\n}\n\n.bezier-container {\n    display: flex;\n    margin-top: 38px;\n}\n\nsvg.bezier-curve {\n    margin-left: 32px;\n    margin-top: -8px;\n}\n\nsvg.bezier-preset-modify.bezier-preset-plus {\n    right: 0;\n}\n\n.bezier-header {\n    margin-top: 16px;\n}\n\nsvg.bezier-preset-modify:active,\n.-theme-selection-color {\n    transform: scale(1.1);\n    background-color: rgb(56, 121, 217);\n}\n\n.bezier-preset-category:active {\n    transform: scale(1.05);\n}\n\n.bezier-header-active > svg.bezier-preset-modify {\n    visibility: visible;\n}\n\n.bezier-preset-modify:active path {\n    stroke: white;\n}\n\n/*# sourceURL=inline_editor/bezierEditor.css */";Runtime.cachedResources["inline_editor/colorSwatch.css"]="/*\n * Copyright (c) 2015 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n    white-space: nowrap;\n}\n\n.color-swatch {\n    position: relative;\n    margin-left: 1px;\n    margin-right: 2px;\n    width: 10px;\n    height: 10px;\n    top: 1px;\n    display: inline-block;\n    -webkit-user-select: none;\n    background-image: url(Images/checker.png);\n    line-height: 10px;\n}\n\n.color-swatch-inner {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    border: 1px solid rgba(128, 128, 128, 0.6);\n    cursor: default;\n}\n\n.color-swatch-inner:hover {\n    border: 1px solid rgba(64, 64, 64, 0.8);\n}\n\n\n/*# sourceURL=inline_editor/colorSwatch.css */";Runtime.cachedResources["inline_editor/bezierSwatch.css"]="/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n    white-space: nowrap;\n}\n\n.bezier-swatch-icon {\n    position: relative;\n    margin-left: 1px;\n    margin-right: 2px;\n    top: 1px;\n    -webkit-user-select: none;\n    line-height: 10px;\n    background-color: #9C27B0;\n    cursor: default;\n}\n\n.bezier-swatch-icon:hover {\n    background-color: #800080;\n}\n\n/*# sourceURL=inline_editor/bezierSwatch.css */";Runtime.cachedResources["inline_editor/cssShadowSwatch.css"]="/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n    white-space: nowrap;\n}\n\n.shadow-swatch-icon {\n    position: relative;\n    margin-left: 1px;\n    margin-right: 2px;\n    top: 1px;\n    -webkit-user-select: none;\n    line-height: 10px;\n    background-color: #9C27B0;\n}\n\n.shadow-swatch-icon:hover {\n    background-color: #800080;\n}\n\n/*# sourceURL=inline_editor/cssShadowSwatch.css */";Runtime.cachedResources["inline_editor/cssShadowEditor.css"]="/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n    -webkit-user-select: none;\n    padding: 4px 12px 12px 12px;\n}\n\n.shadow-editor-field {\n    height: 24px;\n    margin-top: 8px;\n    font-size: 12px;\n}\n\n.shadow-editor-blur-field {\n    height: 24px;\n    margin-top: 40px;\n    font-size: 12px;\n}\n\n.shadow-editor-2D-slider {\n    position: absolute;\n    height: 88px;\n    width: 88px;\n    border: 1px solid rgba(0, 0, 0, 0.14);\n    border-radius: 2px;\n}\n\n.shadow-editor-label {\n    display: inline-block;\n    width: 52px;\n    height: 24px;\n    line-height: 24px;\n    margin-right: 8px;\n    text-align: right;\n}\n\n.shadow-editor-button-left, .shadow-editor-button-right {\n    width: 74px;\n    height: 24px;\n    padding: 3px 7px;\n    line-height: 16px;\n    border: 1px solid rgba(0, 0, 0, 0.14);\n    background-color: #ffffff;\n    text-align: center;\n}\n\n.shadow-editor-button-left {\n    border-radius: 2px 0 0 2px;\n}\n\n.shadow-editor-button-right {\n    border-radius: 0 2px 2px 0;\n    border-left-width: 0;\n}\n\n.shadow-editor-button-left:hover, .shadow-editor-button-right:hover {\n    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n}\n\n.shadow-editor-button-left:focus, .shadow-editor-button-right:focus {\n    background-color: #eeeeee;\n}\n\n.shadow-editor-button-left.enabled, .shadow-editor-button-right.enabled, -theme-preserve {\n    background-color: #4285F4;\n    color: #ffffff;\n}\n\n.shadow-editor-button-left.enabled:focus, .shadow-editor-button-right.enabled:focus, -theme-preserve  {\n    background-color: #3B78E7;\n}\n\n.shadow-editor-text-input {\n    -webkit-appearance: none;\n    box-sizing: border-box;\n    width: 52px;\n    height: 24px;\n    margin-right: 8px;\n    padding: 3px 7px;\n    line-height: 16px;\n    border: 1px solid rgba(0, 0, 0, 0.14);\n    border-radius: 2px;\n    background-color: #ffffff;\n    color: #333;\n    text-align: right;\n}\n\n.shadow-editor-text-input:focus, -theme-preserve {\n    border-color: #4285F4;\n}\n\n.shadow-editor-text-input.invalid:not(:focus) {\n    border-color: #E67C73;\n}\n\n/*# sourceURL=inline_editor/cssShadowEditor.css */";