Comments (17)
Yeah good call. "Cross-domain" filter for sure.
Perhaps match on all fields? (for "stylesheet" it would have 16 matches, which seems OK for such a common thing.
from debugger-protocol-viewer.
Yeah, it should simply filter on all property name and values.
from debugger-protocol-viewer.
I was thinking how to implement that and I figured out we need a polymer component that:
- loads protocol.json via AJAX
- (caches it in the localStorage - not sure about that one)
- when user starts typing, displays all matching entries
- and redirects user to the clicked entry.
As for the UI, I really like search widget in the polymer docs: https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html .
from debugger-protocol-viewer.
Eric agreed to work on that 👏
from debugger-protocol-viewer.
Just so I don't miss something, are these all the protocol.json properties that should be used in filtering:
Domains
- Domain names
- Domain descriptions
Types
- Type ids
- Type properties
Commands
- Command names
- Command descriptions
- Command parameter names
Events
- Event names
- Event parameter names
Also, I'm thinking we might be able to write a utility (like the existing create-domain-files.js) that saves us from loading the entire protocol json file. Any thoughts?
from debugger-protocol-viewer.
IMO searching inside descriptions and property names will create a lot of false positives. Maybe lets limit the first version of search to names/ids? If we find it too limited it should be easy enough to add descriptions and property names later on. What do you think?
utility that saves us from loading the entire protocol json file
That's a great idea. protocol.json is huge and I started thinking about caching it in localstorage (after initial load), but this solution has a lot of drawbacks (keeping it up to date, initial load v.long). If we create a separate json, limited to data that search actually needs, we should be able to get away with relying on browser cache. We can probably even embed it in HTML.
from debugger-protocol-viewer.
Tossing the protocol in sessionstorage seems like a decent eviction policy for us.
I'm +1 on descriptions+property names, but it will require some use and feedback either way.
excited for this one!
from debugger-protocol-viewer.
Sorry for being out of the loop, but by eviction policy do you mean temp solution?
I've started with a two-part solution that I'll push to a branch soon -- still using a smaller search index rather than the entire json file, but only aggregating "primary" keywords (which are domain, method, type, and event names). @kdzwinel had a good point about false positives in descriptions, so we might want something a bit more sophisticated to handle those keywords (in part two of this feature).
from debugger-protocol-viewer.
i was just saying that if there was a concern about fetching protocol.json on every pageload we could cache it in sessionstorage.
the above sgtm
from debugger-protocol-viewer.
Hi guys,
I've got a mostly-done version of Search working. Check it out here: https://ericguzman.github.io/debugger-protocol-viewer/
Let me know if run into any issues, or have any suggestions while I'm putting the final bit of polish on it + testing cross-browser.
from debugger-protocol-viewer.
bug: I would expect power
would include results for the canProfilePower
method
Outside of this, it's looking great. nice one.
from debugger-protocol-viewer.
Whoa, this looks great! Awesome job 👍
Small issues that I found:
- when there are no results we should show some kind of a message or hide the white results box all together
- when you search for something from the same page that you are currently browsing and click on the search result the results list should close (e.g. try searching and clicking on
getResourceTree
while being on the/debugger-protocol-viewer/Page
page). - if
<input type=search
was used instead of<input type=text
we would get a native clear button for free - it wasn't obvious for me how to close the search results list, but maybe it's just me
from debugger-protocol-viewer.
Looks great!
A little feature request: When searching for "css.enable" (.<event/method>, I would love the relevant section to show up. This would super useful when inspecting the WebSocket traffic/debugging the traffic.
from debugger-protocol-viewer.
@ericguzman would love to get this this work updated and merged when you get a moment
from debugger-protocol-viewer.
@paulirish Been tied up with work work, but I'll merge the update with bug fixes/feature requests in the next couple days.
from debugger-protocol-viewer.
Search landed 🎆 Should we close this task? IMO all further improvements should get separate tickets.
from debugger-protocol-viewer.
yup!
from debugger-protocol-viewer.
Related Issues (20)
- How can I get the serial number of certificate in Network.securityDetails? HOT 1
- Use GitHub Action to deploy to GitHub Pages HOT 2
- Fix service-worker situation
- Tweak page title to be more useful
- page.setDeviceOrientation is undefine HOT 1
- Migrate to Lighthouse CI 0.4.0 🎉 HOT 1
- Restore URL-based search functionality HOT 1
- Docs are returning 404 HOT 1
- Misleading document
- "DOM.getFlattenedDocument" -- Different results between the same service sites in two different network environments
- can i install a crx chrome extension?
- Include cross-references
- adopt lushnikov's vanilla viewer? HOT 1
- Unclear what `ServiceWorker.startWorker` does and what `scopeURL string` is expected to be
- Unclear project repository/site name and description
- No indication of how website issues are tracked
- Monitoring the protocol section: misleading name
- regie
- ACCOUNT
- REGIONAL INTEL DEFENSE ANALYST, DEPARTMENT OF NATIONAL DEFENSE — PHILIPPINES © 2024 by REGIE A FRANCISCO EDM EDD LPT c JD is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from debugger-protocol-viewer.