| 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. |
| (...skipping 701 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 712 | 712 |
| 713 /** | 713 /** |
| 714 * @param {!Element} container | 714 * @param {!Element} container |
| 715 */ | 715 */ |
| 716 _createHoverMenuToolbar(container) { | 716 _createHoverMenuToolbar(container) { |
| 717 if (!this.editable) | 717 if (!this.editable) |
| 718 return; | 718 return; |
| 719 var items = []; | 719 var items = []; |
| 720 | 720 |
| 721 var textShadowButton = new UI.ToolbarButton(Common.UIString('Add text-shadow
'), 'largeicon-text-shadow'); | 721 var textShadowButton = new UI.ToolbarButton(Common.UIString('Add text-shadow
'), 'largeicon-text-shadow'); |
| 722 textShadowButton.addEventListener('click', this._onInsertShadowPropertyClick
.bind(this, 'text-shadow')); | 722 textShadowButton.addEventListener( |
| 723 UI.ToolbarButton.Events.Click, this._onInsertShadowPropertyClick.bind(th
is, 'text-shadow')); |
| 723 items.push(textShadowButton); | 724 items.push(textShadowButton); |
| 724 | 725 |
| 725 var boxShadowButton = new UI.ToolbarButton(Common.UIString('Add box-shadow')
, 'largeicon-box-shadow'); | 726 var boxShadowButton = new UI.ToolbarButton(Common.UIString('Add box-shadow')
, 'largeicon-box-shadow'); |
| 726 boxShadowButton.addEventListener('click', this._onInsertShadowPropertyClick.
bind(this, 'box-shadow')); | 727 boxShadowButton.addEventListener( |
| 728 UI.ToolbarButton.Events.Click, this._onInsertShadowPropertyClick.bind(th
is, 'box-shadow')); |
| 727 items.push(boxShadowButton); | 729 items.push(boxShadowButton); |
| 728 | 730 |
| 729 var colorButton = new UI.ToolbarButton(Common.UIString('Add color'), 'largei
con-foreground-color'); | 731 var colorButton = new UI.ToolbarButton(Common.UIString('Add color'), 'largei
con-foreground-color'); |
| 730 colorButton.addEventListener('click', this._onInsertColorPropertyClick.bind(
this)); | 732 colorButton.addEventListener(UI.ToolbarButton.Events.Click, this._onInsertCo
lorPropertyClick, this); |
| 731 items.push(colorButton); | 733 items.push(colorButton); |
| 732 | 734 |
| 733 var backgroundButton = new UI.ToolbarButton(Common.UIString('Add background-
color'), 'largeicon-background-color'); | 735 var backgroundButton = new UI.ToolbarButton(Common.UIString('Add background-
color'), 'largeicon-background-color'); |
| 734 backgroundButton.addEventListener('click', this._onInsertBackgroundColorProp
ertyClick.bind(this)); | 736 backgroundButton.addEventListener(UI.ToolbarButton.Events.Click, this._onIns
ertBackgroundColorPropertyClick, this); |
| 735 items.push(backgroundButton); | 737 items.push(backgroundButton); |
| 736 | 738 |
| 737 var newRuleButton = null; | 739 var newRuleButton = null; |
| 738 if (this._style.parentRule) { | 740 if (this._style.parentRule) { |
| 739 newRuleButton = new UI.ToolbarButton(Common.UIString('Insert Style Rule Be
low'), 'largeicon-add'); | 741 newRuleButton = new UI.ToolbarButton(Common.UIString('Insert Style Rule Be
low'), 'largeicon-add'); |
| 740 newRuleButton.addEventListener('click', this._onNewRuleClick.bind(this)); | 742 newRuleButton.addEventListener(UI.ToolbarButton.Events.Click, this._onNewR
uleClick, this); |
| 741 items.push(newRuleButton); | 743 items.push(newRuleButton); |
| 742 } | 744 } |
| 743 | 745 |
| 744 var sectionToolbar = new UI.Toolbar('sidebar-pane-section-toolbar', containe
r); | 746 var sectionToolbar = new UI.Toolbar('sidebar-pane-section-toolbar', containe
r); |
| 745 for (var i = 0; i < items.length; ++i) | 747 for (var i = 0; i < items.length; ++i) |
| 746 sectionToolbar.appendToolbarItem(items[i]); | 748 sectionToolbar.appendToolbarItem(items[i]); |
| 747 | 749 |
| 748 var menuButton = new UI.ToolbarButton(Common.UIString('More tools\u2026'), '
largeicon-menu'); | 750 var menuButton = new UI.ToolbarButton(Common.UIString('More tools\u2026'), '
largeicon-menu'); |
| 749 sectionToolbar.appendToolbarItem(menuButton); | 751 sectionToolbar.appendToolbarItem(menuButton); |
| 750 setItemsVisibility.call(this, items, false); | 752 setItemsVisibility.call(this, items, false); |
| (...skipping 122 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 873 curElement = curElement.previousSibling; | 875 curElement = curElement.previousSibling; |
| 874 while (curElement && !curElement._section); | 876 while (curElement && !curElement._section); |
| 875 | 877 |
| 876 return curElement ? curElement._section : null; | 878 return curElement ? curElement._section : null; |
| 877 } | 879 } |
| 878 | 880 |
| 879 /** | 881 /** |
| 880 * @param {!Common.Event} event | 882 * @param {!Common.Event} event |
| 881 */ | 883 */ |
| 882 _onNewRuleClick(event) { | 884 _onNewRuleClick(event) { |
| 883 event.consume(); | 885 event.data.consume(); |
| 884 var rule = this._style.parentRule; | 886 var rule = this._style.parentRule; |
| 885 var range = Common.TextRange.createFromLocation(rule.style.range.endLine, ru
le.style.range.endColumn + 1); | 887 var range = Common.TextRange.createFromLocation(rule.style.range.endLine, ru
le.style.range.endColumn + 1); |
| 886 this._parentPane._addBlankSection(this, /** @type {string} */ (rule.styleShe
etId), range); | 888 this._parentPane._addBlankSection(this, /** @type {string} */ (rule.styleShe
etId), range); |
| 887 } | 889 } |
| 888 | 890 |
| 889 /** | 891 /** |
| 890 * @param {string} propertyName | 892 * @param {string} propertyName |
| 891 * @param {!Common.Event} event | 893 * @param {!Common.Event} event |
| 892 */ | 894 */ |
| 893 _onInsertShadowPropertyClick(propertyName, event) { | 895 _onInsertShadowPropertyClick(propertyName, event) { |
| 894 event.consume(true); | 896 event.data.consume(true); |
| 895 var treeElement = this.addNewBlankProperty(); | 897 var treeElement = this.addNewBlankProperty(); |
| 896 treeElement.property.name = propertyName; | 898 treeElement.property.name = propertyName; |
| 897 treeElement.property.value = '0 0 black'; | 899 treeElement.property.value = '0 0 black'; |
| 898 treeElement.updateTitle(); | 900 treeElement.updateTitle(); |
| 899 var shadowSwatchPopoverHelper = Elements.ShadowSwatchPopoverHelper.forTreeEl
ement(treeElement); | 901 var shadowSwatchPopoverHelper = Elements.ShadowSwatchPopoverHelper.forTreeEl
ement(treeElement); |
| 900 if (shadowSwatchPopoverHelper) | 902 if (shadowSwatchPopoverHelper) |
| 901 shadowSwatchPopoverHelper.showPopover(); | 903 shadowSwatchPopoverHelper.showPopover(); |
| 902 } | 904 } |
| 903 | 905 |
| 904 /** | 906 /** |
| 905 * @param {!Common.Event} event | 907 * @param {!Common.Event} event |
| 906 */ | 908 */ |
| 907 _onInsertColorPropertyClick(event) { | 909 _onInsertColorPropertyClick(event) { |
| 908 event.consume(true); | 910 event.data.consume(true); |
| 909 var treeElement = this.addNewBlankProperty(); | 911 var treeElement = this.addNewBlankProperty(); |
| 910 treeElement.property.name = 'color'; | 912 treeElement.property.name = 'color'; |
| 911 treeElement.property.value = 'black'; | 913 treeElement.property.value = 'black'; |
| 912 treeElement.updateTitle(); | 914 treeElement.updateTitle(); |
| 913 var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement
); | 915 var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement
); |
| 914 if (colorSwatch) | 916 if (colorSwatch) |
| 915 colorSwatch.showPopover(); | 917 colorSwatch.showPopover(); |
| 916 } | 918 } |
| 917 | 919 |
| 918 /** | 920 /** |
| 919 * @param {!Common.Event} event | 921 * @param {!Common.Event} event |
| 920 */ | 922 */ |
| 921 _onInsertBackgroundColorPropertyClick(event) { | 923 _onInsertBackgroundColorPropertyClick(event) { |
| 922 event.consume(true); | 924 event.data.consume(true); |
| 923 var treeElement = this.addNewBlankProperty(); | 925 var treeElement = this.addNewBlankProperty(); |
| 924 treeElement.property.name = 'background-color'; | 926 treeElement.property.name = 'background-color'; |
| 925 treeElement.property.value = 'white'; | 927 treeElement.property.value = 'white'; |
| 926 treeElement.updateTitle(); | 928 treeElement.updateTitle(); |
| 927 var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement
); | 929 var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement
); |
| 928 if (colorSwatch) | 930 if (colorSwatch) |
| 929 colorSwatch.showPopover(); | 931 colorSwatch.showPopover(); |
| 930 } | 932 } |
| 931 | 933 |
| 932 /** | 934 /** |
| (...skipping 2076 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3009 } | 3011 } |
| 3010 }; | 3012 }; |
| 3011 | 3013 |
| 3012 /** | 3014 /** |
| 3013 * @implements {UI.ToolbarItem.Provider} | 3015 * @implements {UI.ToolbarItem.Provider} |
| 3014 * @unrestricted | 3016 * @unrestricted |
| 3015 */ | 3017 */ |
| 3016 Elements.StylesSidebarPane.ButtonProvider = class { | 3018 Elements.StylesSidebarPane.ButtonProvider = class { |
| 3017 constructor() { | 3019 constructor() { |
| 3018 this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'larg
eicon-add'); | 3020 this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'larg
eicon-add'); |
| 3019 this._button.addEventListener('click', this._clicked, this); | 3021 this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked,
this); |
| 3020 var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long
-click-glyph'); | 3022 var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long
-click-glyph'); |
| 3021 this._button.element.appendChild(longclickTriangle); | 3023 this._button.element.appendChild(longclickTriangle); |
| 3022 | 3024 |
| 3023 new UI.LongClickController(this._button.element, this._longClicked.bind(this
)); | 3025 new UI.LongClickController(this._button.element, this._longClicked.bind(this
)); |
| 3024 UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this)); | 3026 UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this)); |
| 3025 onNodeChanged.call(this); | 3027 onNodeChanged.call(this); |
| 3026 | 3028 |
| 3027 /** | 3029 /** |
| 3028 * @this {Elements.StylesSidebarPane.ButtonProvider} | 3030 * @this {Elements.StylesSidebarPane.ButtonProvider} |
| 3029 */ | 3031 */ |
| 3030 function onNodeChanged() { | 3032 function onNodeChanged() { |
| 3031 var node = UI.context.flavor(SDK.DOMNode); | 3033 var node = UI.context.flavor(SDK.DOMNode); |
| 3032 node = node ? node.enclosingElementOrSelf() : null; | 3034 node = node ? node.enclosingElementOrSelf() : null; |
| 3033 this._button.setEnabled(!!node); | 3035 this._button.setEnabled(!!node); |
| 3034 } | 3036 } |
| 3035 } | 3037 } |
| 3036 | 3038 |
| 3037 _clicked() { | 3039 /** |
| 3040 * @param {!Common.Event} event |
| 3041 */ |
| 3042 _clicked(event) { |
| 3038 Elements.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet(
); | 3043 Elements.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet(
); |
| 3039 } | 3044 } |
| 3040 | 3045 |
| 3041 /** | 3046 /** |
| 3042 * @param {!Event} e | 3047 * @param {!Event} e |
| 3043 */ | 3048 */ |
| 3044 _longClicked(e) { | 3049 _longClicked(e) { |
| 3045 Elements.StylesSidebarPane._instance._onAddButtonLongClick(e); | 3050 Elements.StylesSidebarPane._instance._onAddButtonLongClick(e); |
| 3046 } | 3051 } |
| 3047 | 3052 |
| 3048 /** | 3053 /** |
| 3049 * @override | 3054 * @override |
| 3050 * @return {!UI.ToolbarItem} | 3055 * @return {!UI.ToolbarItem} |
| 3051 */ | 3056 */ |
| 3052 item() { | 3057 item() { |
| 3053 return this._button; | 3058 return this._button; |
| 3054 } | 3059 } |
| 3055 }; | 3060 }; |
| OLD | NEW |