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