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