[webkit-changes] [114748] trunk/Source/WebCore

Fri, 20 Apr 2012 08:46:16 -0700

Title: [114748] trunk/Source/WebCore
Revision
114748
Author
pfeld...@chromium.org
Date
2012-04-20 08:45:52 -0700 (Fri, 20 Apr 2012)

Log Message

Web Inspector: Does not have search navigation button for going through matches in either direction (prev, next)
https://bugs.webkit.org/show_bug.cgi?id=84235

Added buttons for navigating on seiarch matches in inspector panel
through button clicks as well.

Patch by Sam D <dsam2...@gmail.com> on 2012-04-20
Reviewed by Pavel Feldman.

No new tests / ux enhanced for search functionality

* English.lproj/localizedStrings.js:
* WebCore.gypi:
* inspector/front-end/Images/searchNext.png: Added.
* inspector/front-end/Images/searchPrev.png: Added.
* inspector/front-end/SearchController.js:
(WebInspector.SearchController):
(WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
(WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
(WebInspector.SearchController.prototype._onNextButtonSearch):
(WebInspector.SearchController.prototype._onPrevButtonSearch):
(WebInspector.SearchController.prototype._performSearch):
(WebInspector.SearchController.prototype._createSearchNavigationButton):
(WebInspector.SearchController.prototype._populateSearchNavigationButtons):
* inspector/front-end/WebKit.qrc:
* inspector/front-end/inspector.css:
(.toolbar-search-item):
(#search):
(#toolbar-search-navigation-control):
(.toolbar-search-navigation-label):
(.toolbar-search-navigation-label:hover):
(.toolbar-search-navigation-icon-prev , .toolbar-search-navigation-icon-next):
(.toolbar-search-navigation-icon-prev):
(.toolbar-search-navigation-icon-next):
* inspector/front-end/inspector.html:

Modified Paths

Added Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (114747 => 114748)


--- trunk/Source/WebCore/ChangeLog	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/ChangeLog	2012-04-20 15:45:52 UTC (rev 114748)
@@ -1,3 +1,40 @@
+2012-04-20  Sam D  <dsam2...@gmail.com>
+
+        Web Inspector: Does not have search navigation button for going through matches in either direction (prev, next)
+        https://bugs.webkit.org/show_bug.cgi?id=84235
+
+        Added buttons for navigating on seiarch matches in inspector panel
+        through button clicks as well. 
+
+        Reviewed by Pavel Feldman.
+
+        No new tests / ux enhanced for search functionality
+
+        * English.lproj/localizedStrings.js:
+        * WebCore.gypi:
+        * inspector/front-end/Images/searchNext.png: Added.
+        * inspector/front-end/Images/searchPrev.png: Added.
+        * inspector/front-end/SearchController.js:
+        (WebInspector.SearchController):
+        (WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
+        (WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
+        (WebInspector.SearchController.prototype._onNextButtonSearch):
+        (WebInspector.SearchController.prototype._onPrevButtonSearch):
+        (WebInspector.SearchController.prototype._performSearch):
+        (WebInspector.SearchController.prototype._createSearchNavigationButton):
+        (WebInspector.SearchController.prototype._populateSearchNavigationButtons):
+        * inspector/front-end/WebKit.qrc:
+        * inspector/front-end/inspector.css:
+        (.toolbar-search-item):
+        (#search):
+        (#toolbar-search-navigation-control):
+        (.toolbar-search-navigation-label):
+        (.toolbar-search-navigation-label:hover):
+        (.toolbar-search-navigation-icon-prev , .toolbar-search-navigation-icon-next):
+        (.toolbar-search-navigation-icon-prev):
+        (.toolbar-search-navigation-icon-next):
+        * inspector/front-end/inspector.html:
+
 2012-04-20  Pavel Feldman  <pfeld...@chromium.org>
 
         Web Inspector: extract NavigatorView and NavigatorOverlayController from ScriptsNavigator.

Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js


(Binary files differ)

Modified: trunk/Source/WebCore/WebCore.gypi (114747 => 114748)


--- trunk/Source/WebCore/WebCore.gypi	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/WebCore.gypi	2012-04-20 15:45:52 UTC (rev 114748)
@@ -6560,6 +6560,8 @@
             'inspector/front-end/Images/searchSmallBrightBlue.png',
             'inspector/front-end/Images/searchSmallGray.png',
             'inspector/front-end/Images/searchSmallWhite.png',
+            'inspector/front-end/Images/searchNext.png',
+            'inspector/front-end/Images/searchPrev.png',            
             'inspector/front-end/Images/segment.png',
             'inspector/front-end/Images/segmentEnd.png',
             'inspector/front-end/Images/segmentHover.png',

Added: trunk/Source/WebCore/inspector/front-end/Images/searchNext.png


(Binary files differ)
Property changes on: trunk/Source/WebCore/inspector/front-end/Images/searchNext.png ___________________________________________________________________

Added: svn:mime-type

Added: trunk/Source/WebCore/inspector/front-end/Images/searchPrev.png


(Binary files differ)
Property changes on: trunk/Source/WebCore/inspector/front-end/Images/searchPrev.png ___________________________________________________________________

Added: svn:mime-type

Modified: trunk/Source/WebCore/inspector/front-end/SearchController.js (114747 => 114748)


--- trunk/Source/WebCore/inspector/front-end/SearchController.js	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/inspector/front-end/SearchController.js	2012-04-20 15:45:52 UTC (rev 114748)
@@ -37,10 +37,13 @@
     this.element = document.getElementById("search");
     this._matchesElement = document.getElementById("search-results-matches");
     this._toolbarLabelElement = document.getElementById("search-toolbar-label");
+    this._searchControlBoxElement = document.getElementById("toolbar-search-navigation-control");
 
     this.element.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
     this.element.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
     this.element.addEventListener("keydown", this._onKeyDown.bind(this), true);
+   
+    this._populateSearchNavigationButtons();
 }
 
 WebInspector.SearchController.prototype = {
@@ -151,6 +154,17 @@
         }
     },
 
+    _updateSearchNavigationButtonState: function(visible)
+    {
+        if (visible) {
+            this._searchNavigationNext.removeStyleClass("hidden");
+            this._searchNavigationPrev.removeStyleClass("hidden");
+        } else {
+            this._searchNavigationNext.addStyleClass("hidden");
+            this._searchNavigationPrev.addStyleClass("hidden");
+        }
+    },
+
     /**
      * @param {?number=} matches
      * @param {number=} currentMatchIndex
@@ -159,6 +173,8 @@
     {
         if (matches == null) {
             this._matchesElement.addStyleClass("hidden");
+            // Make Search Nav key non-accessible when there is no active search.
+            this._updateSearchNavigationButtonState(false); 
             return;
         }
 
@@ -173,9 +189,14 @@
                     var matchesString = WebInspector.UIString("%d of %d matches", currentMatchIndex + 1, matches);
                 else
                     var matchesString = WebInspector.UIString("%d matches", matches);
+                // Make search nav key accessible when there are more than 1 search results found.    
+                this._updateSearchNavigationButtonState(true);
             }
-        } else
+        } else {
             var matchesString = WebInspector.UIString("Not Found");
+            // Make search nav key non-accessible when there is no match found.
+            this._updateSearchNavigationButtonState(false);
+        }
 
         this._matchesElement.removeStyleClass("hidden");
         this._matchesElement.textContent = matchesString;
@@ -234,6 +255,18 @@
         this._performSearch(event.target.value, forceSearch, event.shiftKey, false);
     },
 
+    _onNextButtonSearch: function(event)
+    {
+        // Simulate next search on search-navigation-button click.
+        this._performSearch(this.element.value, true, false, false);
+    },
+
+    _onPrevButtonSearch: function(event)
+    {
+        // Simulate previous search on search-navigation-button click.
+        this._performSearch(this.element.value, true, true, false);
+    },
+
     /**
      * @param {boolean=} forceSearch
      * @param {boolean=} isBackwardSearch
@@ -295,6 +328,44 @@
 
         currentPanel.currentQuery = query;
         currentPanel.performSearch(query);
+    },
+
+    /**
+     * @param {string=} direction
+     */ 
+    _createSearchNavigationButton: function(direction) 
+    {
+        var searchNavigationControlElement = document.createElement("div");
+        var searchNavigationIconElement = document.createElement("div");
+        
+        searchNavigationControlElement.className = "toolbar-search-navigation-label hidden";
+        
+        switch (direction) {
+        case "prev":
+            var searchTitle = WebInspector.UIString("Search Previous");
+            searchNavigationIconElement.className = "toolbar-search-navigation-icon-prev";
+            this._searchNavigationPrev = searchNavigationControlElement;
+            this._searchNavigationPrev.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
+            break;
+             
+        case "next":
+            var searchTitle = WebInspector.UIString("Search Next");
+            searchNavigationIconElement.className = "toolbar-search-navigation-icon-next";
+            this._searchNavigationNext = searchNavigationControlElement;
+            this._searchNavigationNext.addEventListener("mousedown", this._onNextButtonSearch.bind(this), false); 
+            break;
+        }
+
+        searchNavigationControlElement.setAttribute("title" , searchTitle);
+        searchNavigationControlElement.appendChild(searchNavigationIconElement);  
+        this._searchControlBoxElement.appendChild(searchNavigationControlElement);
+    },
+
+    _populateSearchNavigationButtons: function() 
+    {
+        // Lazily adding search navigation keys to dom.
+        this._createSearchNavigationButton("prev");
+        this._createSearchNavigationButton("next");
     }
 }

Modified: trunk/Source/WebCore/inspector/front-end/WebKit.qrc (114747 => 114748)


--- trunk/Source/WebCore/inspector/front-end/WebKit.qrc	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/inspector/front-end/WebKit.qrc	2012-04-20 15:45:52 UTC (rev 114748)
@@ -275,6 +275,8 @@
     <file>Images/searchSmallBrightBlue.png</file>
     <file>Images/searchSmallGray.png</file>
     <file>Images/searchSmallWhite.png</file>
+    <file>Images/searchNext.png</file>
+    <file>Images/searchPrev.png</file>
     <file>Images/segment.png</file>
     <file>Images/segmentEnd.png</file>
     <file>Images/segmentHover.png</file>

Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (114747 => 114748)


--- trunk/Source/WebCore/inspector/front-end/inspector.css	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css	2012-04-20 15:45:52 UTC (rev 114748)
@@ -261,7 +261,7 @@
 
 .toolbar-search-item {
     display: -webkit-box;
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: horizontal;
     -webkit-box-align: center;
     -webkit-box-pack: end;
 }
@@ -271,6 +271,39 @@
     font-size: 16px;
 }
 
+#toolbar-search-navigation-control {
+    width: 40px;
+}
+
+.toolbar-search-navigation-label {
+    border: 1px solid transparent;
+    border-radius: 2px;
+    padding: 3px;
+    margin-left: 2px;
+    width: 18px;
+    height: 18px;
+    float: right;
+}
+
+.toolbar-search-navigation-label:hover {
+    border: 1px solid rgba(120, 120, 120, 0.6);    
+}
+
+.toolbar-search-navigation-icon-prev , .toolbar-search-navigation-icon-next {
+    width: 9px;
+    margin-top: 2px;
+    height: 100%;
+    background-repeat: no-repeat;
+}
+
+.toolbar-search-navigation-icon-prev {
+    background-image: url(Images/searchPrev.png);
+}
+
+.toolbar-search-navigation-icon-next {
+    background-image: url(Images/searchNext.png);
+}
+
 body.compact #search {
     font-size: 11px;
 }

Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (114747 => 114748)


--- trunk/Source/WebCore/inspector/front-end/inspector.html	2012-04-20 15:38:07 UTC (rev 114747)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html	2012-04-20 15:45:52 UTC (rev 114748)
@@ -214,7 +214,10 @@
         <div id="toolbar-controls">
             <div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">&raquo;</button></div>
             <div class="toolbar-item hidden" id="search-results-matches"></div>
-            <div class="toolbar-item toolbar-search-item"><input id="search" type="search" incremental results="0"><div id="search-toolbar-label" class="toolbar-label"></div></div>
+            <div class="toolbar-item toolbar-search-item" >
+                <input id="search" type="search" incremental results="0">
+                <div id="search-toolbar-label" class="toolbar-label"></div><div id="toolbar-search-navigation-control"></div>
+            </div>
             <div class="toolbar-item close-right"><button id="close-button-right"></button></div>
         </div>
     </div>

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to