Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(156)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/settings/SettingsScreen.js

Issue 1412703005: [DevTools] Remove WebInspector.SettingsList. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@edit-file-system-list-widget
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2013 Google Inc. All rights reserved. 2 * Copyright (C) 2013 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * * Redistributions of source code must retain the above copyright 8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above 10 * * Redistributions in binary form must reproduce the above
(...skipping 335 matching lines...) Expand 10 before | Expand all | Expand 10 after
346 header.createChild("div", "file-system-name").textContent = folderName; 346 header.createChild("div", "file-system-name").textContent = folderName;
347 var path = header.createChild("div", "file-system-path"); 347 var path = header.createChild("div", "file-system-path");
348 path.textContent = fileSystemPath; 348 path.textContent = fileSystemPath;
349 path.title = fileSystemPath; 349 path.title = fileSystemPath;
350 350
351 var toolbar = new WebInspector.Toolbar(); 351 var toolbar = new WebInspector.Toolbar();
352 var button = new WebInspector.ToolbarButton(WebInspector.UIString("Remov e"), "delete-toolbar-item"); 352 var button = new WebInspector.ToolbarButton(WebInspector.UIString("Remov e"), "delete-toolbar-item");
353 button.addEventListener("click", this._removeFileSystemClicked.bind(this , fileSystem)); 353 button.addEventListener("click", this._removeFileSystemClicked.bind(this , fileSystem));
354 toolbar.appendToolbarItem(button); 354 toolbar.appendToolbarItem(button);
355 header.appendChild(toolbar.element); 355 header.appendChild(toolbar.element);
356 //createTextButton(WebInspector.UIString("Remove"), this._removeFileSyst emClicked.bind(this, fileSystem), "file-system-remove"));
357 356
358 return element; 357 return element;
359 }, 358 },
360 359
361 /** 360 /**
362 * @param {!WebInspector.IsolatedFileSystem} fileSystem 361 * @param {!WebInspector.IsolatedFileSystem} fileSystem
363 */ 362 */
364 _removeFileSystemClicked: function(fileSystem) 363 _removeFileSystemClicked: function(fileSystem)
365 { 364 {
366 WebInspector.isolatedFileSystemManager.removeFileSystem(fileSystem.path( )); 365 WebInspector.isolatedFileSystemManager.removeFileSystem(fileSystem.path( ));
(...skipping 198 matching lines...) Expand 10 before | Expand all | Expand 10 after
565 { 564 {
566 var settings = extension.descriptor()["settings"]; 565 var settings = extension.descriptor()["settings"];
567 if (settings && settings.indexOf(setting.name) !== -1) { 566 if (settings && settings.indexOf(setting.name) !== -1) {
568 WebInspector._settingsController.showSettingsScreen(extension.de scriptor()["name"]); 567 WebInspector._settingsController.showSettingsScreen(extension.de scriptor()["name"]);
569 success = true; 568 success = true;
570 } 569 }
571 } 570 }
572 } 571 }
573 } 572 }
574 573
575 /**
576 * @constructor
577 * @extends {WebInspector.Object}
578 * @param {!Array.<{id: string, placeholder: (string|undefined), options: (!Arra y.<string>|undefined)}>} columns
579 * @param {function(!Element, {id: string, placeholder: (string|undefined), opti ons: (!Array.<string>|undefined)}, ?string)} itemRenderer
580 */
581 WebInspector.SettingsList = function(columns, itemRenderer)
582 {
583 this.element = createElementWithClass("div", "settings-list");
584 this.element.tabIndex = -1;
585 this._itemRenderer = itemRenderer;
586 /** @type {!Map.<string, !Element>} */
587 this._listItems = new Map();
588 /** @type {!Array.<?string>} */
589 this._ids = [];
590 this._columns = columns;
591 /** @type {!Set<string>} */
592 this._editableEntries = new Set();
593 }
594
595 WebInspector.SettingsList.Events = {
596 Selected: "Selected",
597 Removed: "Removed",
598 DoubleClicked: "DoubleClicked",
599 }
600
601 WebInspector.SettingsList.prototype = {
602 /**
603 * @param {?string} itemId
604 * @param {?string=} beforeId
605 * @param {boolean=} readOnly
606 * @return {!Element}
607 */
608 addItem: function(itemId, beforeId, readOnly)
609 {
610 if (!readOnly && itemId)
611 this._editableEntries.add(itemId);
612 var listItem = createElementWithClass("div", "settings-list-item");
613 listItem._id = itemId;
614 if (beforeId)
615 this.element.insertBefore(listItem, this.itemForId(beforeId));
616 else
617 this.element.appendChild(listItem);
618
619 var listItemContents = listItem.createChild("div", "settings-list-item-c ontents");
620 var listItemColumnsElement = listItemContents.createChild("div", "settin gs-list-item-columns");
621
622 listItem.columnElements = {};
623 for (var i = 0; i < this._columns.length; ++i) {
624 var column = this._columns[i];
625 var columnElement = listItemColumnsElement.createChild("div", "list- column settings-list-column-" + column.id);
626 listItem.columnElements[column.id] = columnElement;
627 this._itemRenderer(columnElement, column, itemId);
628 }
629 if (!readOnly) {
630 var removeItemButton = this._createRemoveButton(removeItemClicked.bi nd(this));
631 listItemContents.addEventListener("click", this.selectItem.bind(this , itemId), false);
632 listItemContents.addEventListener("dblclick", this._onDoubleClick.bi nd(this, itemId), false);
633 listItemContents.appendChild(removeItemButton);
634 }
635
636 this._listItems.set(itemId || "", listItem);
637 if (typeof beforeId !== "undefined")
638 this._ids.splice(this._ids.indexOf(beforeId), 0, itemId);
639 else
640 this._ids.push(itemId);
641
642 /**
643 * @param {!Event} event
644 * @this {WebInspector.SettingsList}
645 */
646 function removeItemClicked(event)
647 {
648 removeItemButton.disabled = true;
649 this.removeItem(itemId);
650 this.dispatchEventToListeners(WebInspector.SettingsList.Events.Remov ed, itemId);
651 event.consume();
652 }
653
654 return listItem;
655 },
656
657 /**
658 * @param {?string} id
659 */
660 removeItem: function(id)
661 {
662 var listItem = this._listItems.remove(id || "");
663 if (listItem)
664 listItem.remove();
665 this._ids.remove(id);
666 if (id === this._selectedId) {
667 delete this._selectedId;
668 if (this._ids.length)
669 this.selectItem(this._ids[0]);
670 }
671 },
672
673 /**
674 * @return {!Array.<?string>}
675 */
676 itemIds: function()
677 {
678 return this._ids.slice();
679 },
680
681 /**
682 * @return {!Array.<string>}
683 */
684 columns: function()
685 {
686 return this._columns.select("id");
687 },
688
689 /**
690 * @return {?string}
691 */
692 selectedId: function()
693 {
694 return this._selectedId;
695 },
696
697 /**
698 * @return {?Element}
699 */
700 selectedItem: function()
701 {
702 return this._selectedId ? this.itemForId(this._selectedId) : null;
703 },
704
705 /**
706 * @param {string} itemId
707 * @return {?Element}
708 */
709 itemForId: function(itemId)
710 {
711 return this._listItems.get(itemId) || null;
712 },
713
714 /**
715 * @param {?string} id
716 * @param {!Event=} event
717 */
718 _onDoubleClick: function(id, event)
719 {
720 this.dispatchEventToListeners(WebInspector.SettingsList.Events.DoubleCli cked, id);
721 },
722
723 /**
724 * @param {?string} id
725 * @param {!Event=} event
726 */
727 selectItem: function(id, event)
728 {
729 if (this._selectedId)
730 this.itemForId(this._selectedId).classList.remove("selected");
731
732 this._selectedId = id;
733 if (this._selectedId)
734 this.itemForId(this._selectedId).classList.add("selected");
735
736 this.dispatchEventToListeners(WebInspector.SettingsList.Events.Selected, id);
737 if (event)
738 event.consume();
739 },
740
741 /**
742 * @param {function(!Event)} handler
743 * @return {!Element}
744 */
745 _createRemoveButton: function(handler)
746 {
747 var removeButton = createElementWithClass("div", "remove-item-button");
748 removeButton.addEventListener("click", handler, false);
749 return removeButton;
750 },
751
752 __proto__: WebInspector.Object.prototype
753 }
754
755 /**
756 * @constructor
757 * @extends {WebInspector.SettingsList}
758 * @param {!Array.<{id: string, placeholder: (string|undefined), options: (!Arra y.<string>|undefined)}>} columns
759 * @param {function(string, string):string} valuesProvider
760 * @param {function(?string, !Object):!Array.<string>} validateHandler
761 * @param {function(?string, !Object)} editHandler
762 */
763 WebInspector.EditableSettingsList = function(columns, valuesProvider, validateHa ndler, editHandler)
764 {
765 WebInspector.SettingsList.call(this, columns, this._renderColumn.bind(this)) ;
766 this._valuesProvider = valuesProvider;
767 this._validateHandler = validateHandler;
768 this._editHandler = editHandler;
769 /** @type {!Map.<string, (!HTMLInputElement|!HTMLSelectElement)>} */
770 this._addInputElements = new Map();
771 /** @type {!Map.<string, !Map.<string, (!HTMLInputElement|!HTMLSelectElement )>>} */
772 this._editInputElements = new Map();
773 /** @type {!Map.<string, !Map.<string, !HTMLSpanElement>>} */
774 this._textElements = new Map();
775
776 this._addMappingItem = this.addItem(null);
777 this._addMappingItem.classList.add("item-editing", "add-list-item");
778 }
779
780 WebInspector.EditableSettingsList.prototype = {
781 /**
782 * @override
783 * @param {?string} itemId
784 * @param {?string=} beforeId
785 * @param {boolean=} readOnly
786 * @return {!Element}
787 */
788 addItem: function(itemId, beforeId, readOnly)
789 {
790 var listItem = WebInspector.SettingsList.prototype.addItem.call(this, it emId, beforeId, readOnly);
791 if (!readOnly)
792 listItem.classList.add("editable");
793 return listItem;
794 },
795
796 /**
797 * @param {?string} itemId
798 */
799 refreshItem: function(itemId)
800 {
801 if (!itemId)
802 return;
803 var listItem = this.itemForId(itemId);
804 if (!listItem)
805 return;
806 for (var i = 0; i < this._columns.length; ++i) {
807 var column = this._columns[i];
808 var columnId = column.id;
809
810 var value = this._valuesProvider(itemId, columnId);
811 this._setTextElementContent(itemId, columnId, value);
812
813 var editElement = this._editInputElements.get(itemId).get(columnId);
814 this._setEditElementValue(editElement, value || "");
815 }
816 },
817
818 /**
819 * @param {?string} itemId
820 * @param {string} columnId
821 */
822 _textElementContent: function(itemId, columnId)
823 {
824 if (!itemId)
825 return "";
826 return this._textElements.get(itemId).get(columnId).textContent.replace( /\u200B/g, "");
827 },
828
829 /**
830 * @param {string} itemId
831 * @param {string} columnId
832 * @param {string} text
833 */
834 _setTextElementContent: function(itemId, columnId, text)
835 {
836 var textElement = this._textElements.get(itemId).get(columnId);
837 textElement.textContent = text.replace(/.{4}/g, "$&\u200B");
838 textElement.title = text;
839 },
840
841 /**
842 * @param {!Element} columnElement
843 * @param {{id: string, placeholder: (string|undefined), options: (!Array.<s tring>|undefined)}} column
844 * @param {?string} itemId
845 */
846 _renderColumn: function(columnElement, column, itemId)
847 {
848 var columnId = column.id;
849 if (itemId === null) {
850 this._createEditElement(columnElement, column, itemId);
851 return;
852 }
853 var validItemId = itemId;
854
855 if (!this._editInputElements.has(itemId))
856 this._editInputElements.set(itemId, new Map());
857 if (!this._textElements.has(itemId))
858 this._textElements.set(itemId, new Map());
859
860 var value = this._valuesProvider(itemId, columnId);
861
862 var textElement = /** @type {!HTMLSpanElement} */ (columnElement.createC hild("span", "list-column-text"));
863 if (this._editableEntries.has(itemId))
864 columnElement.addEventListener("click", rowClicked.bind(this), false );
865 this._textElements.get(itemId).set(columnId, textElement);
866 this._setTextElementContent(itemId, columnId, value);
867
868 if (this._editableEntries.has(itemId))
869 this._createEditElement(columnElement, column, itemId, value);
870
871 /**
872 * @param {!Event} event
873 * @this {WebInspector.EditableSettingsList}
874 */
875 function rowClicked(event)
876 {
877 if (itemId === this._editingId)
878 return;
879 console.assert(!this._editingId);
880 this._editingId = validItemId;
881 var listItem = this.itemForId(validItemId);
882 listItem.classList.add("item-editing");
883 var editElement = event.target.editElement || this._editInputElement s.get(validItemId).get(this.columns()[0]);
884 editElement.focus();
885 if (editElement.select)
886 editElement.select();
887 }
888 },
889
890 /**
891 * @param {!Element} columnElement
892 * @param {{id: string, placeholder: (string|undefined), options: (!Array.<s tring>|undefined)}} column
893 * @param {?string} itemId
894 * @param {string=} value
895 * @return {!Element}
896 */
897 _createEditElement: function(columnElement, column, itemId, value)
898 {
899 var options = column.options;
900 if (options) {
901 var editElement = /** @type {!HTMLSelectElement} */ (columnElement.c reateChild("select", "chrome-select list-column-editor"));
902 for (var i = 0; i < options.length; ++i) {
903 var option = editElement.createChild("option");
904 option.value = options[i];
905 option.textContent = options[i];
906 }
907 editElement.addEventListener("blur", this._editMappingBlur.bind(this , itemId), false);
908 editElement.addEventListener("change", this._editMappingBlur.bind(th is, itemId), false);
909 } else {
910 var editElement = /** @type {!HTMLInputElement} */ (columnElement.cr eateChild("input", "list-column-editor"));
911 editElement.addEventListener("blur", this._editMappingBlur.bind(this , itemId), false);
912 editElement.addEventListener("input", this._validateEdit.bind(this, itemId), false);
913 if (itemId === null)
914 editElement.placeholder = column.placeholder || "";
915 }
916
917 if (itemId === null)
918 this._addInputElements.set(column.id, editElement);
919 else
920 this._editInputElements.get(itemId).set(column.id, editElement);
921
922 this._setEditElementValue(editElement, value || "");
923 columnElement.editElement = editElement;
924 return editElement;
925 },
926
927 /**
928 * @param {!HTMLInputElement|!HTMLSelectElement|undefined} editElement
929 * @param {string} value
930 */
931 _setEditElementValue: function(editElement, value)
932 {
933 if (!editElement)
934 return;
935 if (editElement instanceof HTMLSelectElement) {
936 var options = editElement.options;
937 for (var i = 0; i < options.length; ++i)
938 options[i].selected = (options[i].value === value);
939 } else {
940 editElement.value = value;
941 }
942 },
943
944 /**
945 * @param {?string} itemId
946 * @return {!Object}
947 */
948 _data: function(itemId)
949 {
950 var inputElements = this._inputElements(itemId);
951 var data = { __proto__: null };
952 var columns = this.columns();
953 for (var i = 0; i < columns.length; ++i)
954 data[columns[i]] = inputElements.get(columns[i]).value;
955 return data;
956 },
957
958 /**
959 * @param {?string} itemId
960 * @return {?Map.<string, (!HTMLInputElement|!HTMLSelectElement)>}
961 */
962 _inputElements: function(itemId)
963 {
964 if (!itemId)
965 return this._addInputElements;
966 return this._editInputElements.get(itemId) || null;
967 },
968
969 /**
970 * @param {?string} itemId
971 * @return {boolean}
972 */
973 _validateEdit: function(itemId)
974 {
975 var errorColumns = this._validateHandler(itemId, this._data(itemId));
976 var hasChanges = this._hasChanges(itemId);
977 var columns = this.columns();
978 for (var i = 0; i < columns.length; ++i) {
979 var columnId = columns[i];
980 var inputElement = this._inputElements(itemId).get(columnId);
981 if (hasChanges && errorColumns.indexOf(columnId) !== -1)
982 inputElement.classList.add("editable-item-error");
983 else
984 inputElement.classList.remove("editable-item-error");
985 }
986 return !errorColumns.length;
987 },
988
989 /**
990 * @param {?string} itemId
991 * @return {boolean}
992 */
993 _hasChanges: function(itemId)
994 {
995 var columns = this.columns();
996 for (var i = 0; i < columns.length; ++i) {
997 var columnId = columns[i];
998 var oldValue = this._textElementContent(itemId, columnId);
999 var newValue = this._inputElements(itemId).get(columnId).value;
1000 if (oldValue !== newValue)
1001 return true;
1002 }
1003 return false;
1004 },
1005
1006 /**
1007 * @param {?string} itemId
1008 * @param {!Event} event
1009 */
1010 _editMappingBlur: function(itemId, event)
1011 {
1012 if (itemId === null) {
1013 this._onAddMappingInputBlur(event);
1014 return;
1015 }
1016
1017 var inputElements = this._editInputElements.get(itemId).valuesArray();
1018 if (inputElements.indexOf(event.relatedTarget) !== -1)
1019 return;
1020
1021 var listItem = this.itemForId(itemId);
1022 listItem.classList.remove("item-editing");
1023 delete this._editingId;
1024
1025 if (!this._hasChanges(itemId))
1026 return;
1027
1028 if (!this._validateEdit(itemId)) {
1029 var columns = this.columns();
1030 for (var i = 0; i < columns.length; ++i) {
1031 var columnId = columns[i];
1032 var editElement = this._editInputElements.get(itemId).get(column Id);
1033 this._setEditElementValue(editElement, this._textElementContent( itemId, columnId));
1034 editElement.classList.remove("editable-item-error");
1035 }
1036 return;
1037 }
1038 this._editHandler(itemId, this._data(itemId));
1039 },
1040
1041 /**
1042 * @param {!Event} event
1043 */
1044 _onAddMappingInputBlur: function(event)
1045 {
1046 var inputElements = this._addInputElements.valuesArray();
1047 if (inputElements.indexOf(event.relatedTarget) !== -1)
1048 return;
1049
1050 if (!this._hasChanges(null))
1051 return;
1052
1053 if (!this._validateEdit(null))
1054 return;
1055
1056 this._editHandler(null, this._data(null));
1057 var columns = this.columns();
1058 for (var i = 0; i < columns.length; ++i) {
1059 var columnId = columns[i];
1060 var editElement = this._addInputElements.get(columnId);
1061 this._setEditElementValue(editElement, "");
1062 }
1063 },
1064
1065 __proto__: WebInspector.SettingsList.prototype
1066 }
1067
1068 WebInspector._settingsController = new WebInspector.SettingsController(); 574 WebInspector._settingsController = new WebInspector.SettingsController();
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/settings/settingsScreen.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698