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(let 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');const minus=this._createPresetModifyIcon(this._header,'bezier-preset-minus','M 12 6 L 8 10 L 12 14');const 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(const category of this._presetCategories){for(let 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(){const 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 UI.Geometry.Point(event.x,event.y);const ui=this._curveUI;this._controlPosition=new UI.Geometry.Point(Number.constrain((event.offsetX-ui.radius)/ui.curveWidth(),0,1),(ui.curveHeight()+ui.marginTop+ui.radius-event.offsetY)/ui.curveHeight());const 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){const deltaX=(mouseX-this._mouseDownPosition.x)/this._curveUI.curveWidth();const deltaY=(mouseY-this._mouseDownPosition.y)/this._curveUI.curveHeight();const newPosition=new UI.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){const presetElement=createElementWithClass('div','bezier-preset-category');const iconElement=presetElement.createSVGChild('svg','bezier-preset monospace');const category={presets:presetGroup,presetIndex:0,icon:presetElement};this._presetUI.drawCurve(UI.Geometry.CubicBezier.parse(category.presets[0].value),iconElement);iconElement.addEventListener('click',this._presetCategorySelected.bind(this,category));return category;}
|
_createPresetModifyIcon(parentElement,className,drawPath){const icon=parentElement.createSVGChild('svg','bezier-preset-modify '+className);icon.setAttribute('width',20);icon.setAttribute('height',20);const path=icon.createSVGChild('path');path.setAttribute('d',drawPath);return icon;}
|
_unselectPresets(){for(const 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(UI.Geometry.CubicBezier.parse(category.presets[category.presetIndex].value));this._onchange();this._startPreviewAnimation();if(event)
|
event.consume(true);}
|
_presetModifyClicked(intensify,event){if(!this._selectedCategory)
|
return;const length=this._selectedCategory.presets.length;this._selectedCategory.presetIndex=(this._selectedCategory.presetIndex+(intensify?1:-1)+length)%length;this.setBezier(UI.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;const 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(let i=0;i<=numberOnionSlices;i++){const slice=this._previewOnion.createChild('div','bezier-preview-animation');const 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){const height=InlineEditor.BezierUI.Height;let pathBuilder=['M',0,height];const sampleSize=1/40;let prev=bezier.evaluateAt(0);for(let t=sampleSize;t<1+sampleSize;t+=sampleSize){const current=bezier.evaluateAt(t);let slope=(current.y-prev.y)/(current.x-prev.x);const 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){const 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);const 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;const width=this.curveWidth();const height=this.curveHeight();svg.setAttribute('width',this.width);svg.setAttribute('height',this.height);svg.removeChildren();const group=svg.createSVGChild('g');if(this.linearLine)
|
this._drawLine(group,'linear-line',0,height,width,0);const curve=group.createSVGChild('path','bezier-path');const curvePoints=[new UI.Geometry.Point(bezier.controlPoints[0].x*width+this.radius,(1-bezier.controlPoints[0].y)*height+this.radius+this.marginTop),new UI.Geometry.Point(bezier.controlPoints[1].x*width+this.radius,(1-bezier.controlPoints[1].y)*height+this.radius+this.marginTop),new UI.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();if(!document.registerElement){this.createdCallback();}}
|
static create(){if(!InlineEditor.ColorSwatch._constructor){InlineEditor.ColorSwatch._constructor=UI.registerCustomElement('span','color-swatch',InlineEditor.ColorSwatch);}
|
return(InlineEditor.ColorSwatch._constructor());}
|
static _nextColorFormat(color,curFormat){const 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;return color.detectHEXFormat();case cf.ShortHEX:return cf.HEX;case cf.ShortHEXA:return cf.HEXA;case cf.HEXA:case cf.HEX:return cf.Original;case cf.Nickname:return color.detectHEXFormat();default:return cf.RGBA;}}
|
color(){return this._color;}
|
setColor(color){this._color=color;this._format=this._color.format();const 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(){let currentValue;do{this._format=InlineEditor.ColorSwatch._nextColorFormat(this._color,this._format);currentValue=this._color.asString(this._format);}while(currentValue===this._colorValueElement.textContent);this._colorValueElement.textContent=currentValue;}
|
iconElement(){return this._iconElement;}
|
createdCallback(){const 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('slot');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();if(!document.registerElement){this.createdCallback();}}
|
static create(){if(!InlineEditor.BezierSwatch._constructor){InlineEditor.BezierSwatch._constructor=UI.registerCustomElement('span','bezier-swatch',InlineEditor.BezierSwatch);}
|
return(InlineEditor.BezierSwatch._constructor());}
|
bezierText(){return this._textElement.textContent;}
|
setBezierText(text){this._textElement.textContent=text;}
|
hideText(hide){this._textElement.hidden=hide;}
|
iconElement(){return this._iconElement;}};InlineEditor.CSSShadowSwatch=class extends HTMLSpanElement{constructor(){super();if(!document.registerElement){this.createdCallback();}}
|
static create(){if(!InlineEditor.CSSShadowSwatch._constructor){InlineEditor.CSSShadowSwatch._constructor=UI.registerCustomElement('span','css-shadow-swatch',InlineEditor.CSSShadowSwatch);}
|
return(InlineEditor.CSSShadowSwatch._constructor());}
|
model(){return this._model;}
|
setCSSShadow(model){this._model=model;this._contentElement.removeChildren();const results=TextUtils.TextUtils.splitStringByRegexes(model.asCSSText(),[/inset/g,Common.Color.Regex]);for(let i=0;i<results.length;i++){const 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(){const root=UI.createShadowRootWithCoreStyles(this,'inline_editor/cssShadowSwatch.css');this._iconElement=UI.Icon.create('smallicon-shadow','shadow-swatch-icon');root.appendChild(this._iconElement);root.createChild('slot');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 shadow-editor-flex-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);const xField=this.contentElement.createChild('div','shadow-editor-field');this._xInput=this._createTextInput(xField,Common.UIString('X offset'));const 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);const blurField=this.contentElement.createChild('div','shadow-editor-field shadow-editor-flex-field 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 shadow-editor-flex-field');this._spreadInput=this._createTextInput(this._spreadField,Common.UIString('Spread'));this._spreadSlider=this._createSlider(this._spreadField);}
|
_createTextInput(field,propertyName){const label=field.createChild('label','shadow-editor-label');label.textContent=propertyName;label.setAttribute('for',propertyName);const textInput=UI.createInput('shadow-editor-text-input','text');field.appendChild(textInput);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){const slider=UI.createSlider(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){const 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();const 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){const 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){const modifiedValue=UI.createReplacementString(event.currentTarget.value,event,customNumberHandler);if(!modifiedValue)
|
return;const length=InlineEditor.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');const length=InlineEditor.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;let length=!this._changedElement.value.trim()?InlineEditor.CSSLength.zero():InlineEditor.CSSLength.parse(this._changedElement.value);if(!length)
|
length=InlineEditor.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=InlineEditor.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 InlineEditor.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 InlineEditor.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 UI.Geometry.Point(this._xySlider.totalOffsetLeft()+this._halfCanvasSize,this._xySlider.totalOffsetTop()+this._halfCanvasSize);const clickedPoint=new UI.Geometry.Point(event.x-this._canvasOrigin.x,event.y-this._canvasOrigin.y);const thumbPoint=this._sliderThumbPosition();if(clickedPoint.distanceTo(thumbPoint)>=InlineEditor.CSSShadowEditor.sliderThumbRadius)
|
this._dragMove(event);return true;}
|
_dragMove(event){let point=new UI.Geometry.Point(event.x-this._canvasOrigin.x,event.y-this._canvasOrigin.y);if(event.shiftKey)
|
point=this._snapToClosestDirection(point);const constrainedPoint=this._constrainPoint(point,this._innerCanvasSize);const newX=Math.round((constrainedPoint.x/this._innerCanvasSize)*InlineEditor.CSSShadowEditor.maxRange);const newY=Math.round((constrainedPoint.y/this._innerCanvasSize)*InlineEditor.CSSShadowEditor.maxRange);if(event.shiftKey){this._model.setOffsetX(new InlineEditor.CSSLength(newX,this._model.offsetX().unit||InlineEditor.CSSShadowEditor.defaultUnit));this._model.setOffsetY(new InlineEditor.CSSLength(newY,this._model.offsetY().unit||InlineEditor.CSSShadowEditor.defaultUnit));}else{if(!event.altKey){this._model.setOffsetX(new InlineEditor.CSSLength(newX,this._model.offsetX().unit||InlineEditor.CSSShadowEditor.defaultUnit));}
|
if(!UI.KeyboardShortcut.eventHasCtrlOrMeta(event)){this._model.setOffsetY(new InlineEditor.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){let shiftX=0;let 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){const offsetX=this._model.offsetX();const newAmount=Number.constrain(offsetX.amount+shiftX,-InlineEditor.CSSShadowEditor.maxRange,InlineEditor.CSSShadowEditor.maxRange);if(newAmount===offsetX.amount)
|
return;this._model.setOffsetX(new InlineEditor.CSSLength(newAmount,offsetX.unit||InlineEditor.CSSShadowEditor.defaultUnit));this._xInput.value=this._model.offsetX().asCSSText();this._xInput.classList.remove('invalid');}
|
if(shiftY){const offsetY=this._model.offsetY();const newAmount=Number.constrain(offsetY.amount+shiftY,-InlineEditor.CSSShadowEditor.maxRange,InlineEditor.CSSShadowEditor.maxRange);if(newAmount===offsetY.amount)
|
return;this._model.setOffsetY(new InlineEditor.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 UI.Geometry.Point(point.x,point.y);return point.scale(max/Math.max(Math.abs(point.x),Math.abs(point.y)));}
|
_snapToClosestDirection(point){let minDistance=Number.MAX_VALUE;let closestPoint=point;const directions=[new UI.Geometry.Point(0,-1),new UI.Geometry.Point(1,-1),new UI.Geometry.Point(1,0),new UI.Geometry.Point(1,1)];for(const direction of directions){const projection=point.projectOn(direction);const distance=point.distanceTo(projection);if(distance<minDistance){minDistance=distance;closestPoint=projection;}}
|
return closestPoint;}
|
_sliderThumbPosition(){const x=(this._model.offsetX().amount/InlineEditor.CSSShadowEditor.maxRange)*this._innerCanvasSize;const y=(this._model.offsetY().amount/InlineEditor.CSSShadowEditor.maxRange)*this._innerCanvasSize;return this._constrainPoint(new UI.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.GlassPane();this._popover.registerRequiredCSS('inline_editor/swatchPopover.css');this._popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MeasureContent);this._popover.setMarginBehavior(UI.GlassPane.MarginBehavior.Arrow);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();const 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._view.show(this._popover.contentElement);this._popover.setContentAnchorBox(this._anchorElement.boxInWindow());this._popover.show(this._anchorElement.ownerDocument);this._view.contentElement.addEventListener('focusout',this._boundFocusOut,false);if(!this._focusRestorer)
|
this._focusRestorer=new UI.WidgetFocusRestorer(this._view);}
|
hide(commitEdit){if(this._isHidden)
|
return;const 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);}}};;InlineEditor.CSSShadowModel=class{constructor(isBoxShadow){this._isBoxShadow=isBoxShadow;this._inset=false;this._offsetX=InlineEditor.CSSLength.zero();this._offsetY=InlineEditor.CSSLength.zero();this._blurRadius=InlineEditor.CSSLength.zero();this._spreadRadius=InlineEditor.CSSLength.zero();this._color=(Common.Color.parse('black'));this._format=[InlineEditor.CSSShadowModel._Part.OffsetX,InlineEditor.CSSShadowModel._Part.OffsetY];}
|
static parseTextShadow(text){return InlineEditor.CSSShadowModel._parseShadow(text,false);}
|
static parseBoxShadow(text){return InlineEditor.CSSShadowModel._parseShadow(text,true);}
|
static _parseShadow(text,isBoxShadow){const shadowTexts=[];const splits=TextUtils.TextUtils.splitStringByRegexes(text,[Common.Color.Regex,/,/g]);let currentIndex=0;for(let i=0;i<splits.length;i++){if(splits[i].regexIndex===1){const comma=splits[i];shadowTexts.push(text.substring(currentIndex,comma.position));currentIndex=comma.position+1;}}
|
shadowTexts.push(text.substring(currentIndex,text.length));const shadows=[];for(let i=0;i<shadowTexts.length;i++){const shadow=new InlineEditor.CSSShadowModel(isBoxShadow);shadow._format=[];let nextPartAllowed=true;const regexes=[/inset/gi,Common.Color.Regex,InlineEditor.CSSLength.Regex];const results=TextUtils.TextUtils.splitStringByRegexes(shadowTexts[i],regexes);for(let j=0;j<results.length;j++){const result=results[j];if(result.regexIndex===-1){if(/\S/.test(result.value))
|
return[];nextPartAllowed=true;}else{if(!nextPartAllowed)
|
return[];nextPartAllowed=false;if(result.regexIndex===0){shadow._inset=true;shadow._format.push(InlineEditor.CSSShadowModel._Part.Inset);}else if(result.regexIndex===1){const color=Common.Color.parse(result.value);if(!color)
|
return[];shadow._color=color;shadow._format.push(InlineEditor.CSSShadowModel._Part.Color);}else if(result.regexIndex===2){const length=InlineEditor.CSSLength.parse(result.value);if(!length)
|
return[];const previousPart=shadow._format.length>0?shadow._format[shadow._format.length-1]:'';if(previousPart===InlineEditor.CSSShadowModel._Part.OffsetX){shadow._offsetY=length;shadow._format.push(InlineEditor.CSSShadowModel._Part.OffsetY);}else if(previousPart===InlineEditor.CSSShadowModel._Part.OffsetY){shadow._blurRadius=length;shadow._format.push(InlineEditor.CSSShadowModel._Part.BlurRadius);}else if(previousPart===InlineEditor.CSSShadowModel._Part.BlurRadius){shadow._spreadRadius=length;shadow._format.push(InlineEditor.CSSShadowModel._Part.SpreadRadius);}else{shadow._offsetX=length;shadow._format.push(InlineEditor.CSSShadowModel._Part.OffsetX);}}}}
|
if(invalidCount(shadow,InlineEditor.CSSShadowModel._Part.OffsetX,1,1)||invalidCount(shadow,InlineEditor.CSSShadowModel._Part.OffsetY,1,1)||invalidCount(shadow,InlineEditor.CSSShadowModel._Part.Color,0,1)||invalidCount(shadow,InlineEditor.CSSShadowModel._Part.BlurRadius,0,1)||invalidCount(shadow,InlineEditor.CSSShadowModel._Part.Inset,0,isBoxShadow?1:0)||invalidCount(shadow,InlineEditor.CSSShadowModel._Part.SpreadRadius,0,isBoxShadow?1:0))
|
return[];shadows.push(shadow);}
|
return shadows;function invalidCount(shadow,part,min,max){let count=0;for(let i=0;i<shadow._format.length;i++){if(shadow._format[i]===part)
|
count++;}
|
return count<min||count>max;}}
|
setInset(inset){this._inset=inset;if(this._format.indexOf(InlineEditor.CSSShadowModel._Part.Inset)===-1)
|
this._format.unshift(InlineEditor.CSSShadowModel._Part.Inset);}
|
setOffsetX(offsetX){this._offsetX=offsetX;}
|
setOffsetY(offsetY){this._offsetY=offsetY;}
|
setBlurRadius(blurRadius){this._blurRadius=blurRadius;if(this._format.indexOf(InlineEditor.CSSShadowModel._Part.BlurRadius)===-1){const yIndex=this._format.indexOf(InlineEditor.CSSShadowModel._Part.OffsetY);this._format.splice(yIndex+1,0,InlineEditor.CSSShadowModel._Part.BlurRadius);}}
|
setSpreadRadius(spreadRadius){this._spreadRadius=spreadRadius;if(this._format.indexOf(InlineEditor.CSSShadowModel._Part.SpreadRadius)===-1){this.setBlurRadius(this._blurRadius);const blurIndex=this._format.indexOf(InlineEditor.CSSShadowModel._Part.BlurRadius);this._format.splice(blurIndex+1,0,InlineEditor.CSSShadowModel._Part.SpreadRadius);}}
|
setColor(color){this._color=color;if(this._format.indexOf(InlineEditor.CSSShadowModel._Part.Color)===-1)
|
this._format.push(InlineEditor.CSSShadowModel._Part.Color);}
|
isBoxShadow(){return this._isBoxShadow;}
|
inset(){return this._inset;}
|
offsetX(){return this._offsetX;}
|
offsetY(){return this._offsetY;}
|
blurRadius(){return this._blurRadius;}
|
spreadRadius(){return this._spreadRadius;}
|
color(){return this._color;}
|
asCSSText(){const parts=[];for(let i=0;i<this._format.length;i++){const part=this._format[i];if(part===InlineEditor.CSSShadowModel._Part.Inset&&this._inset)
|
parts.push('inset');else if(part===InlineEditor.CSSShadowModel._Part.OffsetX)
|
parts.push(this._offsetX.asCSSText());else if(part===InlineEditor.CSSShadowModel._Part.OffsetY)
|
parts.push(this._offsetY.asCSSText());else if(part===InlineEditor.CSSShadowModel._Part.BlurRadius)
|
parts.push(this._blurRadius.asCSSText());else if(part===InlineEditor.CSSShadowModel._Part.SpreadRadius)
|
parts.push(this._spreadRadius.asCSSText());else if(part===InlineEditor.CSSShadowModel._Part.Color)
|
parts.push(this._color.asString(this._color.format()));}
|
return parts.join(' ');}};InlineEditor.CSSShadowModel._Part={Inset:'I',OffsetX:'X',OffsetY:'Y',BlurRadius:'B',SpreadRadius:'S',Color:'C'};InlineEditor.CSSLength=class{constructor(amount,unit){this.amount=amount;this.unit=unit;}
|
static parse(text){const lengthRegex=new RegExp('^(?:'+InlineEditor.CSSLength.Regex.source+')$','i');const match=text.match(lengthRegex);if(!match)
|
return null;if(match.length>2&&match[2])
|
return new InlineEditor.CSSLength(parseFloat(match[1]),match[2]);return InlineEditor.CSSLength.zero();}
|
static zero(){return new InlineEditor.CSSLength(0,'');}
|
asCSSText(){return this.amount+this.unit;}};InlineEditor.CSSLength.Regex=(function(){const number='([+-]?(?:[0-9]*[.])?[0-9]+(?:[eE][+-]?[0-9]+)?)';const unit='(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)';const zero='[+-]?(?:0*[.])?0+(?:[eE][+-]?[0-9]+)?';return new RegExp(number+unit+'|'+zero,'gi');})();;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-flex-field {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n\n.shadow-editor-field.shadow-editor-blur-field {\n margin-top: 40px;\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 font-weight: 500;\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 width: 52px;\n margin-right: 8px;\n text-align: right;\n}\n\n/*# sourceURL=inline_editor/cssShadowEditor.css */";Runtime.cachedResources["inline_editor/swatchPopover.css"]="/*\n * Copyright 2017 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.widget {\n display: flex;\n background: white;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);\n border-radius: 2px;\n overflow: auto;\n -webkit-user-select: text;\n line-height: 11px;\n}\n\n/*# sourceURL=inline_editor/swatchPopover.css */";
|
