OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2007 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Joseph Pecoraro | 3 * Copyright (C) 2009 Joseph Pecoraro |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * | 8 * |
9 * 1. Redistributions of source code must retain the above copyright | 9 * 1. Redistributions of source code must retain the above copyright |
10 * notice, this list of conditions and the following disclaimer. | 10 * notice, this list of conditions and the following disclaimer. |
11 * 2. Redistributions in binary form must reproduce the above copyright | 11 * 2. Redistributions in binary form must reproduce the above copyright |
12 * notice, this list of conditions and the following disclaimer in the | 12 * notice, this list of conditions and the following disclaimer in the |
13 * documentation and/or other materials provided with the distribution. | 13 * documentation and/or other materials provided with the distribution. |
14 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of | 14 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of |
15 * its contributors may be used to endorse or promote products derived | 15 * its contributors may be used to endorse or promote products derived |
16 * from this software without specific prior written permission. | 16 * from this software without specific prior written permission. |
17 * | 17 * |
18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY | 18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY |
19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | 19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | 20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY | 21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY |
22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | 22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | 23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | 24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | 26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
28 */ | 28 */ |
29 | 29 |
30 /** | |
31 * @unrestricted | |
32 */ | |
33 Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { | 30 Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane { |
34 constructor() { | 31 constructor() { |
35 super(); | 32 super(); |
36 this.setMinimumSize(96, 26); | 33 this.setMinimumSize(96, 26); |
37 | 34 |
38 Common.moduleSetting('colorFormat').addChangeListener(this.update.bind(this)
); | 35 Common.moduleSetting('colorFormat').addChangeListener(this.update.bind(this)
); |
39 Common.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(
this)); | 36 Common.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(
this)); |
40 | 37 |
41 this._sectionsContainer = this.element.createChild('div'); | 38 this._sectionsContainer = this.element.createChild('div'); |
42 this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper(); | 39 this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper(); |
43 this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLi
nkLength, /* useLinkDecorator */ true); | 40 this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLi
nkLength, /* useLinkDecorator */ true); |
| 41 /** @type {?Elements.StylePropertyHighlighter} */ |
| 42 this._decorator = null; |
| 43 this._userOperation = false; |
| 44 this._isEditingStyle = false; |
| 45 /** @type {?RegExp} */ |
| 46 this._filterRegex = null; |
| 47 |
| 48 /** @type {?Elements.StylePropertyTreeElement} */ |
| 49 this._mouseDownTreeElement = null; |
| 50 this._mouseDownTreeElementIsName = false; |
| 51 this._mouseDownTreeElementIsValue = false; |
44 | 52 |
45 this.element.classList.add('styles-pane'); | 53 this.element.classList.add('styles-pane'); |
46 | 54 |
47 /** @type {!Array<!Elements.SectionBlock>} */ | 55 /** @type {!Array<!Elements.SectionBlock>} */ |
48 this._sectionBlocks = []; | 56 this._sectionBlocks = []; |
49 Elements.StylesSidebarPane._instance = this; | 57 Elements.StylesSidebarPane._instance = this; |
50 UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this); | 58 UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this); |
51 } | 59 } |
52 | 60 |
53 /** | 61 /** |
(...skipping 288 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
342 for (var section of block.sections) | 350 for (var section of block.sections) |
343 this._sectionsContainer.appendChild(section.element); | 351 this._sectionsContainer.appendChild(section.element); |
344 } | 352 } |
345 | 353 |
346 if (this._filterRegex) | 354 if (this._filterRegex) |
347 this._updateFilter(); | 355 this._updateFilter(); |
348 | 356 |
349 this._nodeStylesUpdatedForTest(node, true); | 357 this._nodeStylesUpdatedForTest(node, true); |
350 if (this._decorator) { | 358 if (this._decorator) { |
351 this._decorator.perform(); | 359 this._decorator.perform(); |
352 delete this._decorator; | 360 this._decorator = null; |
353 } | 361 } |
354 } | 362 } |
355 | 363 |
356 /** | 364 /** |
357 * @param {!SDK.DOMNode} node | 365 * @param {!SDK.DOMNode} node |
358 * @param {boolean} rebuild | 366 * @param {boolean} rebuild |
359 */ | 367 */ |
360 _nodeStylesUpdatedForTest(node, rebuild) { | 368 _nodeStylesUpdatedForTest(node, rebuild) { |
361 // For sniffing in tests. | 369 // For sniffing in tests. |
362 } | 370 } |
(...skipping 25 matching lines...) Expand all Loading... |
388 if (!cssModel || !node) | 396 if (!cssModel || !node) |
389 return; | 397 return; |
390 this._userOperation = true; | 398 this._userOperation = true; |
391 cssModel.requestViaInspectorStylesheet(node, onViaInspectorStyleSheet.bind(t
his)); | 399 cssModel.requestViaInspectorStylesheet(node, onViaInspectorStyleSheet.bind(t
his)); |
392 | 400 |
393 /** | 401 /** |
394 * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader | 402 * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader |
395 * @this {Elements.StylesSidebarPane} | 403 * @this {Elements.StylesSidebarPane} |
396 */ | 404 */ |
397 function onViaInspectorStyleSheet(styleSheetHeader) { | 405 function onViaInspectorStyleSheet(styleSheetHeader) { |
398 delete this._userOperation; | 406 this._userOperation = false; |
399 this._createNewRuleInStyleSheet(styleSheetHeader); | 407 this._createNewRuleInStyleSheet(styleSheetHeader); |
400 } | 408 } |
401 } | 409 } |
402 | 410 |
403 /** | 411 /** |
404 * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader | 412 * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader |
405 */ | 413 */ |
406 _createNewRuleInStyleSheet(styleSheetHeader) { | 414 _createNewRuleInStyleSheet(styleSheetHeader) { |
407 if (!styleSheetHeader) | 415 if (!styleSheetHeader) |
408 return; | 416 return; |
(...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
482 allSections() { | 490 allSections() { |
483 var sections = []; | 491 var sections = []; |
484 for (var block of this._sectionBlocks) | 492 for (var block of this._sectionBlocks) |
485 sections = sections.concat(block.sections); | 493 sections = sections.concat(block.sections); |
486 return sections; | 494 return sections; |
487 } | 495 } |
488 }; | 496 }; |
489 | 497 |
490 Elements.StylesSidebarPane._maxLinkLength = 30; | 498 Elements.StylesSidebarPane._maxLinkLength = 30; |
491 | 499 |
492 /** | |
493 * @unrestricted | |
494 */ | |
495 Elements.SectionBlock = class { | 500 Elements.SectionBlock = class { |
496 /** | 501 /** |
497 * @param {?Element} titleElement | 502 * @param {?Element} titleElement |
498 */ | 503 */ |
499 constructor(titleElement) { | 504 constructor(titleElement) { |
500 this._titleElement = titleElement; | 505 this._titleElement = titleElement; |
501 this.sections = []; | 506 this.sections = []; |
502 } | 507 } |
503 | 508 |
504 /** | 509 /** |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
545 } | 550 } |
546 | 551 |
547 /** | 552 /** |
548 * @return {?Element} | 553 * @return {?Element} |
549 */ | 554 */ |
550 titleElement() { | 555 titleElement() { |
551 return this._titleElement; | 556 return this._titleElement; |
552 } | 557 } |
553 }; | 558 }; |
554 | 559 |
555 | |
556 /** | |
557 * @unrestricted | |
558 */ | |
559 Elements.StylePropertiesSection = class { | 560 Elements.StylePropertiesSection = class { |
560 /** | 561 /** |
561 * @param {!Elements.StylesSidebarPane} parentPane | 562 * @param {!Elements.StylesSidebarPane} parentPane |
562 * @param {!SDK.CSSMatchedStyles} matchedStyles | 563 * @param {!SDK.CSSMatchedStyles} matchedStyles |
563 * @param {!SDK.CSSStyleDeclaration} style | 564 * @param {!SDK.CSSStyleDeclaration} style |
564 */ | 565 */ |
565 constructor(parentPane, matchedStyles, style) { | 566 constructor(parentPane, matchedStyles, style) { |
566 this._parentPane = parentPane; | 567 this._parentPane = parentPane; |
567 this._style = style; | 568 this._style = style; |
568 this._matchedStyles = matchedStyles; | 569 this._matchedStyles = matchedStyles; |
569 this.editable = !!(style.styleSheetId && style.range); | 570 this.editable = !!(style.styleSheetId && style.range); |
| 571 /** @type {?number} */ |
| 572 this._hoverTimer = null; |
| 573 /** @type {?function(!Elements.StylePropertiesSection)} */ |
| 574 this._afterUpdate = null; |
| 575 this._willCauseCancelEditing = false; |
570 | 576 |
571 var rule = style.parentRule; | 577 var rule = style.parentRule; |
572 this.element = createElementWithClass('div', 'styles-section matched-styles
monospace'); | 578 this.element = createElementWithClass('div', 'styles-section matched-styles
monospace'); |
573 this.element._section = this; | 579 this.element._section = this; |
574 | 580 |
575 this._titleElement = this.element.createChild('div', 'styles-section-title '
+ (rule ? 'styles-selector' : '')); | 581 this._titleElement = this.element.createChild('div', 'styles-section-title '
+ (rule ? 'styles-selector' : '')); |
576 | 582 |
577 this.propertiesTreeOutline = new UI.TreeOutlineInShadow(); | 583 this.propertiesTreeOutline = new UI.TreeOutlineInShadow(); |
578 this.propertiesTreeOutline.registerRequiredCSS('elements/stylesSectionTree.c
ss'); | 584 this.propertiesTreeOutline.registerRequiredCSS('elements/stylesSectionTree.c
ss'); |
579 this.propertiesTreeOutline.element.classList.add('style-properties', 'matche
d-styles', 'monospace'); | 585 this.propertiesTreeOutline.element.classList.add('style-properties', 'matche
d-styles', 'monospace'); |
(...skipping 470 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1050 child.setOverloaded(this._isPropertyOverloaded(child.property)); | 1056 child.setOverloaded(this._isPropertyOverloaded(child.property)); |
1051 child = child.traverseNextTreeElement(false, null, true); | 1057 child = child.traverseNextTreeElement(false, null, true); |
1052 } | 1058 } |
1053 } | 1059 } |
1054 this.afterUpdate(); | 1060 this.afterUpdate(); |
1055 } | 1061 } |
1056 | 1062 |
1057 afterUpdate() { | 1063 afterUpdate() { |
1058 if (this._afterUpdate) { | 1064 if (this._afterUpdate) { |
1059 this._afterUpdate(this); | 1065 this._afterUpdate(this); |
1060 delete this._afterUpdate; | 1066 this._afterUpdate = null; |
1061 this._afterUpdateFinishedForTest(); | 1067 this._afterUpdateFinishedForTest(); |
1062 } | 1068 } |
1063 } | 1069 } |
1064 | 1070 |
1065 _afterUpdateFinishedForTest() { | 1071 _afterUpdateFinishedForTest() { |
1066 } | 1072 } |
1067 | 1073 |
1068 onpopulate() { | 1074 onpopulate() { |
1069 var style = this._style; | 1075 var style = this._style; |
1070 for (var property of style.leadingProperties()) { | 1076 for (var property of style.leadingProperties()) { |
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1183 var selectorMatchesFilter = !!regex && regex.test(selectors[i].textContent
); | 1189 var selectorMatchesFilter = !!regex && regex.test(selectors[i].textContent
); |
1184 selectors[i].classList.toggle('filter-match', selectorMatchesFilter); | 1190 selectors[i].classList.toggle('filter-match', selectorMatchesFilter); |
1185 } | 1191 } |
1186 } | 1192 } |
1187 | 1193 |
1188 /** | 1194 /** |
1189 * @return {boolean} | 1195 * @return {boolean} |
1190 */ | 1196 */ |
1191 _checkWillCancelEditing() { | 1197 _checkWillCancelEditing() { |
1192 var willCauseCancelEditing = this._willCauseCancelEditing; | 1198 var willCauseCancelEditing = this._willCauseCancelEditing; |
1193 delete this._willCauseCancelEditing; | 1199 this._willCauseCancelEditing = false; |
1194 return willCauseCancelEditing; | 1200 return willCauseCancelEditing; |
1195 } | 1201 } |
1196 | 1202 |
1197 /** | 1203 /** |
1198 * @param {!Event} event | 1204 * @param {!Event} event |
1199 */ | 1205 */ |
1200 _handleSelectorContainerClick(event) { | 1206 _handleSelectorContainerClick(event) { |
1201 if (this._checkWillCancelEditing() || !this.editable) | 1207 if (this._checkWillCancelEditing() || !this.editable) |
1202 return; | 1208 return; |
1203 if (event.target === this._selectorContainer) { | 1209 if (event.target === this._selectorContainer) { |
(...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1340 | 1346 |
1341 /** | 1347 /** |
1342 * @param {boolean} success | 1348 * @param {boolean} success |
1343 * @this {Elements.StylePropertiesSection} | 1349 * @this {Elements.StylePropertiesSection} |
1344 */ | 1350 */ |
1345 function userCallback(success) { | 1351 function userCallback(success) { |
1346 if (success) { | 1352 if (success) { |
1347 this._matchedStyles.resetActiveProperties(); | 1353 this._matchedStyles.resetActiveProperties(); |
1348 this._parentPane._refreshUpdate(this); | 1354 this._parentPane._refreshUpdate(this); |
1349 } | 1355 } |
1350 delete this._parentPane._userOperation; | 1356 this._parentPane._userOperation = false; |
1351 this._editingMediaTextCommittedForTest(); | 1357 this._editingMediaTextCommittedForTest(); |
1352 } | 1358 } |
1353 | 1359 |
1354 // This gets deleted in finishOperation(), which is called both on success a
nd failure. | 1360 // This gets deleted in finishOperation(), which is called both on success a
nd failure. |
1355 this._parentPane._userOperation = true; | 1361 this._parentPane._userOperation = true; |
1356 this._parentPane.cssModel().setMediaText(media.styleSheetId, media.range, ne
wContent).then(userCallback.bind(this)); | 1362 this._parentPane.cssModel().setMediaText(media.styleSheetId, media.range, ne
wContent).then(userCallback.bind(this)); |
1357 } | 1363 } |
1358 | 1364 |
1359 _editingMediaTextCommittedForTest() { | 1365 _editingMediaTextCommittedForTest() { |
1360 } | 1366 } |
(...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1467 return; | 1473 return; |
1468 } | 1474 } |
1469 var rule = this._style.parentRule; | 1475 var rule = this._style.parentRule; |
1470 if (!rule) | 1476 if (!rule) |
1471 return; | 1477 return; |
1472 | 1478 |
1473 /** | 1479 /** |
1474 * @this {Elements.StylePropertiesSection} | 1480 * @this {Elements.StylePropertiesSection} |
1475 */ | 1481 */ |
1476 function headerTextCommitted() { | 1482 function headerTextCommitted() { |
1477 delete this._parentPane._userOperation; | 1483 this._parentPane._userOperation = false; |
1478 this._moveEditorFromSelector(moveDirection); | 1484 this._moveEditorFromSelector(moveDirection); |
1479 this._editingSelectorCommittedForTest(); | 1485 this._editingSelectorCommittedForTest(); |
1480 } | 1486 } |
1481 | 1487 |
1482 // This gets deleted in finishOperationAndMoveEditor(), which is called both
on success and failure. | 1488 // This gets deleted in finishOperationAndMoveEditor(), which is called both
on success and failure. |
1483 this._parentPane._userOperation = true; | 1489 this._parentPane._userOperation = true; |
1484 this._setHeaderText(rule, newContent).then(headerTextCommitted.bind(this)); | 1490 this._setHeaderText(rule, newContent).then(headerTextCommitted.bind(this)); |
1485 } | 1491 } |
1486 | 1492 |
1487 /** | 1493 /** |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1536 | 1542 |
1537 editingSelectorCancelled() { | 1543 editingSelectorCancelled() { |
1538 this._editingSelectorEnded(); | 1544 this._editingSelectorEnded(); |
1539 | 1545 |
1540 // Mark the selectors in group if necessary. | 1546 // Mark the selectors in group if necessary. |
1541 // This is overridden by BlankStylePropertiesSection. | 1547 // This is overridden by BlankStylePropertiesSection. |
1542 this._markSelectorMatches(); | 1548 this._markSelectorMatches(); |
1543 } | 1549 } |
1544 }; | 1550 }; |
1545 | 1551 |
1546 | |
1547 /** | |
1548 * @unrestricted | |
1549 */ | |
1550 Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec
tion { | 1552 Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSec
tion { |
1551 /** | 1553 /** |
1552 * @param {!Elements.StylesSidebarPane} stylesPane | 1554 * @param {!Elements.StylesSidebarPane} stylesPane |
1553 * @param {!SDK.CSSMatchedStyles} matchedStyles | 1555 * @param {!SDK.CSSMatchedStyles} matchedStyles |
1554 * @param {string} defaultSelectorText | 1556 * @param {string} defaultSelectorText |
1555 * @param {string} styleSheetId | 1557 * @param {string} styleSheetId |
1556 * @param {!Common.TextRange} ruleLocation | 1558 * @param {!Common.TextRange} ruleLocation |
1557 * @param {!SDK.CSSStyleDeclaration} insertAfterStyle | 1559 * @param {!SDK.CSSStyleDeclaration} insertAfterStyle |
1558 */ | 1560 */ |
1559 constructor(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, rule
Location, insertAfterStyle) { | 1561 constructor(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, rule
Location, insertAfterStyle) { |
1560 var cssModel = /** @type {!SDK.CSSModel} */ (stylesPane.cssModel()); | 1562 var cssModel = /** @type {!SDK.CSSModel} */ (stylesPane.cssModel()); |
1561 var rule = SDK.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText); | 1563 var rule = SDK.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText); |
1562 super(stylesPane, matchedStyles, rule.style); | 1564 super(stylesPane, matchedStyles, rule.style); |
| 1565 this._normal = false; |
1563 this._ruleLocation = ruleLocation; | 1566 this._ruleLocation = ruleLocation; |
1564 this._styleSheetId = styleSheetId; | 1567 this._styleSheetId = styleSheetId; |
1565 this._selectorRefElement.removeChildren(); | 1568 this._selectorRefElement.removeChildren(); |
1566 this._selectorRefElement.appendChild(Elements.StylePropertiesSection._linkif
yRuleLocation( | 1569 this._selectorRefElement.appendChild(Elements.StylePropertiesSection._linkif
yRuleLocation( |
1567 cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLoc
ation())); | 1570 cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLoc
ation())); |
1568 if (insertAfterStyle && insertAfterStyle.parentRule) | 1571 if (insertAfterStyle && insertAfterStyle.parentRule) |
1569 this._createMediaList(insertAfterStyle.parentRule.media); | 1572 this._createMediaList(insertAfterStyle.parentRule.media); |
1570 this.element.classList.add('blank-section'); | 1573 this.element.classList.add('blank-section'); |
1571 } | 1574 } |
1572 | 1575 |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1604 */ | 1607 */ |
1605 editingSelectorCommitted(element, newContent, oldContent, context, moveDirecti
on) { | 1608 editingSelectorCommitted(element, newContent, oldContent, context, moveDirecti
on) { |
1606 if (!this.isBlank) { | 1609 if (!this.isBlank) { |
1607 super.editingSelectorCommitted(element, newContent, oldContent, context, m
oveDirection); | 1610 super.editingSelectorCommitted(element, newContent, oldContent, context, m
oveDirection); |
1608 return; | 1611 return; |
1609 } | 1612 } |
1610 | 1613 |
1611 /** | 1614 /** |
1612 * @param {?SDK.CSSStyleRule} newRule | 1615 * @param {?SDK.CSSStyleRule} newRule |
1613 * @return {!Promise} | 1616 * @return {!Promise} |
1614 * @this {Elements.StylePropertiesSection} | 1617 * @this {Elements.BlankStylePropertiesSection} |
1615 */ | 1618 */ |
1616 function onRuleAdded(newRule) { | 1619 function onRuleAdded(newRule) { |
1617 if (!newRule) { | 1620 if (!newRule) { |
1618 this.editingSelectorCancelled(); | 1621 this.editingSelectorCancelled(); |
1619 this._editingSelectorCommittedForTest(); | 1622 this._editingSelectorCommittedForTest(); |
1620 return Promise.resolve(); | 1623 return Promise.resolve(); |
1621 } | 1624 } |
1622 return this._matchedStyles.addNewRule(newRule, this._matchedStyles.node()) | 1625 return this._matchedStyles.addNewRule(newRule, this._matchedStyles.node()) |
1623 .then(onAddedToCascade.bind(this, newRule)); | 1626 .then(onAddedToCascade.bind(this, newRule)); |
1624 } | 1627 } |
1625 | 1628 |
1626 /** | 1629 /** |
1627 * @param {!SDK.CSSStyleRule} newRule | 1630 * @param {!SDK.CSSStyleRule} newRule |
1628 * @this {Elements.StylePropertiesSection} | 1631 * @this {Elements.BlankStylePropertiesSection} |
1629 */ | 1632 */ |
1630 function onAddedToCascade(newRule) { | 1633 function onAddedToCascade(newRule) { |
1631 var doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors
(newRule).length > 0; | 1634 var doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors
(newRule).length > 0; |
1632 this._makeNormal(newRule); | 1635 this._makeNormal(newRule); |
1633 | 1636 |
1634 if (!doesSelectorAffectSelectedNode) | 1637 if (!doesSelectorAffectSelectedNode) |
1635 this.propertiesTreeOutline.element.classList.add('no-affect'); | 1638 this.propertiesTreeOutline.element.classList.add('no-affect'); |
1636 | 1639 |
1637 this._updateRuleOrigin(); | 1640 this._updateRuleOrigin(); |
1638 if (this.element.parentElement) // Might have been detached already. | 1641 if (this.element.parentElement) // Might have been detached already. |
1639 this._moveEditorFromSelector(moveDirection); | 1642 this._moveEditorFromSelector(moveDirection); |
1640 | 1643 |
1641 delete this._parentPane._userOperation; | 1644 this._parentPane._userOperation = false; |
1642 this._editingSelectorEnded(); | 1645 this._editingSelectorEnded(); |
1643 this._markSelectorMatches(); | 1646 this._markSelectorMatches(); |
1644 | 1647 |
1645 this._editingSelectorCommittedForTest(); | 1648 this._editingSelectorCommittedForTest(); |
1646 } | 1649 } |
1647 | 1650 |
1648 if (newContent) | 1651 if (newContent) |
1649 newContent = newContent.trim(); | 1652 newContent = newContent.trim(); |
1650 this._parentPane._userOperation = true; | 1653 this._parentPane._userOperation = true; |
1651 | 1654 |
1652 var cssModel = this._parentPane.cssModel(); | 1655 var cssModel = this._parentPane.cssModel(); |
1653 var ruleText = this._rulePrefix() + newContent + ' {}'; | 1656 var ruleText = this._rulePrefix() + newContent + ' {}'; |
1654 cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation).then(onRu
leAdded.bind(this)); | 1657 cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation).then(onRu
leAdded.bind(this)); |
1655 } | 1658 } |
1656 | 1659 |
1657 /** | 1660 /** |
1658 * @override | 1661 * @override |
1659 */ | 1662 */ |
1660 editingSelectorCancelled() { | 1663 editingSelectorCancelled() { |
1661 delete this._parentPane._userOperation; | 1664 this._parentPane._userOperation = false; |
1662 if (!this.isBlank) { | 1665 if (!this.isBlank) { |
1663 super.editingSelectorCancelled(); | 1666 super.editingSelectorCancelled(); |
1664 return; | 1667 return; |
1665 } | 1668 } |
1666 | 1669 |
1667 this._editingSelectorEnded(); | 1670 this._editingSelectorEnded(); |
1668 this._parentPane.removeSection(this); | 1671 this._parentPane.removeSection(this); |
1669 } | 1672 } |
1670 | 1673 |
1671 /** | 1674 /** |
1672 * @param {!SDK.CSSRule} newRule | 1675 * @param {!SDK.CSSRule} newRule |
1673 */ | 1676 */ |
1674 _makeNormal(newRule) { | 1677 _makeNormal(newRule) { |
1675 this.element.classList.remove('blank-section'); | 1678 this.element.classList.remove('blank-section'); |
1676 this._style = newRule.style; | 1679 this._style = newRule.style; |
1677 // FIXME: replace this instance by a normal Elements.StylePropertiesSection. | 1680 // FIXME: replace this instance by a normal Elements.StylePropertiesSection. |
1678 this._normal = true; | 1681 this._normal = true; |
1679 } | 1682 } |
1680 }; | 1683 }; |
1681 | 1684 |
1682 /** | |
1683 * @unrestricted | |
1684 */ | |
1685 Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSecti
on { | 1685 Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSecti
on { |
1686 /** | 1686 /** |
1687 * @param {!Elements.StylesSidebarPane} stylesPane | 1687 * @param {!Elements.StylesSidebarPane} stylesPane |
1688 * @param {!SDK.CSSMatchedStyles} matchedStyles | 1688 * @param {!SDK.CSSMatchedStyles} matchedStyles |
1689 * @param {!SDK.CSSStyleDeclaration} style | 1689 * @param {!SDK.CSSStyleDeclaration} style |
1690 */ | 1690 */ |
1691 constructor(stylesPane, matchedStyles, style) { | 1691 constructor(stylesPane, matchedStyles, style) { |
1692 super(stylesPane, matchedStyles, style); | 1692 super(stylesPane, matchedStyles, style); |
1693 this._selectorElement.className = 'keyframe-key'; | 1693 this._selectorElement.className = 'keyframe-key'; |
1694 } | 1694 } |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1756 this._selectorElement.textContent = this._style.parentRule.key().text; | 1756 this._selectorElement.textContent = this._style.parentRule.key().text; |
1757 } | 1757 } |
1758 | 1758 |
1759 /** | 1759 /** |
1760 * @override | 1760 * @override |
1761 */ | 1761 */ |
1762 _highlight() { | 1762 _highlight() { |
1763 } | 1763 } |
1764 }; | 1764 }; |
1765 | 1765 |
1766 /** | |
1767 * @unrestricted | |
1768 */ | |
1769 Elements.StylePropertyTreeElement = class extends UI.TreeElement { | 1766 Elements.StylePropertyTreeElement = class extends UI.TreeElement { |
1770 /** | 1767 /** |
1771 * @param {!Elements.StylesSidebarPane} stylesPane | 1768 * @param {!Elements.StylesSidebarPane} stylesPane |
1772 * @param {!SDK.CSSMatchedStyles} matchedStyles | 1769 * @param {!SDK.CSSMatchedStyles} matchedStyles |
1773 * @param {!SDK.CSSProperty} property | 1770 * @param {!SDK.CSSProperty} property |
1774 * @param {boolean} isShorthand | 1771 * @param {boolean} isShorthand |
1775 * @param {boolean} inherited | 1772 * @param {boolean} inherited |
1776 * @param {boolean} overloaded | 1773 * @param {boolean} overloaded |
1777 */ | 1774 */ |
1778 constructor(stylesPane, matchedStyles, property, isShorthand, inherited, overl
oaded) { | 1775 constructor(stylesPane, matchedStyles, property, isShorthand, inherited, overl
oaded) { |
1779 // Pass an empty title, the title gets made later in onattach. | 1776 // Pass an empty title, the title gets made later in onattach. |
1780 super('', isShorthand); | 1777 super('', isShorthand); |
1781 this._style = property.ownerStyle; | 1778 this._style = property.ownerStyle; |
1782 this._matchedStyles = matchedStyles; | 1779 this._matchedStyles = matchedStyles; |
1783 this.property = property; | 1780 this.property = property; |
1784 this._inherited = inherited; | 1781 this._inherited = inherited; |
1785 this._overloaded = overloaded; | 1782 this._overloaded = overloaded; |
1786 this.selectable = false; | 1783 this.selectable = false; |
1787 this._parentPane = stylesPane; | 1784 this._parentPane = stylesPane; |
1788 this.isShorthand = isShorthand; | 1785 this.isShorthand = isShorthand; |
1789 this._applyStyleThrottler = new Common.Throttler(0); | 1786 this._applyStyleThrottler = new Common.Throttler(0); |
| 1787 this._newProperty = false; |
| 1788 this._expandedDueToFilter = false; |
| 1789 this.valueElement = null; |
| 1790 this.nameElement = null; |
| 1791 this._expandElement = null; |
| 1792 this._originalPropertyText = ''; |
| 1793 this._prompt = null; |
| 1794 this._propertyHasBeenEditedIncrementally = false; |
1790 } | 1795 } |
1791 | 1796 |
1792 /** | 1797 /** |
1793 * @return {boolean} | 1798 * @return {boolean} |
1794 */ | 1799 */ |
1795 _editable() { | 1800 _editable() { |
1796 return !!(this._style.styleSheetId && this._style.range); | 1801 return !!(this._style.styleSheetId && this._style.range); |
1797 } | 1802 } |
1798 | 1803 |
1799 /** | 1804 /** |
(...skipping 231 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2031 var disabled = !event.target.checked; | 2036 var disabled = !event.target.checked; |
2032 var oldStyleRange = this._style.range; | 2037 var oldStyleRange = this._style.range; |
2033 if (!oldStyleRange) | 2038 if (!oldStyleRange) |
2034 return; | 2039 return; |
2035 | 2040 |
2036 /** | 2041 /** |
2037 * @param {boolean} success | 2042 * @param {boolean} success |
2038 * @this {Elements.StylePropertyTreeElement} | 2043 * @this {Elements.StylePropertyTreeElement} |
2039 */ | 2044 */ |
2040 function callback(success) { | 2045 function callback(success) { |
2041 delete this._parentPane._userOperation; | 2046 this._parentPane._userOperation = false; |
2042 | 2047 |
2043 if (!success) | 2048 if (!success) |
2044 return; | 2049 return; |
2045 this._matchedStyles.resetActiveProperties(); | 2050 this._matchedStyles.resetActiveProperties(); |
2046 this._updatePane(); | 2051 this._updatePane(); |
2047 this.styleTextAppliedForTest(); | 2052 this.styleTextAppliedForTest(); |
2048 } | 2053 } |
2049 | 2054 |
2050 event.consume(); | 2055 event.consume(); |
2051 this._parentPane._userOperation = true; | 2056 this._parentPane._userOperation = true; |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2098 this._parentPane._mouseDownTreeElement = this; | 2103 this._parentPane._mouseDownTreeElement = this; |
2099 this._parentPane._mouseDownTreeElementIsName = | 2104 this._parentPane._mouseDownTreeElementIsName = |
2100 this.nameElement && this.nameElement.isSelfOrAncestor(event.target); | 2105 this.nameElement && this.nameElement.isSelfOrAncestor(event.target); |
2101 this._parentPane._mouseDownTreeElementIsValue = | 2106 this._parentPane._mouseDownTreeElementIsValue = |
2102 this.valueElement && this.valueElement.isSelfOrAncestor(event.target); | 2107 this.valueElement && this.valueElement.isSelfOrAncestor(event.target); |
2103 } | 2108 } |
2104 } | 2109 } |
2105 | 2110 |
2106 _resetMouseDownElement() { | 2111 _resetMouseDownElement() { |
2107 if (this._parentPane) { | 2112 if (this._parentPane) { |
2108 delete this._parentPane._mouseDownTreeElement; | 2113 this._parentPane._mouseDownTreeElement = null; |
2109 delete this._parentPane._mouseDownTreeElementIsName; | 2114 this._parentPane._mouseDownTreeElementIsName = false; |
2110 delete this._parentPane._mouseDownTreeElementIsValue; | 2115 this._parentPane._mouseDownTreeElementIsValue = false; |
2111 } | 2116 } |
2112 } | 2117 } |
2113 | 2118 |
2114 /** | 2119 /** |
2115 * @override | 2120 * @override |
2116 */ | 2121 */ |
2117 onexpand() { | 2122 onexpand() { |
2118 this._updateExpandElement(); | 2123 this._updateExpandElement(); |
2119 } | 2124 } |
2120 | 2125 |
(...skipping 367 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2488 editingCancelled(element, context) { | 2493 editingCancelled(element, context) { |
2489 this._removePrompt(); | 2494 this._removePrompt(); |
2490 this._revertStyleUponEditingCanceled(); | 2495 this._revertStyleUponEditingCanceled(); |
2491 // This should happen last, as it clears the info necessary to restore the p
roperty value after [Page]Up/Down changes. | 2496 // This should happen last, as it clears the info necessary to restore the p
roperty value after [Page]Up/Down changes. |
2492 this.editingEnded(context); | 2497 this.editingEnded(context); |
2493 } | 2498 } |
2494 | 2499 |
2495 _revertStyleUponEditingCanceled() { | 2500 _revertStyleUponEditingCanceled() { |
2496 if (this._propertyHasBeenEditedIncrementally) { | 2501 if (this._propertyHasBeenEditedIncrementally) { |
2497 this.applyStyleText(this._originalPropertyText, false); | 2502 this.applyStyleText(this._originalPropertyText, false); |
2498 delete this._originalPropertyText; | 2503 this._originalPropertyText = ''; |
2499 } else if (this._newProperty) { | 2504 } else if (this._newProperty) { |
2500 this.treeOutline.removeChild(this); | 2505 this.treeOutline.removeChild(this); |
2501 } else { | 2506 } else { |
2502 this.updateTitle(); | 2507 this.updateTitle(); |
2503 } | 2508 } |
2504 } | 2509 } |
2505 | 2510 |
2506 /** | 2511 /** |
2507 * @param {string} moveDirection | 2512 * @param {string} moveDirection |
2508 * @return {?Elements.StylePropertyTreeElement} | 2513 * @return {?Elements.StylePropertyTreeElement} |
(...skipping 132 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2641 else | 2646 else |
2642 section._moveEditorFromSelector(moveDirection); | 2647 section._moveEditorFromSelector(moveDirection); |
2643 } | 2648 } |
2644 } | 2649 } |
2645 } | 2650 } |
2646 | 2651 |
2647 _removePrompt() { | 2652 _removePrompt() { |
2648 // BUG 53242. This cannot go into editingEnded(), as it should always happen
first for any editing outcome. | 2653 // BUG 53242. This cannot go into editingEnded(), as it should always happen
first for any editing outcome. |
2649 if (this._prompt) { | 2654 if (this._prompt) { |
2650 this._prompt.detach(); | 2655 this._prompt.detach(); |
2651 delete this._prompt; | 2656 this._prompt = null; |
2652 } | 2657 } |
2653 } | 2658 } |
2654 | 2659 |
2655 styleTextAppliedForTest() { | 2660 styleTextAppliedForTest() { |
2656 } | 2661 } |
2657 | 2662 |
2658 /** | 2663 /** |
2659 * @param {string} styleText | 2664 * @param {string} styleText |
2660 * @param {boolean} majorChange | 2665 * @param {boolean} majorChange |
2661 */ | 2666 */ |
(...skipping 24 matching lines...) Expand all Loading... |
2686 } | 2691 } |
2687 | 2692 |
2688 var currentNode = this._parentPane.node(); | 2693 var currentNode = this._parentPane.node(); |
2689 this._parentPane._userOperation = true; | 2694 this._parentPane._userOperation = true; |
2690 | 2695 |
2691 /** | 2696 /** |
2692 * @param {boolean} success | 2697 * @param {boolean} success |
2693 * @this {Elements.StylePropertyTreeElement} | 2698 * @this {Elements.StylePropertyTreeElement} |
2694 */ | 2699 */ |
2695 function callback(success) { | 2700 function callback(success) { |
2696 delete this._parentPane._userOperation; | 2701 this._parentPane._userOperation = false; |
2697 | 2702 |
2698 if (!success) { | 2703 if (!success) { |
2699 if (majorChange) { | 2704 if (majorChange) { |
2700 // It did not apply, cancel editing. | 2705 // It did not apply, cancel editing. |
2701 this._revertStyleUponEditingCanceled(); | 2706 this._revertStyleUponEditingCanceled(); |
2702 } | 2707 } |
2703 this.styleTextAppliedForTest(); | 2708 this.styleTextAppliedForTest(); |
2704 return; | 2709 return; |
2705 } | 2710 } |
2706 | 2711 |
(...skipping 30 matching lines...) Expand all Loading... |
2737 * @return {boolean} | 2742 * @return {boolean} |
2738 */ | 2743 */ |
2739 isEventWithinDisclosureTriangle(event) { | 2744 isEventWithinDisclosureTriangle(event) { |
2740 return event.target === this._expandElement; | 2745 return event.target === this._expandElement; |
2741 } | 2746 } |
2742 }; | 2747 }; |
2743 | 2748 |
2744 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean,
previousContent: string}} */ | 2749 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean,
previousContent: string}} */ |
2745 Elements.StylePropertyTreeElement.Context; | 2750 Elements.StylePropertyTreeElement.Context; |
2746 | 2751 |
2747 /** | |
2748 * @unrestricted | |
2749 */ | |
2750 Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { | 2752 Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt { |
2751 /** | 2753 /** |
2752 * @param {!Array<string>} cssCompletions | 2754 * @param {!Array<string>} cssCompletions |
2753 * @param {!Array<string>} cssVariables | 2755 * @param {!Array<string>} cssVariables |
2754 * @param {!Elements.StylePropertyTreeElement} treeElement | 2756 * @param {!Elements.StylePropertyTreeElement} treeElement |
2755 * @param {boolean} isEditingName | 2757 * @param {boolean} isEditingName |
2756 */ | 2758 */ |
2757 constructor(cssCompletions, cssVariables, treeElement, isEditingName) { | 2759 constructor(cssCompletions, cssVariables, treeElement, isEditingName) { |
2758 // Use the same callback both for applyItemCallback and acceptItemCallback. | 2760 // Use the same callback both for applyItemCallback and acceptItemCallback. |
2759 super(); | 2761 super(); |
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2855 * @return {string} | 2857 * @return {string} |
2856 * @this {Elements.StylesSidebarPane.CSSPropertyPrompt} | 2858 * @this {Elements.StylesSidebarPane.CSSPropertyPrompt} |
2857 */ | 2859 */ |
2858 function customNumberHandler(prefix, number, suffix) { | 2860 function customNumberHandler(prefix, number, suffix) { |
2859 if (number !== 0 && !suffix.length && SDK.cssMetadata().isLengthProperty(t
his._treeElement.property.name)) | 2861 if (number !== 0 && !suffix.length && SDK.cssMetadata().isLengthProperty(t
his._treeElement.property.name)) |
2860 suffix = 'px'; | 2862 suffix = 'px'; |
2861 return prefix + number + suffix; | 2863 return prefix + number + suffix; |
2862 } | 2864 } |
2863 | 2865 |
2864 // Handle numeric value increment/decrement only at this point. | 2866 // Handle numeric value increment/decrement only at this point. |
2865 if (!this._isEditingName && | 2867 if (!this._isEditingName && this._treeElement.valueElement && |
2866 UI.handleElementValueModifications( | 2868 UI.handleElementValueModifications( |
2867 event, this._treeElement.valueElement, finishHandler.bind(this), thi
s._isValueSuggestion.bind(this), | 2869 event, this._treeElement.valueElement, finishHandler.bind(this), thi
s._isValueSuggestion.bind(this), |
2868 customNumberHandler.bind(this))) | 2870 customNumberHandler.bind(this))) |
2869 return true; | 2871 return true; |
2870 | 2872 |
2871 return false; | 2873 return false; |
2872 } | 2874 } |
2873 | 2875 |
2874 /** | 2876 /** |
2875 * @param {string} word | 2877 * @param {string} word |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2924 if (index === 0) { | 2926 if (index === 0) { |
2925 var priority = this._isEditingName ? SDK.cssMetadata().propertyUsageWeig
ht(completion) : 1; | 2927 var priority = this._isEditingName ? SDK.cssMetadata().propertyUsageWeig
ht(completion) : 1; |
2926 prefixResults.push({text: completion, priority: priority}); | 2928 prefixResults.push({text: completion, priority: priority}); |
2927 } else if (index > -1) { | 2929 } else if (index > -1) { |
2928 anywhereResults.push({text: completion}); | 2930 anywhereResults.push({text: completion}); |
2929 } | 2931 } |
2930 } | 2932 } |
2931 } | 2933 } |
2932 }; | 2934 }; |
2933 | 2935 |
2934 /** | |
2935 * @unrestricted | |
2936 */ | |
2937 Elements.StylesSidebarPropertyRenderer = class { | 2936 Elements.StylesSidebarPropertyRenderer = class { |
2938 /** | 2937 /** |
2939 * @param {?SDK.CSSRule} rule | 2938 * @param {?SDK.CSSRule} rule |
2940 * @param {?SDK.DOMNode} node | 2939 * @param {?SDK.DOMNode} node |
2941 * @param {string} name | 2940 * @param {string} name |
2942 * @param {string} value | 2941 * @param {string} value |
2943 */ | 2942 */ |
2944 constructor(rule, node, name, value) { | 2943 constructor(rule, node, name, value) { |
2945 this._rule = rule; | 2944 this._rule = rule; |
2946 this._node = node; | 2945 this._node = node; |
2947 this._propertyName = name; | 2946 this._propertyName = name; |
2948 this._propertyValue = value; | 2947 this._propertyValue = value; |
| 2948 /** @type {?function(string):!Node} */ |
| 2949 this._colorHandler = null; |
| 2950 /** @type {?function(string):!Node} */ |
| 2951 this._bezierHandler = null; |
| 2952 /** @type {?function(string, string):!Node} */ |
| 2953 this._shadowHandler = null; |
2949 } | 2954 } |
2950 | 2955 |
2951 /** | 2956 /** |
2952 * @param {function(string):!Node} handler | 2957 * @param {function(string):!Node} handler |
2953 */ | 2958 */ |
2954 setColorHandler(handler) { | 2959 setColorHandler(handler) { |
2955 this._colorHandler = handler; | 2960 this._colorHandler = handler; |
2956 } | 2961 } |
2957 | 2962 |
2958 /** | 2963 /** |
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
3035 else if (this._node) | 3040 else if (this._node) |
3036 hrefUrl = this._node.resolveURL(url); | 3041 hrefUrl = this._node.resolveURL(url); |
3037 container.appendChild(Components.Linkifier.linkifyURL(hrefUrl || url, url, '
', undefined, undefined, true)); | 3042 container.appendChild(Components.Linkifier.linkifyURL(hrefUrl || url, url, '
', undefined, undefined, true)); |
3038 container.createTextChild(')'); | 3043 container.createTextChild(')'); |
3039 return container; | 3044 return container; |
3040 } | 3045 } |
3041 }; | 3046 }; |
3042 | 3047 |
3043 /** | 3048 /** |
3044 * @implements {UI.ToolbarItem.Provider} | 3049 * @implements {UI.ToolbarItem.Provider} |
3045 * @unrestricted | |
3046 */ | 3050 */ |
3047 Elements.StylesSidebarPane.ButtonProvider = class { | 3051 Elements.StylesSidebarPane.ButtonProvider = class { |
3048 constructor() { | 3052 constructor() { |
3049 this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'larg
eicon-add'); | 3053 this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'larg
eicon-add'); |
3050 this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked,
this); | 3054 this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked,
this); |
3051 var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long
-click-glyph'); | 3055 var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long
-click-glyph'); |
3052 this._button.element.appendChild(longclickTriangle); | 3056 this._button.element.appendChild(longclickTriangle); |
3053 | 3057 |
3054 new UI.LongClickController(this._button.element, this._longClicked.bind(this
)); | 3058 new UI.LongClickController(this._button.element, this._longClicked.bind(this
)); |
3055 UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this)); | 3059 UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this)); |
(...skipping 24 matching lines...) Expand all Loading... |
3080 } | 3084 } |
3081 | 3085 |
3082 /** | 3086 /** |
3083 * @override | 3087 * @override |
3084 * @return {!UI.ToolbarItem} | 3088 * @return {!UI.ToolbarItem} |
3085 */ | 3089 */ |
3086 item() { | 3090 item() { |
3087 return this._button; | 3091 return this._button; |
3088 } | 3092 } |
3089 }; | 3093 }; |
OLD | NEW |